Changeset 73b69b2 for chapterx-frontend/src/components/story/CommentSection.tsx

Timestamp:

03/24/26 22:13:36 (3 months ago)

Author:

kikisrbinoska <srbinoskakristina07@…>

Branches:

main

Children:

7fbb91c

Parents:

acf690c

Message:

Fixed reading lists,comments and likes

File:

• chapterx-frontend/src/components/story/CommentSection.tsx (modified) (6 diffs)

chapterx-frontend/src/components/story/CommentSection.tsx

@@ -1 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { MessageCircle, Trash2, Send } from 'lucide-react'
+import axios from 'axios'
 import { useAuthStore } from '../../store/authStore'
-import { useStoryStore } from '../../store/storyStore'
 import { useNotificationStore } from '../../store/notificationStore'
 import { useUIStore } from '../../store/uiStore'
-import { Comment } from '../../types'
 import { Avatar } from '../ui/Avatar'
 import { Button } from '../ui/Button'
 
-interface CommentSectionProps {
-  storyId: number
-  authorUserId: number
+const API = 'https://localhost:7125/api'
+
+function getAuthHeaders() {
+  try {
+    const token = JSON.parse(localStorage.getItem('chapterx-auth') || '{}')?.state?.token
+    return token ? { Authorization: `Bearer ${token}` } : {}
+  } catch { return {} }
 }
 
@@ -24 +27 @@
 }
 
-export const CommentSection: React.FC<CommentSectionProps> = ({ storyId, authorUserId }) => {
+interface BackendComment {
+  id: number
+  content: string
+  userId: number
+  storyId: number
+  username: string
+  createdAt: string
+}
+
+interface CommentSectionProps {
+  storyId: number
+  authorUserId: number
+  onCountChange?: (count: number) => void
+}
+
+export const CommentSection: React.FC<CommentSectionProps> = ({ storyId, authorUserId, onCountChange }) => {
   const { currentUser } = useAuthStore()
-  const { comments, addComment, deleteComment } = useStoryStore()
   const { addNotification } = useNotificationStore()
   const { addToast } = useUIStore()
+  const [comments, setComments] = useState<BackendComment[]>([])
   const [text, setText] = useState('')
   const [submitting, setSubmitting] = useState(false)
 
-  const storyComments = comments
-    .filter(c => c.story_id === storyId)
-    .sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
+  useEffect(() => {
+    axios.get(`${API}/comments/story/${storyId}`)
+      .then(res => {
+        const data = res.data ?? []
+        setComments(data)
+        onCountChange?.(data.length)
+      })
+      .catch(() => {})
+  }, [storyId])
 
   const handleSubmit = async () => {
     if (!text.trim() || !currentUser) return
     setSubmitting(true)
-    await new Promise(r => setTimeout(r, 300))
-    const comment: Comment = {
-      comment_id: Date.now(),
-      story_id: storyId,
-      user_id: currentUser.user_id,
-      username: currentUser.username,
-      content: text.trim(),
-      created_at: new Date().toISOString(),
+    try {
+      const res = await axios.post(`${API}/comments`, {
+        content: text.trim(),
+        userId: currentUser.user_id,
+        storyId,
+      }, { headers: getAuthHeaders() })
+      const newComment: BackendComment = {
+        id: res.data?.id ?? Date.now(),
+        content: text.trim(),
+        userId: currentUser.user_id,
+        storyId,
+        username: currentUser.username,
+        createdAt: new Date().toISOString(),
+      }
+      setComments(prev => { const next = [newComment, ...prev]; onCountChange?.(next.length); return next })
+      if (currentUser.user_id !== authorUserId) {
+        await addNotification({
+          recipientUserId: authorUserId,
+          type: 'comment',
+          content: `${currentUser.username} commented: "${text.trim().slice(0, 60)}${text.length > 60 ? '...' : ''}"`,
+          link: `/story/${storyId}`,
+        })
+      }
+      setText('')
+      addToast('Comment posted!')
+    } catch {
+      addToast('Failed to post comment.', 'error')
     }
-    addComment(comment)
-    if (currentUser.user_id !== authorUserId) {
-      addNotification({
-        user_id: authorUserId,
-        type: 'comment',
-        title: 'New Comment',
-        message: `${currentUser.username} commented: "${text.trim().slice(0, 60)}..."`,
-        link: `/story/${storyId}`,
-      })
+    setSubmitting(false)
+  }
+
+  const handleDelete = async (commentId: number) => {
+    try {
+      await axios.delete(`${API}/comments/${commentId}`, { headers: getAuthHeaders() })
+      setComments(prev => { const next = prev.filter(c => c.id !== commentId); onCountChange?.(next.length); return next })
+      addToast('Comment deleted', 'info')
+    } catch {
+      addToast('Failed to delete comment.', 'error')
     }
-    setText('')
-    setSubmitting(false)
-    addToast('Comment posted!')
   }
 
@@ -67 +108 @@
       <div className="flex items-center gap-2 mb-4">
         <MessageCircle size={18} className="text-indigo-400" />
-        <h3 className="text-white font-semibold">Comments ({storyComments.length})</h3>
+        <h3 className="text-white font-semibold">Comments ({comments.length})</h3>
       </div>
 
-      {/* Input */}
       {currentUser ? (
         <div className="flex gap-3">
@@ -83 +123 @@
             />
             <div className="flex justify-end mt-2">
-              <Button
-                size="sm"
-                onClick={handleSubmit}
-                loading={submitting}
-                disabled={!text.trim()}
-              >
+              <Button size="sm" onClick={handleSubmit} loading={submitting} disabled={!text.trim()}>
                 <Send size={14} />
                 Post Comment
@@ -103 +138 @@
       )}
 
-      {/* Comment list */}
       <div className="space-y-3">
-        {storyComments.length === 0 ? (
+        {comments.length === 0 ? (
           <div className="text-center py-8 text-slate-500 text-sm">
             No comments yet. Be the first to share your thoughts!
           </div>
         ) : (
-          storyComments.map(comment => (
-            <CommentCard
-              key={comment.comment_id}
-              comment={comment}
-              canDelete={currentUser?.user_id === comment.user_id || currentUser?.role === 'admin'}
-              onDelete={() => { deleteComment(comment.comment_id); addToast('Comment deleted', 'info') }}
-            />
+          comments.map(comment => (
+            <div key={comment.id} className="flex gap-3 p-4 bg-slate-800 rounded-xl border border-slate-700">
+              <Avatar name={comment.username} size="sm" />
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center justify-between">
+                  <span className="text-sm font-medium text-white">{comment.username}</span>
+                  <div className="flex items-center gap-2">
+                    <span className="text-xs text-slate-500">{timeAgo(comment.createdAt)}</span>
+                    {(currentUser?.user_id === comment.userId || currentUser?.role === 'admin') && (
+                      <button onClick={() => handleDelete(comment.id)} className="text-slate-500 hover:text-rose-400 transition-colors">
+                        <Trash2 size={13} />
+                      </button>
+                    )}
+                  </div>
+                </div>
+                <p className="text-slate-300 text-sm mt-1 leading-relaxed">{comment.content}</p>
+              </div>
+            </div>
           ))
         )}
@@ -123 +168 @@
   )
 }
-
-const CommentCard: React.FC<{
-  comment: Comment
-  canDelete: boolean
-  onDelete: () => void
-}> = ({ comment, canDelete, onDelete }) => (
-  <div className="flex gap-3 p-4 bg-slate-800 rounded-xl border border-slate-700">
-    <Avatar name={comment.username} size="sm" />
-    <div className="flex-1 min-w-0">
-      <div className="flex items-center justify-between">
-        <span className="text-sm font-medium text-white">{comment.username}</span>
-        <div className="flex items-center gap-2">
-          <span className="text-xs text-slate-500">{timeAgo(comment.created_at)}</span>
-          {canDelete && (
-            <button onClick={onDelete} className="text-slate-500 hover:text-rose-400 transition-colors">
-              <Trash2 size={13} />
-            </button>
-          )}
-        </div>
-      </div>
-      <p className="text-slate-300 text-sm mt-1 leading-relaxed">{comment.content}</p>
-    </div>
-  </div>
-)