Changeset 0b502c2 for chapterx-frontend/src/pages

Timestamp:

06/23/26 17:20:47 (13 days ago)

Author:

kikisrbinoska <srbinoskakristina07@…>

Branches:

main

Children:

99c1e45

Parents:

b373fea

Message:

Fixed user profile and reading lists

Location:

chapterx-frontend/src/pages

Files:

• LandingPage.tsx (modified) (2 diffs)
• admin/AdminGenresPage.tsx (modified) (2 diffs)
• auth/LoginPage.tsx (modified) (3 diffs)
• browse/BrowsePage.tsx (modified) (3 diffs)
• browse/GenrePage.tsx (modified) (2 diffs)
• profile/ProfilePage.tsx (modified) (4 diffs)

chapterx-frontend/src/pages/LandingPage.tsx

@@ -1 +1 @@
 import React from 'react'
 import { useNavigate } from 'react-router-dom'
-import { Feather, Star, BookOpen, Users, Sparkles, ArrowRight, ChevronRight } from 'lucide-react'
+import { Feather, BookOpen, Users, Sparkles, ArrowRight, ChevronRight } from 'lucide-react'
 import logo from '../assets/chapterX-removebg-preview.png'
 import { useStoryStore } from '../store/storyStore'
@@ -34 +34 @@
 
         <div className="relative max-w-7xl mx-auto px-4 text-center">
-          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full glass text-sm text-indigo-300 mb-8 border border-indigo-500/20">
-            <Star size={14} className="text-amber-400 fill-amber-400" />
-            The collaborative storytelling platform
-          </div>
-
           <div className="flex justify-center mb-6">
             <img src={logo} alt="ChapterX" className="h-32 w-32 object-contain" />

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

@@ -10 +10 @@
 export const AdminGenresPage: React.FC = () => {
   const navigate = useNavigate()
-  const { genres, fetchGenres, addGenre, deleteGenre } = useStoryStore()
+  const { genres, fetchGenres, addGenre, deleteGenre, stories } = useStoryStore()
+  const publishedStories = stories.filter(s => s.status === 'published')
   const { addToast } = useUIStore()
   const [addOpen, setAddOpen] = useState(false)
@@ -75 +76 @@
               </div>
               <div className="flex items-center gap-4">
-                <span className="text-slate-500 text-sm">{genre.story_count} stories</span>
+                <span className="text-slate-500 text-sm">{publishedStories.filter(s => s.genres.some(g => g.toLowerCase() === genre.name.toLowerCase())).length} stories</span>
                 <button
                   onClick={() => setDeleteTarget(genre)}
                   className={`transition-colors p-1 rounded ${
-                    genre.story_count > 0
+                    publishedStories.some(s => s.genres.some(g => g.toLowerCase() === genre.name.toLowerCase()))
                       ? 'text-slate-700 cursor-not-allowed'
                       : 'text-slate-500 hover:text-rose-400 hover:bg-rose-500/10'
                   }`}
-                  disabled={genre.story_count > 0}
-                  title={genre.story_count > 0 ? 'Cannot delete genre with stories' : 'Delete genre'}
+                  disabled={publishedStories.some(s => s.genres.some(g => g.toLowerCase() === genre.name.toLowerCase()))}
+                  title={publishedStories.some(s => s.genres.some(g => g.toLowerCase() === genre.name.toLowerCase())) ? 'Cannot delete genre with stories' : 'Delete genre'}
                 >
                   <Trash2 size={14} />

chapterx-frontend/src/pages/auth/LoginPage.tsx

@@ -6 +6 @@
 import { useUIStore } from '../../store/uiStore'
 import { Button } from '../../components/ui/Button'
-import { Avatar } from '../../components/ui/Avatar'
-import { RoleBadge } from '../../components/ui/Badge'
-
-const quickUsers = [
-  { username: 'admin_alex', name: 'Alex Admin', role: 'admin' as const },
-  { username: 'elena_writes', name: 'Elena Dimitrova', role: 'writer' as const },
-  { username: 'boris_writer', name: 'Boris Nikolov', role: 'writer' as const },
-  { username: 'sara_reader', name: 'Sara Petkovska', role: 'regular' as const },
-]
 
 export const LoginPage: React.FC = () => {
   const navigate = useNavigate()
-  const { login, switchUser } = useAuthStore()
+  const { login } = useAuthStore()
   const { addToast } = useUIStore()
   const [email, setEmail] = useState('')
@@ -49 +40 @@
   }
 
-  const handleQuickLogin = (username: string) => {
-    const { allUsers } = useAuthStore.getState()
-    const user = allUsers.find(u => u.username === username)
-    if (user) {
-      switchUser(user.user_id)
-      addToast(`Signed in as ${user.name}`)
-      navigate('/')
-    }
-  }
-
   return (
     <div className="min-h-[80vh] flex items-center justify-center px-4 py-12">
@@ -69 +50 @@
           <h1 className="font-serif text-2xl font-bold text-white">Welcome back</h1>
           <p className="text-slate-400 text-sm mt-2">Sign in to your account</p>
-        </div>
-
-        {/* Quick login */}
-        <div className="mb-6">
-          <p className="text-xs text-slate-500 text-center mb-3">Quick demo login</p>
-          <div className="grid grid-cols-2 gap-2">
-            {quickUsers.map(u => (
-              <button
-                key={u.username}
-                onClick={() => handleQuickLogin(u.username)}
-                className="flex items-center gap-2 p-3 bg-slate-800 border border-slate-700 rounded-xl hover:border-indigo-500/50 hover:bg-slate-700/50 transition-all group"
-              >
-                <Avatar name={u.name} size="sm" />
-                <div className="text-left min-w-0">
-                  <p className="text-white text-xs font-medium truncate">{u.name}</p>
-                  <RoleBadge role={u.role} />
-                </div>
-              </button>
-            ))}
-          </div>
-        </div>
-
-        <div className="flex items-center gap-3 mb-6">
-          <div className="flex-1 h-px bg-slate-700" />
-          <span className="text-slate-600 text-xs">or sign in with email</span>
-          <div className="flex-1 h-px bg-slate-700" />
         </div>
 

chapterx-frontend/src/pages/browse/BrowsePage.tsx

@@ -10 +10 @@
   { value: 'recent', label: 'Most Recent' },
   { value: 'views', label: 'Most Viewed' },
-  { value: 'comments', label: 'Most Discussed' },
 ]
 
@@ -26 +25 @@
     let list = stories.filter(s => s.status === 'published')
 
-    if (!showMatureContent && !currentUser) {
+    if (!showMatureContent) {
       list = list.filter(s => !s.mature_content)
     }
@@ -47 +46 @@
       case 'recent': return [...list].sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
       case 'views': return [...list].sort((a, b) => b.total_views - a.total_views)
-      case 'comments': return [...list].sort((a, b) => b.total_comments - a.total_comments)
-      default: return list
+default: return list
     }
   }, [stories, search, selectedGenres, sort, showMatureContent, currentUser])

chapterx-frontend/src/pages/browse/GenrePage.tsx

@@ -49 +49 @@
 export const GenresListPage: React.FC = () => {
   const navigate = useNavigate()
-  const { genres } = useStoryStore()
+  const { genres, stories } = useStoryStore()
+  const publishedStories = stories.filter(s => s.status === 'published')
 
   return (
@@ -68 +69 @@
               <div className="absolute inset-0 flex flex-col items-center justify-center p-4">
                 <p className="font-serif font-semibold text-white text-center">{genre.name}</p>
-                <p className="text-white/60 text-xs mt-1">{genre.story_count} stories</p>
+                <p className="text-white/60 text-xs mt-1">{publishedStories.filter(s => s.genres.some(g => g.toLowerCase() === genre.name.toLowerCase())).length} stories</p>
               </div>
               <div className="absolute inset-0 bg-black/20 group-hover:bg-black/10 transition-colors" />

chapterx-frontend/src/pages/profile/ProfilePage.tsx

@@ -1 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { useParams, useNavigate } from 'react-router-dom'
 import { BookOpen, Heart, Users, Calendar, MessageCircle, Eye } from 'lucide-react'
 import { useAuthStore } from '../../store/authStore'
 import { useStoryStore } from '../../store/storyStore'
+import { useUIStore } from '../../store/uiStore'
 import { Avatar } from '../../components/ui/Avatar'
 import { RoleBadge, StatusBadge } from '../../components/ui/Badge'
 import { StoryCard } from '../../components/ui/StoryCard'
 import { GenreBadge } from '../../components/ui/Badge'
+import { Modal } from '../../components/ui/Modal'
+import { Button } from '../../components/ui/Button'
 
 type Tab = 'stories' | 'about'
@@ -14 +17 @@
   const { username } = useParams<{ username: string }>()
   const navigate = useNavigate()
-  const { allUsers, currentUser } = useAuthStore()
+  const { allUsers, currentUser, fetchAllUsers, updateUser } = useAuthStore()
   const { stories, comments } = useStoryStore()
+  const { addToast } = useUIStore()
   const [tab, setTab] = useState<Tab>('stories')
+  const [loading, setLoading] = useState(false)
+  const [editOpen, setEditOpen] = useState(false)
+  const [editForm, setEditForm] = useState({ username: '', email: '', name: '', surname: '' })
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    if (allUsers.length === 0) {
+      setLoading(true)
+      fetchAllUsers().finally(() => setLoading(false))
+    }
+  }, [])
 
   const user = allUsers.find(u => u.username === username)
+
+  const openEdit = () => {
+    if (!user) return
+    setEditForm({ username: user.username, email: user.email, name: user.name, surname: user.surname })
+    setEditOpen(true)
+  }
+
+  const handleEditSave = async () => {
+    if (!user) return
+    setSaving(true)
+    try {
+      await updateUser(user.user_id, editForm)
+      addToast('Profile updated successfully!')
+      setEditOpen(false)
+      navigate(`/profile/${editForm.username}`, { replace: true })
+    } catch (err: any) {
+      addToast(err.response?.data?.message ?? 'Failed to update profile.', 'error')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="max-w-4xl mx-auto px-4 py-20 text-center">
+        <p className="text-slate-400">Loading profile...</p>
+      </div>
+    )
+  }
 
   if (!user) {
@@ -50 +94 @@
           <Avatar name={`${user.name} ${user.surname}`} size="xl" className="ring-4 ring-slate-950" />
           {currentUser?.user_id === user.user_id && (
-            <button className="mb-2 text-sm text-indigo-400 hover:text-indigo-300 transition-colors">
+            <button onClick={openEdit} className="mb-2 text-sm text-indigo-400 hover:text-indigo-300 transition-colors">
               Edit Profile
             </button>
@@ -159 +203 @@
         </div>
       )}
+
+      <Modal isOpen={editOpen} onClose={() => setEditOpen(false)} title="Edit Profile">
+        <div className="space-y-4">
+          {[
+            { label: 'First Name', key: 'name' },
+            { label: 'Last Name', key: 'surname' },
+            { label: 'Username', key: 'username' },
+            { label: 'Email', key: 'email' },
+          ].map(({ label, key }) => (
+            <div key={key}>
+              <label className="block text-sm text-slate-400 mb-1.5">{label}</label>
+              <input
+                type={key === 'email' ? 'email' : 'text'}
+                value={editForm[key as keyof typeof editForm]}
+                onChange={e => setEditForm(p => ({ ...p, [key]: e.target.value }))}
+                className="w-full px-4 py-2.5 bg-slate-800 border border-slate-700 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500"
+              />
+            </div>
+          ))}
+          <div className="flex gap-3 pt-2">
+            <Button variant="ghost" className="flex-1" onClick={() => setEditOpen(false)}>Cancel</Button>
+            <Button className="flex-1" loading={saving} onClick={handleEditSave}>Save Changes</Button>
+          </div>
+        </div>
+      </Modal>
     </div>
   )