mirror of
https://github.com/pezkuwichain/pwap.git
synced 2026-04-22 05:37:56 +00:00
386 lines
15 KiB
TypeScript
386 lines
15 KiB
TypeScript
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>
|
|
);
|
|
} |