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

main
Last change on this file since acf690c was acf690c, checked in by kikisrbinoska <srbinoskakristina07@…>, 4 months ago

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