Changeset acf690c for chapterx-frontend/src/store

Timestamp:

03/22/26 17:58:40 (4 months ago)

Author:

kikisrbinoska <srbinoskakristina07@…>

Branches:

main

Children:

73b69b2

Parents:

b62cefc

Message:

Added fixes for the login,stories management and reading lists

Location:

chapterx-frontend/src/store

Files:

• authStore.ts (modified) (3 diffs)
• storyStore.ts (modified) (14 diffs)

chapterx-frontend/src/store/authStore.ts

@@ -27 +27 @@
       token: null,
       showMatureContent: true,
-      allUsers: [...mockUsers],
+      allUsers: [],
 
       login: async (emailOrUsername, password) => {
@@ -36 +36 @@
             : 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 +71 @@
 
       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)
         }
 

chapterx-frontend/src/store/storyStore.ts

@@ -23 +23 @@
 } 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 +49 @@
   likedStories: LikeRecord[]
 
+  // Fetch from backend
+  fetchStories: () => Promise<void>
+  fetchChapters: () => Promise<void>
+  fetchReadingLists: () => Promise<void>
+
   // Story actions
-  addStory: (story: Story) => void
-  updateStory: (id: number, partial: Partial<Story>) => void
-  deleteStory: (id: number) => void
+  addStory: (story: Story) => Promise<number>
+  updateStory: (id: number, partial: Partial<Story>) => Promise<void>
+  deleteStory: (id: number) => Promise<void>
   updateStoryStatus: (id: number, status: StoryStatus) => void
 
   // Chapter actions
-  addChapter: (chapter: Chapter) => void
-  updateChapter: (id: number, partial: Partial<Chapter>) => void
-  deleteChapter: (id: number) => void
+  addChapter: (chapter: Chapter) => Promise<void>
+  updateChapter: (id: number, partial: Partial<Chapter>) => Promise<void>
+  deleteChapter: (id: number) => Promise<void>
   incrementViewCount: (chapterId: number) => void
 
@@ -74 +90 @@
 
   // 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<number>
+  addStoryToList: (listId: number, item: ReadingListItem) => Promise<void>
+  removeStoryFromList: (listId: number, storyId: number) => Promise<void>
+  deleteReadingList: (listId: number) => Promise<void>
 }
 
@@ -90 +106 @@
   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 +204 @@
       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 +219 @@
     })),
 
-  addChapter: (chapter) =>
+  addChapter: async (chapter) => {
     set(state => ({
       chapters: [...state.chapters, chapter],
@@ -121 +227 @@
           : 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 +280 @@
           : state.stories,
       }
-    }),
+    })
+    try {
+      await axios.delete(`${API}/chapters/${id}`, { headers: getAuthHeaders() })
+    } catch {
+      // keep optimistic delete on failure
+    }
+  },
 
   incrementViewCount: (chapterId) =>
@@ -218 +361 @@
   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 +391 @@
     }))
     try {
-      await axios.put(`https://localhost:7125/api/aisuggestions/${id}`, {
+      await axios.put(`${API}/aisuggestions/${id}`, {
         id,
         originalText: s.original_text,
@@ -268 +411 @@
     }))
     try {
-      await axios.put(`https://localhost:7125/api/aisuggestions/${id}`, {
+      await axios.put(`${API}/aisuggestions/${id}`, {
         id,
         originalText: s.original_text,
@@ -284 +427 @@
     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 +449 @@
     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 +523 @@
           : 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() })
+  },
 }))