mirror of
https://github.com/pezkuwichain/pwap.git
synced 2026-04-22 09:07:55 +00:00
Initial commit - PezkuwiChain Web Governance App
This commit is contained in:
@@ -0,0 +1,386 @@
|
||||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import { Card, CardContent, CardHeader } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
|
||||
import { ThumbsUp, ThumbsDown, MessageSquare, Shield, Award, TrendingUp, AlertTriangle, MoreVertical, Flag, Edit, Trash2, Loader2 } from 'lucide-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
|
||||
import { useWebSocket } from '@/contexts/WebSocketContext';
|
||||
import { useToast } from '@/hooks/use-toast';
|
||||
|
||||
interface Comment {
|
||||
id: string;
|
||||
author: string;
|
||||
avatar: string;
|
||||
content: string;
|
||||
timestamp: string;
|
||||
upvotes: number;
|
||||
downvotes: number;
|
||||
isExpert: boolean;
|
||||
badges: string[];
|
||||
replies: Comment[];
|
||||
sentiment: 'positive' | 'neutral' | 'negative';
|
||||
userVote?: 'up' | 'down' | null;
|
||||
isLive?: boolean;
|
||||
}
|
||||
|
||||
export function DiscussionThread({ proposalId }: { proposalId: string }) {
|
||||
const { t } = useTranslation();
|
||||
const { toast } = useToast();
|
||||
const { subscribe, unsubscribe, sendMessage, isConnected } = useWebSocket();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [comments, setComments] = useState<Comment[]>([
|
||||
{
|
||||
id: '1',
|
||||
author: 'Dr. Rojin Ahmed',
|
||||
avatar: '/api/placeholder/40/40',
|
||||
content: '## Strong Support for This Proposal\n\nThis proposal addresses a critical need in our governance system. The implementation timeline is realistic and the budget allocation seems appropriate.\n\n**Key Benefits:**\n- Improved transparency\n- Better community engagement\n- Clear accountability metrics\n\nI particularly appreciate the phased approach outlined in section 3.',
|
||||
timestamp: '2 hours ago',
|
||||
upvotes: 24,
|
||||
downvotes: 2,
|
||||
isExpert: true,
|
||||
badges: ['Governance Expert', 'Top Contributor'],
|
||||
sentiment: 'positive',
|
||||
userVote: null,
|
||||
replies: [
|
||||
{
|
||||
id: '1-1',
|
||||
author: 'Kawa Mustafa',
|
||||
avatar: '/api/placeholder/40/40',
|
||||
content: 'Agreed! The phased approach reduces risk significantly.',
|
||||
timestamp: '1 hour ago',
|
||||
upvotes: 8,
|
||||
downvotes: 0,
|
||||
isExpert: false,
|
||||
badges: ['Active Member'],
|
||||
sentiment: 'positive',
|
||||
userVote: null,
|
||||
replies: []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
author: 'Dilan Karim',
|
||||
avatar: '/api/placeholder/40/40',
|
||||
content: '### Concerns About Implementation\n\nWhile I support the overall direction, I have concerns about:\n\n1. The technical complexity might be underestimated\n2. We need more details on the security audit process\n3. Reference to [Proposal #142](/proposals/142) shows similar challenges\n\n> "The devil is in the details" - and we need more of them',
|
||||
timestamp: '3 hours ago',
|
||||
upvotes: 18,
|
||||
downvotes: 5,
|
||||
isExpert: true,
|
||||
badges: ['Security Expert'],
|
||||
sentiment: 'negative',
|
||||
userVote: null,
|
||||
replies: []
|
||||
}
|
||||
]);
|
||||
|
||||
const [newComment, setNewComment] = useState('');
|
||||
const [replyTo, setReplyTo] = useState<string | null>(null);
|
||||
const [showMarkdownHelp, setShowMarkdownHelp] = useState(false);
|
||||
|
||||
// WebSocket subscriptions for real-time updates
|
||||
useEffect(() => {
|
||||
const handleNewComment = (data: any) => {
|
||||
const newComment: Comment = {
|
||||
...data,
|
||||
isLive: true,
|
||||
};
|
||||
setComments(prev => [newComment, ...prev]);
|
||||
|
||||
// Show notification for mentions
|
||||
if (data.content.includes('@currentUser')) {
|
||||
toast({
|
||||
title: "You were mentioned",
|
||||
description: `${data.author} mentioned you in a comment`,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleVoteUpdate = (data: { commentId: string; upvotes: number; downvotes: number }) => {
|
||||
setComments(prev => updateVoteCounts(prev, data.commentId, data.upvotes, data.downvotes));
|
||||
};
|
||||
|
||||
const handleSentimentUpdate = (data: { proposalId: string; sentiment: any }) => {
|
||||
if (data.proposalId === proposalId) {
|
||||
// Update sentiment visualization in parent component
|
||||
console.log('Sentiment updated:', data.sentiment);
|
||||
}
|
||||
};
|
||||
|
||||
subscribe('comment', handleNewComment);
|
||||
subscribe('vote', handleVoteUpdate);
|
||||
subscribe('sentiment', handleSentimentUpdate);
|
||||
|
||||
return () => {
|
||||
unsubscribe('comment', handleNewComment);
|
||||
unsubscribe('vote', handleVoteUpdate);
|
||||
unsubscribe('sentiment', handleSentimentUpdate);
|
||||
};
|
||||
}, [subscribe, unsubscribe, proposalId, toast]);
|
||||
|
||||
const updateVoteCounts = (comments: Comment[], targetId: string, upvotes: number, downvotes: number): Comment[] => {
|
||||
return comments.map(comment => {
|
||||
if (comment.id === targetId) {
|
||||
return { ...comment, upvotes, downvotes };
|
||||
}
|
||||
if (comment.replies.length > 0) {
|
||||
return {
|
||||
...comment,
|
||||
replies: updateVoteCounts(comment.replies, targetId, upvotes, downvotes)
|
||||
};
|
||||
}
|
||||
return comment;
|
||||
});
|
||||
};
|
||||
|
||||
const handleVote = useCallback((commentId: string, voteType: 'up' | 'down') => {
|
||||
const updatedComments = updateCommentVote(comments, commentId, voteType);
|
||||
setComments(updatedComments);
|
||||
|
||||
// Send vote update via WebSocket
|
||||
const comment = findComment(updatedComments, commentId);
|
||||
if (comment && isConnected) {
|
||||
sendMessage({
|
||||
type: 'vote',
|
||||
data: {
|
||||
commentId,
|
||||
upvotes: comment.upvotes,
|
||||
downvotes: comment.downvotes,
|
||||
proposalId,
|
||||
},
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
}
|
||||
}, [comments, isConnected, sendMessage, proposalId]);
|
||||
|
||||
const findComment = (comments: Comment[], targetId: string): Comment | null => {
|
||||
for (const comment of comments) {
|
||||
if (comment.id === targetId) return comment;
|
||||
const found = findComment(comment.replies, targetId);
|
||||
if (found) return found;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const updateCommentVote = (comments: Comment[], targetId: string, voteType: 'up' | 'down'): Comment[] => {
|
||||
return comments.map(comment => {
|
||||
if (comment.id === targetId) {
|
||||
const wasUpvoted = comment.userVote === 'up';
|
||||
const wasDownvoted = comment.userVote === 'down';
|
||||
|
||||
if (voteType === 'up') {
|
||||
return {
|
||||
...comment,
|
||||
upvotes: wasUpvoted ? comment.upvotes - 1 : comment.upvotes + 1,
|
||||
downvotes: wasDownvoted ? comment.downvotes - 1 : comment.downvotes,
|
||||
userVote: wasUpvoted ? null : 'up'
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
...comment,
|
||||
upvotes: wasUpvoted ? comment.upvotes - 1 : comment.upvotes,
|
||||
downvotes: wasDownvoted ? comment.downvotes - 1 : comment.downvotes + 1,
|
||||
userVote: wasDownvoted ? null : 'down'
|
||||
};
|
||||
}
|
||||
}
|
||||
if (comment.replies.length > 0) {
|
||||
return {
|
||||
...comment,
|
||||
replies: updateCommentVote(comment.replies, targetId, voteType)
|
||||
};
|
||||
}
|
||||
return comment;
|
||||
});
|
||||
};
|
||||
|
||||
const renderComment = (comment: Comment, depth: number = 0) => (
|
||||
<div key={comment.id} className={`${depth > 0 ? 'ml-12 mt-4' : 'mb-6'} ${comment.isLive ? 'animate-pulse-once' : ''}`}>
|
||||
<Card className="border-l-4 transition-all duration-300" style={{
|
||||
borderLeftColor: comment.sentiment === 'positive' ? '#10b981' :
|
||||
comment.sentiment === 'negative' ? '#ef4444' : '#6b7280'
|
||||
}}>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-start space-x-3">
|
||||
<Avatar className="relative">
|
||||
<AvatarImage src={comment.avatar} />
|
||||
<AvatarFallback>{comment.author[0]}</AvatarFallback>
|
||||
{comment.isLive && (
|
||||
<div className="absolute -top-1 -right-1 h-3 w-3 bg-green-500 rounded-full animate-pulse" />
|
||||
)}
|
||||
</Avatar>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="font-semibold">{comment.author}</span>
|
||||
{comment.isExpert && (
|
||||
<Shield className="h-4 w-4 text-blue-500" />
|
||||
)}
|
||||
{comment.badges.map(badge => (
|
||||
<Badge key={badge} variant="secondary" className="text-xs">
|
||||
{badge}
|
||||
</Badge>
|
||||
))}
|
||||
<span className="text-sm text-gray-500">
|
||||
{comment.isLive ? 'Just now' : comment.timestamp}
|
||||
</span>
|
||||
{isConnected && (
|
||||
<div className="h-2 w-2 bg-green-500 rounded-full" title="Real-time updates active" />
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-3 prose prose-sm max-w-none"
|
||||
dangerouslySetInnerHTML={{ __html: parseMarkdown(comment.content) }} />
|
||||
<div className="flex items-center space-x-4 mt-4">
|
||||
<Button
|
||||
variant={comment.userVote === 'up' ? 'default' : 'ghost'}
|
||||
size="sm"
|
||||
onClick={() => handleVote(comment.id, 'up')}
|
||||
className="transition-all duration-200"
|
||||
>
|
||||
<ThumbsUp className="h-4 w-4 mr-1" />
|
||||
<span className="transition-all duration-300">{comment.upvotes}</span>
|
||||
</Button>
|
||||
<Button
|
||||
variant={comment.userVote === 'down' ? 'default' : 'ghost'}
|
||||
size="sm"
|
||||
onClick={() => handleVote(comment.id, 'down')}
|
||||
className="transition-all duration-200"
|
||||
>
|
||||
<ThumbsDown className="h-4 w-4 mr-1" />
|
||||
<span className="transition-all duration-300">{comment.downvotes}</span>
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setReplyTo(comment.id)}
|
||||
>
|
||||
<MessageSquare className="h-4 w-4 mr-1" />
|
||||
Reply
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="sm">
|
||||
<MoreVertical className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem>
|
||||
<Flag className="h-4 w-4 mr-2" />
|
||||
Report
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<Edit className="h-4 w-4 mr-2" />
|
||||
Edit
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="text-red-600">
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
Delete
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
{replyTo === comment.id && (
|
||||
<div className="mt-4">
|
||||
<Textarea
|
||||
placeholder="Write your reply... @mention users to notify them"
|
||||
value={newComment}
|
||||
onChange={(e) => setNewComment(e.target.value)}
|
||||
className="min-h-[80px]"
|
||||
/>
|
||||
<div className="flex justify-end space-x-2 mt-2">
|
||||
<Button variant="outline" onClick={() => setReplyTo(null)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
if (newComment.trim() && isConnected) {
|
||||
sendMessage({
|
||||
type: 'reply',
|
||||
data: {
|
||||
parentId: comment.id,
|
||||
content: newComment,
|
||||
proposalId,
|
||||
author: 'Current User',
|
||||
},
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
}
|
||||
setReplyTo(null);
|
||||
setNewComment('');
|
||||
}}
|
||||
disabled={!newComment.trim()}
|
||||
>
|
||||
Post Reply
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
{comment.replies.map(reply => renderComment(reply, depth + 1))}
|
||||
</div>
|
||||
);
|
||||
|
||||
const parseMarkdown = (text: string): string => {
|
||||
return text
|
||||
.replace(/^### (.*$)/gim, '<h3>$1</h3>')
|
||||
.replace(/^## (.*$)/gim, '<h2>$1</h2>')
|
||||
.replace(/^# (.*$)/gim, '<h1>$1</h1>')
|
||||
.replace(/\*\*(.*)\*\*/gim, '<strong>$1</strong>')
|
||||
.replace(/\*(.*)\*/gim, '<em>$1</em>')
|
||||
.replace(/\[([^\]]+)\]\(([^)]+)\)/gim, '<a href="$2" class="text-blue-600 hover:underline">$1</a>')
|
||||
.replace(/^> (.*$)/gim, '<blockquote class="border-l-4 border-gray-300 pl-4 italic">$1</blockquote>')
|
||||
.replace(/\n/gim, '<br>');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h3 className="text-xl font-semibold">Discussion Forum</h3>
|
||||
<p className="text-sm text-gray-600">Share your thoughts and feedback on this proposal</p>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Textarea
|
||||
placeholder="Write your comment... (Markdown supported)"
|
||||
value={newComment}
|
||||
onChange={(e) => setNewComment(e.target.value)}
|
||||
className="min-h-[120px]"
|
||||
/>
|
||||
<div className="flex justify-between items-center mt-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setShowMarkdownHelp(!showMarkdownHelp)}
|
||||
>
|
||||
Markdown Help
|
||||
</Button>
|
||||
<Button>Post Comment</Button>
|
||||
</div>
|
||||
{showMarkdownHelp && (
|
||||
<Card className="mt-4 p-4 bg-gray-50">
|
||||
<p className="text-sm font-semibold mb-2">Markdown Formatting:</p>
|
||||
<ul className="text-sm space-y-1">
|
||||
<li>**bold** → <strong>bold</strong></li>
|
||||
<li>*italic* → <em>italic</em></li>
|
||||
<li>[link](url) → <a href="#" className="text-blue-600">link</a></li>
|
||||
<li>> quote → <blockquote className="border-l-4 border-gray-300 pl-2">quote</blockquote></li>
|
||||
<li># Heading → <span className="font-bold text-lg">Heading</span></li>
|
||||
</ul>
|
||||
</Card>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div>
|
||||
{comments.map(comment => renderComment(comment))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user