Changeset 73b69b2 for chapterx-frontend/src/components

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

Location:

chapterx-frontend/src/components

Files:

• layout/Navbar.tsx (modified) (2 diffs)
• notifications/NotificationDropdown.tsx (modified) (2 diffs)
• story/CommentSection.tsx (modified) (6 diffs)
• story/LikeButton.tsx (modified) (5 diffs)

chapterx-frontend/src/components/layout/Navbar.tsx

@@ -14 +14 @@
   const location = useLocation()
   const { currentUser, logout } = useAuthStore()
-  const { notifications } = useNotificationStore()
+  const { notifications, fetchUserNotifications } = useNotificationStore()
   const unread = notifications.filter(n => !n.is_read).length
+
+  useEffect(() => {
+    if (currentUser) fetchUserNotifications(currentUser.user_id)
+  }, [currentUser?.user_id])
 
   const [mobileOpen, setMobileOpen] = useState(false)
@@ -100 +104 @@
                 <div className="relative" ref={notifRef}>
                   <button
-                    onClick={() => { setNotifOpen(!notifOpen); setUserMenuOpen(false) }}
+                    onClick={() => { const opening = !notifOpen; setNotifOpen(opening); setUserMenuOpen(false); if (opening && currentUser) fetchUserNotifications(currentUser.user_id) }}
                     className="relative p-2 rounded-lg text-slate-400 hover:text-white hover:bg-slate-800 transition-colors"
                   >

chapterx-frontend/src/components/notifications/NotificationDropdown.tsx

@@ -14 +14 @@
     case 'system': return <Settings {...props} className="text-slate-400" />
     default: return <Bell {...props} className="text-slate-400" />
+  }
+}
+
+const typeTitle = (type: NotificationType) => {
+  switch (type) {
+    case 'like': return 'New Like'
+    case 'comment': return 'New Comment'
+    case 'collaboration': return 'Collaboration'
+    case 'follow': return 'New Follower'
+    case 'system': return 'System'
+    default: return 'Notification'
   }
 }
@@ -69 +80 @@
               </div>
               <div className="flex-1 min-w-0">
-                <p className="text-xs font-medium text-white">{n.title}</p>
+                <p className="text-xs font-medium text-white">{typeTitle(n.type)}</p>
                 <p className="text-xs text-slate-400 line-clamp-2">{n.message}</p>
                 <p className="text-xs text-slate-600 mt-0.5">{timeAgo(n.created_at)}</p>

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>
-)

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

@@ -1 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { Heart } from 'lucide-react'
 import { useNavigate } from 'react-router-dom'
+import axios from 'axios'
 import { useAuthStore } from '../../store/authStore'
-import { useStoryStore } from '../../store/storyStore'
 import { useNotificationStore } from '../../store/notificationStore'
 import { useUIStore } from '../../store/uiStore'
+
+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 {} }
+}
 
 interface LikeButtonProps {
@@ -11 +20 @@
   authorUserId: number
   totalLikes: number
+  onCountChange?: (count: number) => void
 }
 
-export const LikeButton: React.FC<LikeButtonProps> = ({ storyId, authorUserId, totalLikes }) => {
+export const LikeButton: React.FC<LikeButtonProps> = ({ storyId, authorUserId, totalLikes, onCountChange }) => {
   const navigate = useNavigate()
   const { currentUser } = useAuthStore()
-  const { toggleLike, isLiked } = useStoryStore()
   const { addNotification } = useNotificationStore()
   const { addToast } = useUIStore()
+  const [liked, setLiked] = useState(false)
+  const [count, setCount] = useState(totalLikes)
+  const [loading, setLoading] = useState(false)
 
-  const liked = currentUser ? isLiked(currentUser.user_id, storyId) : false
+  useEffect(() => {
+    axios.get(`${API}/likes/story/${storyId}`)
+      .then(res => {
+        const c = res.data?.count ?? totalLikes
+        setCount(c)
+        onCountChange?.(c)
+        if (currentUser) {
+          setLiked((res.data?.userIds ?? []).includes(currentUser.user_id))
+        }
+      })
+      .catch(() => {})
+  }, [storyId, currentUser?.user_id])
 
-  const handleClick = () => {
+  const handleClick = async () => {
     if (!currentUser) {
       addToast('Please sign in to like stories.', 'info')
@@ -28 +51 @@
       return
     }
-    toggleLike(currentUser.user_id, storyId)
-    if (!liked && currentUser.user_id !== authorUserId) {
-      addNotification({
-        user_id: authorUserId,
-        type: 'like',
-        title: 'New Like',
-        message: `${currentUser.username} liked your story.`,
-        link: `/story/${storyId}`,
-      })
+    if (loading) return
+    setLoading(true)
+    try {
+      if (liked) {
+        await axios.delete(`${API}/likes/user/${currentUser.user_id}/story/${storyId}`, { headers: getAuthHeaders() })
+        setLiked(false)
+        setCount(c => { const n = c - 1; onCountChange?.(n); return n })
+        addToast('Removed from likes', 'info')
+      } else {
+        await axios.post(`${API}/likes`, { userId: currentUser.user_id, storyId }, { headers: getAuthHeaders() })
+        setLiked(true)
+        setCount(c => { const n = c + 1; onCountChange?.(n); return n })
+        if (currentUser.user_id !== authorUserId) {
+          await addNotification({
+            recipientUserId: authorUserId,
+            type: 'like',
+            content: `${currentUser.username} liked your story.`,
+            link: `/story/${storyId}`,
+          })
+        }
+        addToast('Added to likes!', 'success')
+      }
+    } catch {
+      addToast('Something went wrong.', 'error')
     }
-    addToast(liked ? 'Removed from likes' : 'Added to likes!', liked ? 'info' : 'success')
+    setLoading(false)
   }
 
@@ -44 +82 @@
     <button
       onClick={handleClick}
+      disabled={loading}
       className={`flex items-center gap-2 px-4 py-2 rounded-xl border transition-all duration-200 ${
         liked
@@ -51 +90 @@
     >
       <Heart size={16} className={liked ? 'fill-rose-400' : ''} />
-      <span className="text-sm font-medium">{totalLikes.toLocaleString()}</span>
+      <span className="text-sm font-medium">{count.toLocaleString()}</span>
     </button>
   )