feat(frontend): Implement threaded comment UI
Some checks are pending
Deploy Elmeg / deploy (push) Waiting to run
Some checks are pending
Deploy Elmeg / deploy (push) Waiting to run
This commit is contained in:
fullsizemalt
parent
a75921d633
commit
6bb0af937a
1 changed files with 144 additions and 33 deletions
|
|
@ -3,15 +3,18 @@
|
|||
import { useState, useEffect } from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Card, CardContent } from "@/components/ui/card"
|
||||
import { formatDistanceToNow } from "date-fns"
|
||||
import { getApiUrl } from "@/lib/api-config"
|
||||
import { MessageCircle, CornerDownRight, Heart } from "lucide-react"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
interface Comment {
|
||||
id: number
|
||||
user_id: number
|
||||
content: string
|
||||
created_at: string
|
||||
parent_id: number | null
|
||||
}
|
||||
|
||||
interface CommentSectionProps {
|
||||
|
|
@ -30,7 +33,7 @@ export function CommentSection({ entityType, entityId }: CommentSectionProps) {
|
|||
|
||||
const fetchComments = async () => {
|
||||
try {
|
||||
const res = await fetch(`${getApiUrl()}/social/comments?${entityType}_id=${entityId}`)
|
||||
const res = await fetch(`${getApiUrl()}/social/comments?${entityType}_id=${entityId}&limit=100`)
|
||||
if (res.ok) {
|
||||
const data = await res.json()
|
||||
setComments(data)
|
||||
|
|
@ -40,9 +43,9 @@ export function CommentSection({ entityType, entityId }: CommentSectionProps) {
|
|||
}
|
||||
}
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
const handleSubmit = async (e: React.FormEvent, parentId: number | null = null, content: string = newComment) => {
|
||||
e.preventDefault()
|
||||
if (!newComment.trim()) return
|
||||
if (!content.trim()) return
|
||||
|
||||
const token = localStorage.getItem("token")
|
||||
if (!token) {
|
||||
|
|
@ -52,7 +55,10 @@ export function CommentSection({ entityType, entityId }: CommentSectionProps) {
|
|||
|
||||
setLoading(true)
|
||||
try {
|
||||
const body: any = { content: newComment }
|
||||
const body: any = {
|
||||
content: content,
|
||||
parent_id: parentId
|
||||
}
|
||||
body[`${entityType}_id`] = entityId
|
||||
|
||||
const res = await fetch(`${getApiUrl()}/social/comments`, {
|
||||
|
|
@ -77,41 +83,146 @@ export function CommentSection({ entityType, entityId }: CommentSectionProps) {
|
|||
}
|
||||
}
|
||||
|
||||
// Tree builder
|
||||
const rootComments = comments.filter(c => c.parent_id === null)
|
||||
const getReplies = (parentId: number) => comments.filter(c => c.parent_id === parentId).sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime())
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<h3 className="text-xl font-semibold">Comments</h3>
|
||||
<div className="space-y-8">
|
||||
<h3 className="text-xl font-semibold flex items-center gap-2">
|
||||
<MessageCircle className="h-5 w-5" />
|
||||
Discussion
|
||||
</h3>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<Textarea
|
||||
placeholder="Join the discussion..."
|
||||
value={newComment}
|
||||
onChange={(e) => setNewComment(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<Button type="submit" disabled={loading || !newComment.trim()}>
|
||||
{loading ? "Posting..." : "Post Comment"}
|
||||
</Button>
|
||||
</form>
|
||||
{/* Root Post Form */}
|
||||
<div className="flex gap-4">
|
||||
<div className="flex-1">
|
||||
<form onSubmit={(e) => handleSubmit(e)} className="space-y-4">
|
||||
<Textarea
|
||||
placeholder="Share your thoughts..."
|
||||
value={newComment}
|
||||
onChange={(e) => setNewComment(e.target.value)}
|
||||
required
|
||||
className="min-h-[100px]"
|
||||
/>
|
||||
<div className="flex justify-end">
|
||||
<Button type="submit" disabled={loading || !newComment.trim()}>
|
||||
{loading ? "Posting..." : "Post Comment"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{comments.length === 0 ? (
|
||||
<p className="text-muted-foreground">No comments yet.</p>
|
||||
<div className="space-y-6">
|
||||
{rootComments.length === 0 ? (
|
||||
<p className="text-muted-foreground text-center py-8">No comments yet. Be the first!</p>
|
||||
) : (
|
||||
comments.map(comment => (
|
||||
<Card key={comment.id}>
|
||||
<CardContent className="pt-4">
|
||||
<div className="flex justify-between items-start mb-2">
|
||||
<span className="font-semibold text-sm">User #{comment.user_id}</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{formatDistanceToNow(new Date(comment.created_at), { addSuffix: true })}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm whitespace-pre-wrap">{comment.content}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
rootComments.map(comment => (
|
||||
<CommentItem
|
||||
key={comment.id}
|
||||
comment={comment}
|
||||
getReplies={getReplies}
|
||||
onReply={handleSubmit}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function CommentItem({ comment, getReplies, onReply }: {
|
||||
comment: Comment,
|
||||
getReplies: (id: number) => Comment[],
|
||||
onReply: (e: React.FormEvent, parentId: number, content: string) => Promise<void>
|
||||
}) {
|
||||
const [isReplying, setIsReplying] = useState(false)
|
||||
const [replyContent, setReplyContent] = useState("")
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
const replies = getReplies(comment.id)
|
||||
|
||||
const handleReplySubmit = async (e: React.FormEvent) => {
|
||||
setSubmitting(true)
|
||||
await onReply(e, comment.id, replyContent)
|
||||
setSubmitting(false)
|
||||
setIsReplying(false)
|
||||
setReplyContent("")
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="group">
|
||||
<div className="flex gap-3">
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center text-xs font-bold text-primary">
|
||||
{comment.user_id}
|
||||
</div>
|
||||
{(replies.length > 0) && <div className="w-px h-full bg-border my-2" />}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 space-y-2 pb-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-semibold text-sm">User #{comment.user_id}</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
• {formatDistanceToNow(new Date(comment.created_at), { addSuffix: true })}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="text-sm leading-relaxed whitespace-pre-wrap">
|
||||
{comment.content}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 pt-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className={cn("h-6 px-2 text-xs text-muted-foreground gap-1 hover:text-primary", isReplying && "text-primary bg-primary/5")}
|
||||
onClick={() => setIsReplying(!isReplying)}
|
||||
>
|
||||
<MessageCircle className="h-3 w-3" />
|
||||
Reply
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm" className="h-6 px-2 text-xs text-muted-foreground gap-1 hover:text-red-500">
|
||||
<Heart className="h-3 w-3" />
|
||||
Like
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{isReplying && (
|
||||
<div className="mt-4 pl-4 border-l-2 border-primary/20">
|
||||
<form onSubmit={handleReplySubmit} className="space-y-3">
|
||||
<Textarea
|
||||
placeholder={`Reply to User #${comment.user_id}...`}
|
||||
value={replyContent}
|
||||
onChange={(e) => setReplyContent(e.target.value)}
|
||||
autoFocus
|
||||
className="min-h-[80px]"
|
||||
/>
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button type="button" variant="ghost" onClick={() => setIsReplying(false)}>Cancel</Button>
|
||||
<Button type="submit" size="sm" disabled={submitting || !replyContent.trim()}>
|
||||
Reply
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Recursive Replies */}
|
||||
{replies.length > 0 && (
|
||||
<div className="mt-4 space-y-4">
|
||||
{replies.map(reply => (
|
||||
<CommentItem
|
||||
key={reply.id}
|
||||
comment={reply}
|
||||
getReplies={getReplies}
|
||||
onReply={onReply}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue