source: chapterx-frontend/src/pages/reading-list/ReadingListPage.tsx@ a7550ca

main
Last change on this file since a7550ca was 73b69b2, checked in by kikisrbinoska <srbinoskakristina07@…>, 3 months ago

Fixed reading lists,comments and likes
  • Property mode set to 100644
File size: 10.9 KB
Line 
1import React, { useState, useEffect } from 'react'
2import { useNavigate } from 'react-router-dom'
3import { Plus, BookOpen, Lock, Globe, Trash2, X } from 'lucide-react'
4import { useAuthStore } from '../../store/authStore'
5import { useStoryStore } from '../../store/storyStore'
6import { useUIStore } from '../../store/uiStore'
7import { Button } from '../../components/ui/Button'
8import { Modal } from '../../components/ui/Modal'
9import { GenreBadge } from '../../components/ui/Badge'
10
11export const ReadingListPage: React.FC = () => {
12 const navigate = useNavigate()
13 const { currentUser } = useAuthStore()
14 const { readingLists, fetchUserReadingLists, createReadingList, deleteReadingList, removeStoryFromList } = useStoryStore()
15 const [fetching, setFetching] = useState(false)
16 const [confirmRemove, setConfirmRemove] = useState<{ listId: number; storyId: number; title: string } | null>(null)
17
18 useEffect(() => {
19 if (!currentUser) return
20 setFetching(true)
21 fetchUserReadingLists(currentUser.user_id).finally(() => setFetching(false))
22 }, [currentUser?.user_id])
23 const { addToast } = useUIStore()
24 const [createOpen, setCreateOpen] = useState(false)
25 const [newListName, setNewListName] = useState('')
26 const [newListDesc, setNewListDesc] = useState('')
27 const [isPublic, setIsPublic] = useState(false)
28
29 if (!currentUser) {
30 return (
31 <div className="max-w-4xl mx-auto px-4 py-20 text-center">
32 <BookOpen size={48} className="mx-auto mb-4 text-slate-600" />
33 <h2 className="text-2xl text-white mb-2">Sign in to view your reading lists</h2>
34 <Button onClick={() => navigate('/login')} className="mt-4">Sign In</Button>
35 </div>
36 )
37 }
38
39 const myLists = readingLists.filter(l => l.user_id === currentUser!.user_id)
40
41 const handleCreate = async () => {
42 if (!newListName.trim()) return
43 try {
44 await createReadingList({
45 list_id: Date.now(),
46 user_id: currentUser.user_id,
47 username: currentUser.username,
48 name: newListName.trim(),
49 description: newListDesc.trim() || undefined,
50 is_public: isPublic,
51 created_at: new Date().toISOString(),
52 stories: [],
53 })
54 addToast(`"${newListName}" created!`)
55 } catch (err: any) {
56 addToast(err?.response?.data?.message || 'Failed to create list.', 'error')
57 return
58 }
59 setNewListName('')
60 setNewListDesc('')
61 setIsPublic(false)
62 setCreateOpen(false)
63 }
64
65 return (
66 <div className="max-w-6xl mx-auto px-4 py-8">
67 {/* Header */}
68 <div className="flex items-center justify-between mb-8">
69 <div>
70 <h1 className="font-serif text-3xl font-bold text-white">My Reading Lists</h1>
71 <p className="text-slate-400 mt-1">{myLists.length} list{myLists.length !== 1 ? 's' : ''}</p>
72 </div>
73 <Button onClick={() => setCreateOpen(true)}>
74 <Plus size={16} />
75 New List
76 </Button>
77 </div>
78
79 {fetching ? (
80 <div className="flex flex-col items-center py-20 text-slate-500">
81 <BookOpen size={48} className="mb-4 opacity-40 animate-pulse" />
82 <p className="text-sm">Loading your lists...</p>
83 </div>
84 ) : myLists.length === 0 ? (
85 <div className="flex flex-col items-center py-20 text-slate-500">
86 <BookOpen size={48} className="mb-4 opacity-40" />
87 <h3 className="text-lg font-medium text-white mb-2">No reading lists yet</h3>
88 <p className="text-sm mb-4">Create your first list to save stories you love.</p>
89 <Button onClick={() => setCreateOpen(true)}>
90 <Plus size={14} />
91 Create Reading List
92 </Button>
93 </div>
94 ) : (
95 <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
96 {myLists.map(list => (
97 <div key={list.list_id} className="bg-slate-800 border border-slate-700 rounded-2xl overflow-hidden hover:border-indigo-500/30 transition-all">
98 {/* Header */}
99 <div className="p-5 border-b border-slate-700">
100 <div className="flex items-start justify-between gap-3">
101 <div>
102 <div className="flex items-center gap-2 mb-1">
103 <h3 className="text-white font-semibold">{list.name}</h3>
104 {list.is_public ? (
105 <span className="flex items-center gap-1 text-xs text-emerald-400">
106 <Globe size={11} /> Public
107 </span>
108 ) : (
109 <span className="flex items-center gap-1 text-xs text-slate-500">
110 <Lock size={11} /> Private
111 </span>
112 )}
113 </div>
114 {list.description && (
115 <p className="text-slate-400 text-sm">{list.description}</p>
116 )}
117 <p className="text-slate-500 text-xs mt-1">{list.stories.length} stories</p>
118 </div>
119 <button
120 onClick={async () => { try { await deleteReadingList(list.list_id); addToast('List deleted', 'info') } catch { addToast('Failed to delete list.', 'error') } }}
121 className="text-slate-500 hover:text-rose-400 transition-colors p-1"
122 >
123 <Trash2 size={14} />
124 </button>
125 </div>
126 </div>
127
128 {/* Stories */}
129 <div className="p-4">
130 {list.stories.length === 0 ? (
131 <p className="text-slate-600 text-sm text-center py-4">No stories yet.</p>
132 ) : (
133 <div className="space-y-2">
134 {list.stories.slice(0, 4).map(item => (
135 <div key={item.item_id} className="flex items-center gap-2 p-2 rounded-lg hover:bg-slate-700/50">
136 <div className="flex-1 min-w-0 overflow-hidden">
137 <button
138 onClick={() => navigate(`/story/${item.story_id}`)}
139 className="text-white text-sm font-medium hover:text-indigo-300 transition-colors truncate block text-left w-full"
140 >
141 {item.story_title}
142 </button>
143 <div className="flex items-center gap-2 mt-0.5">
144 <span className="text-slate-500 text-xs truncate">by {item.author_username}</span>
145 {item.genres.slice(0, 1).map(g => <GenreBadge key={g} genre={g} />)}
146 </div>
147 </div>
148 <button
149 onClick={() => setConfirmRemove({ listId: list.list_id, storyId: item.story_id, title: item.story_title })}
150 className="flex-shrink-0 text-slate-500 hover:text-rose-400 hover:bg-rose-400/10 transition-all p-1.5 rounded-lg"
151 title="Remove from list"
152 >
153 <Trash2 size={14} />
154 </button>
155 </div>
156 ))}
157 {list.stories.length > 4 && (
158 <p className="text-slate-500 text-xs text-center pt-1">
159 +{list.stories.length - 4} more stories
160 </p>
161 )}
162 </div>
163 )}
164 <button
165 onClick={() => navigate('/browse')}
166 className="w-full mt-3 py-2 text-xs text-indigo-400 hover:text-indigo-300 flex items-center justify-center gap-1 transition-colors border border-dashed border-slate-700 rounded-lg hover:border-indigo-500/50"
167 >
168 <Plus size={12} />
169 Add stories
170 </button>
171 </div>
172 </div>
173 ))}
174 </div>
175 )}
176
177 {/* Confirm remove modal */}
178 <Modal isOpen={!!confirmRemove} onClose={() => setConfirmRemove(null)} title="Remove Story">
179 <div className="space-y-4">
180 <p className="text-slate-300 text-sm">
181 Are you sure you want to remove <span className="text-white font-medium">"{confirmRemove?.title}"</span> from this list?
182 </p>
183 <div className="flex gap-3">
184 <Button variant="secondary" className="flex-1" onClick={() => setConfirmRemove(null)}>Cancel</Button>
185 <Button variant="danger" className="flex-1" onClick={async () => {
186 if (!confirmRemove) return
187 await removeStoryFromList(confirmRemove.listId, confirmRemove.storyId)
188 addToast('Story removed from list', 'info')
189 setConfirmRemove(null)
190 }}>Remove</Button>
191 </div>
192 </div>
193 </Modal>
194
195 {/* Create modal */}
196 <Modal isOpen={createOpen} onClose={() => setCreateOpen(false)} title="Create Reading List">
197 <div className="space-y-4">
198 <div>
199 <label className="block text-sm text-slate-400 mb-1.5">List Name *</label>
200 <input
201 value={newListName}
202 onChange={e => setNewListName(e.target.value)}
203 placeholder="My Fantasy Favorites..."
204 className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500"
205 />
206 </div>
207 <div>
208 <label className="block text-sm text-slate-400 mb-1.5">Description <span className="text-slate-600">(optional)</span></label>
209 <textarea
210 value={newListDesc}
211 onChange={e => setNewListDesc(e.target.value)}
212 placeholder="What's this list about?"
213 rows={2}
214 className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 resize-none"
215 />
216 </div>
217 <div className="flex items-center gap-3">
218 <button
219 onClick={() => setIsPublic(!isPublic)}
220 className={`w-10 h-6 rounded-full transition-colors ${isPublic ? 'bg-indigo-600' : 'bg-slate-600'} relative`}
221 >
222 <div className={`absolute top-1 w-4 h-4 bg-white rounded-full transition-transform ${isPublic ? 'translate-x-5' : 'translate-x-1'}`} />
223 </button>
224 <div>
225 <p className="text-white text-sm">{isPublic ? 'Public' : 'Private'}</p>
226 <p className="text-slate-500 text-xs">{isPublic ? 'Anyone can see this list' : 'Only you can see this list'}</p>
227 </div>
228 </div>
229 <div className="flex gap-3 pt-2">
230 <Button variant="secondary" className="flex-1" onClick={() => setCreateOpen(false)}>Cancel</Button>
231 <Button className="flex-1" onClick={handleCreate} disabled={!newListName.trim()}>Create List</Button>
232 </div>
233 </div>
234 </Modal>
235 </div>
236 )
237}
Note: See TracBrowser for help on using the repository browser.