Index: chapterx-frontend/src/store/authStore.ts =================================================================== --- chapterx-frontend/src/store/authStore.ts (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) +++ chapterx-frontend/src/store/authStore.ts (revision acf690c1403ecbecd948a46d950278f177f2d408) @@ -27,5 +27,5 @@ token: null, showMatureContent: true, - allUsers: [...mockUsers], + allUsers: [], login: async (emailOrUsername, password) => { @@ -36,21 +36,26 @@ : get().allUsers.find(u => u.username === emailOrUsername)?.email || emailOrUsername const res = await axios.post(`${API_BASE}/auth/login`, { email, password }, { timeout: 3000 }) - const { token, userId, username } = res.data - const user = get().allUsers.find(u => u.user_id === userId) || - get().allUsers.find(u => u.username === username) || { - user_id: userId, - username, - email, - name: username, - surname: '', - role: 'regular' as const, - created_at: new Date().toISOString(), - follower_count: 0, - following_count: 0, - } + const { token, userId, username, name, surname, role } = res.data + const user: User = { + user_id: userId, + username, + email, + name: name ?? username, + surname: surname ?? '', + role: role ?? 'regular', + created_at: new Date().toISOString(), + follower_count: 0, + following_count: 0, + } set({ currentUser: user, token }) return - } catch { - // Fall through to mock login + } catch (err: any) { + // Only fall through to mock if the backend is unreachable (network/timeout) + // If the backend responded with an error (4xx/5xx), surface it to the user + if (err?.response) { + const message = err.response.data?.message || err.response.data || 'Invalid email or password.' + throw new Error(typeof message === 'string' ? message : 'Invalid email or password.') + } + // Network error / timeout — fall through to mock login } @@ -66,9 +71,29 @@ register: async (data, role) => { - // Try backend first try { await axios.post(`${API_BASE}/auth/register`, data, { timeout: 3000 }) - } catch { - // Fall through to mock register + // Register doesn't return a token — auto-login to get one + const loginRes = await axios.post(`${API_BASE}/auth/login`, { email: data.email, password: data.password }, { timeout: 3000 }) + const { token, userId, username } = loginRes.data + const newUser: User = { + user_id: userId, + username, + email: data.email, + name: data.name, + surname: data.surname, + role, + created_at: new Date().toISOString(), + follower_count: 0, + following_count: 0, + } + set(state => ({ allUsers: [...state.allUsers, newUser], currentUser: newUser, token })) + return + } catch (err: any) { + if (err?.response) { + const message = err.response.data?.message || err.response.data || 'Registration failed.' + throw new Error(typeof message === 'string' ? message : 'Registration failed.') + } + // Network error / timeout — fall through to mock register + console.warn('Backend unreachable during register, using mock:', err?.message) } Index: chapterx-frontend/src/store/storyStore.ts =================================================================== --- chapterx-frontend/src/store/storyStore.ts (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) +++ chapterx-frontend/src/store/storyStore.ts (revision acf690c1403ecbecd948a46d950278f177f2d408) @@ -23,4 +23,15 @@ } from '../data/mockData' +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 LikeRecord { userId: number @@ -38,14 +49,19 @@ likedStories: LikeRecord[] + // Fetch from backend + fetchStories: () => Promise + fetchChapters: () => Promise + fetchReadingLists: () => Promise + // Story actions - addStory: (story: Story) => void - updateStory: (id: number, partial: Partial) => void - deleteStory: (id: number) => void + addStory: (story: Story) => Promise + updateStory: (id: number, partial: Partial) => Promise + deleteStory: (id: number) => Promise updateStoryStatus: (id: number, status: StoryStatus) => void // Chapter actions - addChapter: (chapter: Chapter) => void - updateChapter: (id: number, partial: Partial) => void - deleteChapter: (id: number) => void + addChapter: (chapter: Chapter) => Promise + updateChapter: (id: number, partial: Partial) => Promise + deleteChapter: (id: number) => Promise incrementViewCount: (chapterId: number) => void @@ -74,8 +90,8 @@ // Reading list actions - createReadingList: (list: ReadingList) => void - addStoryToList: (listId: number, item: ReadingListItem) => void - removeStoryFromList: (listId: number, storyId: number) => void - deleteReadingList: (listId: number) => void + createReadingList: (list: ReadingList) => Promise + addStoryToList: (listId: number, item: ReadingListItem) => Promise + removeStoryFromList: (listId: number, storyId: number) => Promise + deleteReadingList: (listId: number) => Promise } @@ -90,13 +106,97 @@ likedStories: [], - addStory: (story) => - set(state => ({ stories: [...state.stories, story] })), - - updateStory: (id, partial) => + fetchStories: async () => { + try { + const res = await axios.get(`${API}/stories`) + const data: any[] = res.data?.stories ?? res.data ?? [] + const stories: Story[] = data.map((s: any) => ({ + story_id: s.id, + user_id: s.userId, + title: s.shortDescription, + short_description: s.shortDescription, + content: s.content, + mature_content: s.matureContent, + status: 'published' as StoryStatus, + author_username: '', + created_at: s.createdAt, + updated_at: s.updatedAt, + total_likes: 0, + total_comments: 0, + total_chapters: 0, + total_views: 0, + genres: [], + })) + if (stories.length > 0) set({ stories }) + } catch { + // keep mock data on failure + } + }, + + fetchChapters: async () => { + try { + const res = await axios.get(`${API}/chapters`) + const data: any[] = res.data?.chapters ?? res.data ?? [] + const chapters: Chapter[] = data.map((c: any) => ({ + chapter_id: c.id, + story_id: c.storyId, + title: c.title ?? c.name, + content: c.content, + chapter_number: c.number, + word_count: c.wordCount ?? 0, + view_count: c.viewCount ?? 0, + is_published: true, + created_at: c.createdAt, + updated_at: c.updatedAt, + })) + if (chapters.length > 0) set({ chapters }) + } catch { + // keep mock data on failure + } + }, + + addStory: async (story) => { + set(state => ({ stories: [...state.stories, story] })) + const res = await axios.post(`${API}/stories`, { + matureContent: story.mature_content, + shortDescription: story.title || story.short_description, + image: null, + content: story.content, + userId: story.user_id, + }, { headers: getAuthHeaders() }) + const backendId = res.data?.id ?? res.data + if (backendId && backendId !== story.story_id) { + set(state => ({ + stories: state.stories.map(s => + s.story_id === story.story_id ? { ...s, story_id: backendId } : s + ), + chapters: state.chapters.map(c => + c.story_id === story.story_id ? { ...c, story_id: backendId } : c + ), + })) + return backendId + } + return story.story_id + }, + + updateStory: async (id, partial) => { set(state => ({ stories: state.stories.map(s => (s.story_id === id ? { ...s, ...partial } : s)), - })), - - deleteStory: (id) => + })) + try { + const story = get().stories.find(s => s.story_id === id) + if (!story) return + await axios.put(`${API}/stories/${id}`, { + id, + matureContent: partial.mature_content ?? story.mature_content, + shortDescription: partial.title ?? partial.short_description ?? story.title ?? story.short_description, + image: null, + content: partial.content ?? story.content, + }, { headers: getAuthHeaders() }) + } catch { + // keep optimistic update on failure + } + }, + + deleteStory: async (id) => { set(state => ({ stories: state.stories.filter(s => s.story_id !== id), @@ -104,5 +204,11 @@ comments: state.comments.filter(c => c.story_id !== id), collaborations: state.collaborations.filter(c => c.story_id !== id), - })), + })) + try { + await axios.delete(`${API}/stories/${id}`, { headers: getAuthHeaders() }) + } catch { + // keep optimistic delete on failure + } + }, updateStoryStatus: (id, status) => @@ -113,5 +219,5 @@ })), - addChapter: (chapter) => + addChapter: async (chapter) => { set(state => ({ chapters: [...state.chapters, chapter], @@ -121,14 +227,45 @@ : s ), - })), - - updateChapter: (id, partial) => + })) + const res = await axios.post(`${API}/chapters`, { + number: chapter.chapter_number, + name: chapter.title, + title: chapter.title, + content: chapter.content, + storyId: chapter.story_id, + }, { headers: getAuthHeaders() }) + const backendId = res.data?.id ?? res.data + if (backendId && backendId !== chapter.chapter_id) { + set(state => ({ + chapters: state.chapters.map(c => + c.chapter_id === chapter.chapter_id ? { ...c, chapter_id: backendId } : c + ), + })) + } + }, + + updateChapter: async (id, partial) => { set(state => ({ chapters: state.chapters.map(c => c.chapter_id === id ? { ...c, ...partial, updated_at: new Date().toISOString() } : c ), - })), - - deleteChapter: (id) => + })) + try { + const chapter = get().chapters.find(c => c.chapter_id === id) + if (!chapter) return + await axios.put(`${API}/chapters/${id}`, { + id, + number: partial.chapter_number ?? chapter.chapter_number, + name: partial.title ?? chapter.title, + title: partial.title ?? chapter.title, + content: partial.content ?? chapter.content, + wordCount: partial.word_count ?? chapter.word_count, + }, { headers: getAuthHeaders() }) + } catch { + // keep optimistic update on failure + } + }, + + deleteChapter: async (id) => { set(state => { const chapter = state.chapters.find(c => c.chapter_id === id) @@ -143,5 +280,11 @@ : state.stories, } - }), + }) + try { + await axios.delete(`${API}/chapters/${id}`, { headers: getAuthHeaders() }) + } catch { + // keep optimistic delete on failure + } + }, incrementViewCount: (chapterId) => @@ -218,5 +361,5 @@ fetchSuggestions: async () => { try { - const res = await axios.get('https://localhost:7125/api/aisuggestions') + const res = await axios.get(`${API}/aisuggestions`) const data = res.data.aiSuggestions ?? res.data const mapped: AISuggestion[] = data.map((s: any) => ({ @@ -248,5 +391,5 @@ })) try { - await axios.put(`https://localhost:7125/api/aisuggestions/${id}`, { + await axios.put(`${API}/aisuggestions/${id}`, { id, originalText: s.original_text, @@ -268,5 +411,5 @@ })) try { - await axios.put(`https://localhost:7125/api/aisuggestions/${id}`, { + await axios.put(`${API}/aisuggestions/${id}`, { id, originalText: s.original_text, @@ -284,5 +427,5 @@ set(state => ({ aiSuggestions: [...state.aiSuggestions, { ...suggestion, suggestion_id: tempId }] })) try { - const res = await axios.post('https://localhost:7125/api/aisuggestions', { + const res = await axios.post('${API}/aisuggestions', { originalText: suggestion.original_text, suggestedText: suggestion.suggested_text, @@ -306,17 +449,72 @@ set(state => ({ genres: state.genres.filter(g => g.genre_id !== id) })), - createReadingList: (list) => - set(state => ({ readingLists: [...state.readingLists, list] })), - - addStoryToList: (listId, item) => + fetchReadingLists: async () => { + try { + const [listsRes, storiesRes] = await Promise.all([ + axios.get(`${API}/readinglists`), + axios.get(`${API}/stories`), + ]) + const data: any[] = listsRes.data?.readingLists ?? listsRes.data ?? [] + const storiesData: any[] = storiesRes.data?.stories ?? storiesRes.data ?? [] + const lists: ReadingList[] = data.map((l: any) => ({ + list_id: l.id, + user_id: l.userId, + username: '', + name: l.name, + description: l.content ?? '', + is_public: l.isPublic, + created_at: l.createdAt, + stories: (l.readingListItems ?? []).map((i: any) => { + const story = storiesData.find((s: any) => s.id === i.storyId) + return { + item_id: i.id ?? 0, + list_id: l.id, + story_id: i.storyId, + story_title: story?.title ?? story?.shortDescription ?? `Story #${i.storyId}`, + author_username: story?.authorUsername ?? '', + added_at: i.addedAt ?? new Date().toISOString(), + genres: story?.genres ?? [], + } + }), + })) + if (lists.length > 0) set({ readingLists: lists }) + } catch { + // keep mock data on failure + } + }, + + createReadingList: async (list) => { + set(state => ({ readingLists: [...state.readingLists, list] })) + const res = await axios.post(`${API}/readinglists`, { + name: list.name, + content: list.description ?? null, + isPublic: list.is_public, + userId: list.user_id, + }, { headers: getAuthHeaders() }) + const backendId = res.data?.id ?? res.data + if (backendId && backendId !== list.list_id) { + set(state => ({ + readingLists: state.readingLists.map(l => + l.list_id === list.list_id ? { ...l, list_id: backendId } : l + ), + })) + return backendId + } + return list.list_id + }, + + addStoryToList: async (listId, item) => { set(state => ({ readingLists: state.readingLists.map(l => - l.list_id === listId - ? { ...l, stories: [...l.stories, item] } - : l - ), - })), - - removeStoryFromList: (listId, storyId) => + l.list_id === listId ? { ...l, stories: [...l.stories, item] } : l + ), + })) + await axios.post(`${API}/readinglistitems`, { + readingListId: listId, + storyId: item.story_id, + }, { headers: getAuthHeaders() }) + }, + + removeStoryFromList: async (listId, storyId) => { set(state => ({ readingLists: state.readingLists.map(l => @@ -325,9 +523,21 @@ : l ), - })), - - deleteReadingList: (listId) => + })) + try { + // find the item id from backend list items to delete + const res = await axios.get(`${API}/readinglistitems`) + const items: any[] = res.data?.readingListItems ?? res.data ?? [] + const item = items.find((i: any) => i.readingListId === listId && i.storyId === storyId) + if (item) await axios.delete(`${API}/readinglistitems/${item.id}`, { headers: getAuthHeaders() }) + } catch { + // optimistic update already applied + } + }, + + deleteReadingList: async (listId) => { set(state => ({ readingLists: state.readingLists.filter(l => l.list_id !== listId), - })), + })) + await axios.delete(`${API}/readinglists/${listId}`, { headers: getAuthHeaders() }) + }, }))