Create CommentsModal component for viewing and managing comments
cgen-9440193288b84b4e92d73d89a9ef87c7
This commit is contained in:
Builder.io
parent
1f8646a945
commit
fc1bf43a2f
1 changed files with 308 additions and 0 deletions
308
client/components/feed/CommentsModal.tsx
Normal file
308
client/components/feed/CommentsModal.tsx
Normal file
|
|
@ -0,0 +1,308 @@
|
|||
import { useState, useEffect } from "react";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { aethexToast } from "@/lib/aethex-toast";
|
||||
import { MessageCircle, Send, Trash2, Loader2 } from "lucide-react";
|
||||
|
||||
const API_BASE = import.meta.env.VITE_API_BASE || "";
|
||||
|
||||
interface Comment {
|
||||
id: string;
|
||||
content: string;
|
||||
created_at: string;
|
||||
user_id: string;
|
||||
user_profiles?: {
|
||||
id: string;
|
||||
username?: string;
|
||||
full_name?: string;
|
||||
avatar_url?: string;
|
||||
};
|
||||
}
|
||||
|
||||
interface CommentsModalProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
postId: string;
|
||||
currentUserId?: string;
|
||||
onCommentAdded?: () => void;
|
||||
}
|
||||
|
||||
export default function CommentsModal({
|
||||
open,
|
||||
onOpenChange,
|
||||
postId,
|
||||
currentUserId,
|
||||
onCommentAdded,
|
||||
}: CommentsModalProps) {
|
||||
const [comments, setComments] = useState<Comment[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [newComment, setNewComment] = useState("");
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
// Load comments when modal opens
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
loadComments();
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
const loadComments = async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const response = await fetch(
|
||||
`${API_BASE}/api/community/post-comments?post_id=${postId}&limit=50`
|
||||
);
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setComments(data.comments || []);
|
||||
} else {
|
||||
aethexToast.error({
|
||||
title: "Failed to load comments",
|
||||
description: "Please try again",
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to load comments:", error);
|
||||
aethexToast.error({
|
||||
title: "Failed to load comments",
|
||||
description: "An unexpected error occurred",
|
||||
});
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddComment = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!currentUserId) {
|
||||
aethexToast.error({
|
||||
title: "Not authenticated",
|
||||
description: "Please log in to comment",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (newComment.trim().length === 0) {
|
||||
aethexToast.error({
|
||||
title: "Empty comment",
|
||||
description: "Please write something",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/api/community/post-comments`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
post_id: postId,
|
||||
user_id: currentUserId,
|
||||
content: newComment,
|
||||
}),
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setComments((prev) => [data.comment, ...prev]);
|
||||
setNewComment("");
|
||||
aethexToast.success({
|
||||
title: "Comment added",
|
||||
description: "Your comment has been posted",
|
||||
});
|
||||
onCommentAdded?.();
|
||||
} else {
|
||||
const error = await response.json();
|
||||
aethexToast.error({
|
||||
title: "Failed to add comment",
|
||||
description: error.error || "Please try again",
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to add comment:", error);
|
||||
aethexToast.error({
|
||||
title: "Failed to add comment",
|
||||
description: "An unexpected error occurred",
|
||||
});
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteComment = async (commentId: string) => {
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
const response = await fetch(
|
||||
`${API_BASE}/api/community/post-comments`,
|
||||
{
|
||||
method: "DELETE",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
comment_id: commentId,
|
||||
user_id: currentUserId,
|
||||
}),
|
||||
}
|
||||
);
|
||||
|
||||
if (response.ok) {
|
||||
setComments((prev) =>
|
||||
prev.filter((comment) => comment.id !== commentId)
|
||||
);
|
||||
aethexToast.success({
|
||||
title: "Comment deleted",
|
||||
description: "Your comment has been removed",
|
||||
});
|
||||
onCommentAdded?.();
|
||||
} else {
|
||||
const error = await response.json();
|
||||
aethexToast.error({
|
||||
title: "Failed to delete comment",
|
||||
description: error.error || "Please try again",
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to delete comment:", error);
|
||||
aethexToast.error({
|
||||
title: "Failed to delete comment",
|
||||
description: "An unexpected error occurred",
|
||||
});
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
const date = new Date(dateString);
|
||||
const now = new Date();
|
||||
const diffMs = now.getTime() - date.getTime();
|
||||
const diffSecs = Math.floor(diffMs / 1000);
|
||||
const diffMins = Math.floor(diffSecs / 60);
|
||||
const diffHours = Math.floor(diffMins / 60);
|
||||
const diffDays = Math.floor(diffHours / 24);
|
||||
|
||||
if (diffSecs < 60) return "just now";
|
||||
if (diffMins < 60) return `${diffMins}m ago`;
|
||||
if (diffHours < 24) return `${diffHours}h ago`;
|
||||
if (diffDays < 7) return `${diffDays}d ago`;
|
||||
|
||||
return date.toLocaleDateString("en-US", {
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-[500px] flex flex-col h-[600px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<MessageCircle className="h-5 w-5" />
|
||||
Comments ({comments.length})
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<Separator />
|
||||
|
||||
<ScrollArea className="flex-1 pr-4">
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : comments.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center h-full text-center">
|
||||
<MessageCircle className="h-8 w-8 text-muted-foreground mb-2" />
|
||||
<p className="text-sm text-muted-foreground">
|
||||
No comments yet. Be the first to comment!
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{comments.map((comment) => (
|
||||
<div
|
||||
key={comment.id}
|
||||
className="p-3 rounded-lg bg-muted/30 hover:bg-muted/50 transition-colors"
|
||||
>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="flex items-start gap-2 flex-1">
|
||||
{comment.user_profiles?.avatar_url && (
|
||||
<img
|
||||
src={comment.user_profiles.avatar_url}
|
||||
alt={comment.user_profiles.full_name || "User"}
|
||||
className="w-8 h-8 rounded-full object-cover ring-1 ring-border/40"
|
||||
/>
|
||||
)}
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-semibold text-foreground">
|
||||
{comment.user_profiles?.full_name ||
|
||||
comment.user_profiles?.username ||
|
||||
"Anonymous"}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground mb-2">
|
||||
{formatDate(comment.created_at)}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground leading-relaxed">
|
||||
{comment.content}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{currentUserId === comment.user_id && (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="h-8 w-8 p-0 hover:bg-destructive/20 hover:text-destructive"
|
||||
onClick={() => handleDeleteComment(comment.id)}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</ScrollArea>
|
||||
|
||||
<Separator />
|
||||
|
||||
<form onSubmit={handleAddComment} className="flex flex-col gap-2">
|
||||
<Textarea
|
||||
placeholder="Write a comment..."
|
||||
value={newComment}
|
||||
onChange={(e) => setNewComment(e.target.value)}
|
||||
className="resize-none h-20 text-sm"
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
size="sm"
|
||||
disabled={isSubmitting || !newComment.trim()}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Send className="h-4 w-4" />
|
||||
)}
|
||||
Comment
|
||||
</Button>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue