Changeset 73b69b2 for chapterx-frontend/src/pages

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/pages

Files:

• admin/AdminGenresPage.tsx (modified) (4 diffs)
• reading-list/CommunityListsPage.tsx (modified) (2 diffs)
• reading-list/ReadingListPage.tsx (modified) (5 diffs)
• story/StoryDetailPage.tsx (modified) (5 diffs)

chapterx-frontend/src/pages/admin/AdminGenresPage.tsx

@@ -1 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { ArrowLeft, Plus, Trash2, Tag } from 'lucide-react'
@@ -10 +10 @@
 export const AdminGenresPage: React.FC = () => {
   const navigate = useNavigate()
-  const { genres, addGenre, deleteGenre } = useStoryStore()
+  const { genres, fetchGenres, addGenre, deleteGenre } = useStoryStore()
   const { addToast } = useUIStore()
   const [addOpen, setAddOpen] = useState(false)
@@ -16 +16 @@
   const [deleteTarget, setDeleteTarget] = useState<Genre | null>(null)
 
-  const handleAdd = () => {
+  useEffect(() => { fetchGenres() }, [])
+
+  const handleAdd = async () => {
     if (!newName.trim()) return
     if (genres.some(g => g.name.toLowerCase() === newName.trim().toLowerCase())) {
@@ -22 +24 @@
       return
     }
-    addGenre({ genre_id: Date.now(), name: newName.trim(), story_count: 0 })
-    addToast(`Genre "${newName.trim()}" added!`)
-    setNewName('')
-    setAddOpen(false)
+    try {
+      await addGenre(newName.trim())
+      addToast(`Genre "${newName.trim()}" added!`)
+      setNewName('')
+      setAddOpen(false)
+    } catch {
+      addToast('Failed to add genre', 'error')
+    }
   }
 
-  const handleDelete = (genre: Genre) => {
-    if (genre.story_count > 0) {
-      addToast('Cannot delete genre with associated stories', 'error')
-      return
+  const handleDelete = async (genre: Genre) => {
+    try {
+      await deleteGenre(genre.genre_id)
+      addToast(`Genre "${genre.name}" deleted`, 'info')
+    } catch {
+      addToast('Failed to delete genre', 'error')
     }
-    deleteGenre(genre.genre_id)
-    addToast(`Genre "${genre.name}" deleted`, 'info')
     setDeleteTarget(null)
   }

chapterx-frontend/src/pages/reading-list/CommunityListsPage.tsx

@@ -1 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { Globe, BookOpen, User } from 'lucide-react'
@@ -10 +10 @@
 export const CommunityListsPage: React.FC = () => {
   const navigate = useNavigate()
-  const { readingLists } = useStoryStore()
+  const { readingLists, fetchReadingLists } = useStoryStore()
   const [selectedList, setSelectedList] = useState<ReadingList | null>(null)
+
+  useEffect(() => { fetchReadingLists() }, [])
 
   const publicLists = readingLists.filter(l => l.is_public)

chapterx-frontend/src/pages/reading-list/ReadingListPage.tsx

@@ -12 +12 @@
   const navigate = useNavigate()
   const { currentUser } = useAuthStore()
-  const { readingLists, fetchReadingLists, createReadingList, deleteReadingList, removeStoryFromList } = useStoryStore()
+  const { readingLists, fetchUserReadingLists, createReadingList, deleteReadingList, removeStoryFromList } = useStoryStore()
+  const [fetching, setFetching] = useState(false)
+  const [confirmRemove, setConfirmRemove] = useState<{ listId: number; storyId: number; title: string } | null>(null)
 
   useEffect(() => {
-    fetchReadingLists()
-  }, [])
+    if (!currentUser) return
+    setFetching(true)
+    fetchUserReadingLists(currentUser.user_id).finally(() => setFetching(false))
+  }, [currentUser?.user_id])
   const { addToast } = useUIStore()
   const [createOpen, setCreateOpen] = useState(false)
@@ -33 +37 @@
   }
 
-  const myLists = readingLists.filter(l => l.user_id === currentUser.user_id)
+  const myLists = readingLists.filter(l => l.user_id === currentUser!.user_id)
 
   const handleCreate = async () => {
@@ -73 +77 @@
       </div>
 
-      {myLists.length === 0 ? (
+      {fetching ? (
+        <div className="flex flex-col items-center py-20 text-slate-500">
+          <BookOpen size={48} className="mb-4 opacity-40 animate-pulse" />
+          <p className="text-sm">Loading your lists...</p>
+        </div>
+      ) : myLists.length === 0 ? (
         <div className="flex flex-col items-center py-20 text-slate-500">
           <BookOpen size={48} className="mb-4 opacity-40" />
@@ -124 +133 @@
                   <div className="space-y-2">
                     {list.stories.slice(0, 4).map(item => (
-                      <div key={item.item_id} className="flex items-center gap-3 p-2 rounded-lg hover:bg-slate-700/50 group">
-                        <div className="flex-1 min-w-0">
+                      <div key={item.item_id} className="flex items-center gap-2 p-2 rounded-lg hover:bg-slate-700/50">
+                        <div className="flex-1 min-w-0 overflow-hidden">
                           <button
                             onClick={() => navigate(`/story/${item.story_id}`)}
-                            className="text-white text-sm font-medium hover:text-indigo-300 transition-colors truncate block text-left"
+                            className="text-white text-sm font-medium hover:text-indigo-300 transition-colors truncate block text-left w-full"
                           >
                             {item.story_title}
                           </button>
                           <div className="flex items-center gap-2 mt-0.5">
-                            <span className="text-slate-500 text-xs">by {item.author_username}</span>
+                            <span className="text-slate-500 text-xs truncate">by {item.author_username}</span>
                             {item.genres.slice(0, 1).map(g => <GenreBadge key={g} genre={g} />)}
                           </div>
                         </div>
                         <button
-                          onClick={() => removeStoryFromList(list.list_id, item.story_id)}
-                          className="opacity-0 group-hover:opacity-100 text-slate-500 hover:text-rose-400 transition-all"
+                          onClick={() => setConfirmRemove({ listId: list.list_id, storyId: item.story_id, title: item.story_title })}
+                          className="flex-shrink-0 text-slate-500 hover:text-rose-400 hover:bg-rose-400/10 transition-all p-1.5 rounded-lg"
+                          title="Remove from list"
                         >
-                          <X size={14} />
+                          <Trash2 size={14} />
                         </button>
                       </div>
@@ -165 +175 @@
       )}
 
+      {/* Confirm remove modal */}
+      <Modal isOpen={!!confirmRemove} onClose={() => setConfirmRemove(null)} title="Remove Story">
+        <div className="space-y-4">
+          <p className="text-slate-300 text-sm">
+            Are you sure you want to remove <span className="text-white font-medium">"{confirmRemove?.title}"</span> from this list?
+          </p>
+          <div className="flex gap-3">
+            <Button variant="secondary" className="flex-1" onClick={() => setConfirmRemove(null)}>Cancel</Button>
+            <Button variant="danger" className="flex-1" onClick={async () => {
+              if (!confirmRemove) return
+              await removeStoryFromList(confirmRemove.listId, confirmRemove.storyId)
+              addToast('Story removed from list', 'info')
+              setConfirmRemove(null)
+            }}>Remove</Button>
+          </div>
+        </div>
+      </Modal>
+
       {/* Create modal */}
       <Modal isOpen={createOpen} onClose={() => setCreateOpen(false)} title="Create Reading List">

chapterx-frontend/src/pages/story/StoryDetailPage.tsx

@@ -23 +23 @@
   const [listModalOpen, setListModalOpen] = useState(false)
   const [newListName, setNewListName] = useState('')
+  const [liveLikes, setLiveLikes] = useState<number | null>(null)
+  const [liveComments, setLiveComments] = useState<number | null>(null)
 
   const story = stories.find(s => s.story_id === Number(id))
@@ -153 +155 @@
           {/* Action bar */}
           <div className="flex items-center gap-3 flex-wrap">
-            <LikeButton storyId={story.story_id} authorUserId={story.user_id} totalLikes={story.total_likes} />
+            <LikeButton storyId={story.story_id} authorUserId={story.user_id} totalLikes={story.total_likes} onCountChange={setLiveLikes} />
             {currentUser && (
               <Button variant="secondary" size="sm" onClick={() => setListModalOpen(true)}>
@@ -183 +185 @@
           {/* Comments */}
           <div className="border-t border-slate-700 pt-8">
-            <CommentSection storyId={story.story_id} authorUserId={story.user_id} />
+            <CommentSection storyId={story.story_id} authorUserId={story.user_id} onCountChange={setLiveComments} />
           </div>
         </div>
@@ -203 +205 @@
               <div className="flex justify-between">
                 <span className="text-slate-400">Likes</span>
-                <span className="text-white">{story.total_likes.toLocaleString()}</span>
+                <span className="text-white">{(liveLikes ?? story.total_likes).toLocaleString()}</span>
               </div>
               <div className="flex justify-between">
@@ -211 +213 @@
               <div className="flex justify-between">
                 <span className="text-slate-400">Comments</span>
-                <span className="text-white">{story.total_comments}</span>
+                <span className="text-white">{liveComments ?? story.total_comments}</span>
               </div>
               <div className="flex justify-between">