Update endpoints to reflect backend structure

webkom · Feb 23, 2024 · 8ab8093 · 8ab8093
1 parent e792a11
commit 8ab8093
Show file tree

Hide file tree

Showing 10 changed files with 75 additions and 44 deletions.
diff --git a/app/actions/ForumActions.ts b/app/actions/ForumActions.ts
@@ -90,6 +90,19 @@ export function fetchThreads() {
   });
 }
 
+export function fetchThreadsByForum(forumId: ID) {
+  return callAPI<PublicThread[]>({
+    types: Thread.FETCH_ALL,
+    endpoint: `/forums/${forumId}/threads/`,
+    schema: [threadSchema],
+    method: 'GET',
+    meta: {
+      errorMessage: 'Henting av tråder feilet',
+    },
+    propagateError: true,
+  });
+}
+
 export function fetchThread(threadId: ID) {
   return callAPI<DetailedThread>({
     types: Thread.FETCH,
@@ -102,6 +115,19 @@ export function fetchThread(threadId: ID) {
   });
 }
 
+export function fetchThreadByForum(forumId: ID, threadId: ID) {
+  return callAPI<PublicThread[]>({
+    types: Thread.FETCH,
+    endpoint: `/forums/${forumId}/threads/${threadId}`,
+    schema: threadSchema,
+    method: 'GET',
+    meta: {
+      errorMessage: 'Henting av tråder feilet',
+    },
+    propagateError: true,
+  });
+}
+
 export function createThread(thread: CreateThread) {
   return callAPI<DetailedThread>({
     types: Thread.CREATE,

diff --git a/app/routes/forum/components/ForumDetail.tsx b/app/routes/forum/components/ForumDetail.tsx
@@ -52,7 +52,7 @@ const ForumDetail = () => {
 
           <h1>{forum.title}</h1>
           <p className="secondaryFontColor">{forum.description}</p>
-          <ThreadList forumId={forumId} threadIds={forum.threads} />
+          <ThreadList forumId={forumId} />
         </ContentMain>
       </Content>
     )

diff --git a/app/routes/forum/components/ForumEditor.tsx b/app/routes/forum/components/ForumEditor.tsx
@@ -60,7 +60,7 @@ const ForumEditor = () => {
 
     const action = isNew ? createForum(body) : editForum(body);
     dispatch(action).then((res) => {
-      navigate(`/forum/${isNew ? res.payload.result : forumId}`);
+      navigate(`/forum/${isNew ? res.payload.result : forumId}/threads`);
     });
   };
 
@@ -96,7 +96,9 @@ const ForumEditor = () => {
             <Flex wrap>
               <Button
                 flat
-                onClick={() => navigate(`/forum/${isNew ? '' : forumId}`)}
+                onClick={() =>
+                  navigate(`/forum/${isNew ? '' : forumId}/threads`)
+                }
               >
                 Avbryt
               </Button>

diff --git a/app/routes/forum/components/ForumListEntry.tsx b/app/routes/forum/components/ForumListEntry.tsx
@@ -7,7 +7,7 @@ import type { PublicForum } from 'app/store/models/Forum';
 const ForumListEntry = ({ subForum }: { subForum: PublicForum }) => {
   return (
     <Flex column className={cx(styles.listEntry)}>
-      <Link to={`/forum/${subForum.id}`}>
+      <Link to={`/forum/${subForum.id}/threads`}>
         <h2>{subForum.title}</h2>
         <div>
           <p className="secondaryFontColor">

diff --git a/app/routes/forum/components/ThreadDetail.tsx b/app/routes/forum/components/ThreadDetail.tsx
@@ -1,7 +1,7 @@
 import { usePreparedEffect } from '@webkom/react-prepare';
 import moment from 'moment';
 import { Link, useParams } from 'react-router-dom';
-import { fetchThread } from 'app/actions/ForumActions';
+import { fetchThreadByForum } from 'app/actions/ForumActions';
 import { CommentView } from 'app/components/Comments';
 import { Content, ContentMain } from 'app/components/Content';
 import DisplayContent from 'app/components/DisplayContent';
@@ -13,12 +13,14 @@ import type Comment from 'app/store/models/Comment';
 import type { DetailedThread } from 'app/store/models/Forum';
 
 const ThreadDetail = () => {
+  const { forumId } = useParams<{ forumId: string }>();
   const { threadId } = useParams<{ threadId: string }>();
   const dispatch = useAppDispatch();
   const { currentUser } = useUserContext();
   usePreparedEffect(
-    'fetchDetailForum',
-    () => threadId && dispatch(fetchThread(threadId)),
+    'fetchDetailThread',
+    () =>
+      threadId && forumId && dispatch(fetchThreadByForum(forumId, threadId)),
     [threadId]
   );
 
@@ -39,15 +41,15 @@ const ThreadDetail = () => {
           <NavigationTab
             back={{
               label: 'Tilbake til liste',
-              path: `/forum/${thread.forum}`,
+              path: `/forum/${thread.forum}/threads`,
             }}
           >
-            {thread.createdBy?.id === currentUser.id ||
-              (actionGrant.includes('edit') && (
-                <NavigationLink to={`/forum/threads/${threadId}/edit`}>
-                  Rediger
-                </NavigationLink>
-              ))}
+            {(thread.createdBy?.id === currentUser.id ||
+              actionGrant.includes('edit')) && (
+              <NavigationLink to={`/forum/${forumId}/threads/${threadId}/edit`}>
+                Rediger
+              </NavigationLink>
+            )}
           </NavigationTab>
           <h1>{thread.title}</h1>
           <DisplayContent content={thread.content} />

diff --git a/app/routes/forum/components/ThreadEditor.tsx b/app/routes/forum/components/ThreadEditor.tsx
@@ -12,7 +12,7 @@ import {
   createThread,
   deleteThread,
   editThread,
-  fetchThread,
+  fetchThreadByForum,
 } from 'app/actions/ForumActions';
 import { Content } from 'app/components/Content';
 import {
@@ -36,15 +36,14 @@ const ThreadEditor = () => {
   const { forumId } = useParams<{ forumId: string }>();
   usePreparedEffect(
     'fetchThreadForEditor',
-    () => threadId && dispatch(fetchThread(threadId)),
+    () => threadId && dispatch(fetchThreadByForum(forumId, threadId)),
     [threadId]
   );
 
   const isNew = !threadId;
   const thread: DetailedThread = useAppSelector((state) =>
     isNew ? undefined : selectThreadsById(state, { threadId })
   );
-  const actionGrant = useAppSelector((state) => state.threads.actionGrant);
 
   const dispatch = useAppDispatch();
 
@@ -68,14 +67,16 @@ const ThreadEditor = () => {
 
     const action = isNew ? createThread(body) : editThread(body);
     dispatch(action).then((res) => {
-      navigate(`/forum/threads/${isNew ? res.payload.result : thread.id}`);
+      navigate(
+        `/forum/${forumId}/threads/${isNew ? res.payload.result : thread.id}`
+      );
     });
   };
 
   const handleDeleteThread = async () => {
     if (thread) {
       dispatch(deleteThread(threadId)).then(() => {
-        navigate(`/forum/${thread.forum}`);
+        navigate(`/forum/${thread.forum}/threads`);
       });
     }
   };
@@ -105,7 +106,9 @@ const ThreadEditor = () => {
                 flat
                 onClick={() =>
                   navigate(
-                    isNew ? `/forum/${forumId}` : `/forum/threads/${thread.id}`
+                    isNew
+                      ? `/forum/${forumId}/threads`
+                      : `/forum/${forumId}/threads/${thread.id}`
                   )
                 }
               >

diff --git a/app/routes/forum/components/ThreadList.tsx b/app/routes/forum/components/ThreadList.tsx
@@ -1,29 +1,20 @@
 import { Flex, LoadingIndicator } from '@webkom/lego-bricks';
 import { usePreparedEffect } from '@webkom/react-prepare';
-import { fetchThread } from 'app/actions/ForumActions';
+import { fetchThreadsByForum } from 'app/actions/ForumActions';
 import { Content, ContentMain } from 'app/components/Content';
 import { selectThreadsByForumId } from 'app/reducers/threads';
 import { useAppDispatch, useAppSelector } from 'app/store/hooks';
 import ThreadListEntry from './ThreadListEntry';
 import type { ID } from 'app/store/models';
 import type { PublicThread } from 'app/store/models/Forum';
 
-const ThreadList = ({
-  forumId,
-  threadIds,
-}: {
-  forumId: ID;
-  threadIds: ID[];
-}) => {
+const ThreadList = ({ forumId }: { forumId: ID }) => {
   const dispatch = useAppDispatch();
 
   usePreparedEffect(
     'fetchAllThreadsByForum',
-    () =>
-      threadIds?.forEach((threadId) => {
-        dispatch(fetchThread(threadId));
-      }),
-    []
+    () => forumId && dispatch(fetchThreadsByForum(forumId)),
+    [forumId]
   );
 
   const threads = useAppSelector(selectThreadsByForumId(parseInt(forumId)));
@@ -37,7 +28,12 @@ const ThreadList = ({
           <h1>Tråder 🧶</h1>
           <Flex column>
             {threads?.map((t: PublicThread) => (
-              <ThreadListEntry thread={t} className={''} key={t.id} />
+              <ThreadListEntry
+                thread={t}
+                className={''}
+                key={t.id}
+                forumId={forumId}
+              />
             ))}
           </Flex>
         </ContentMain>

diff --git a/app/routes/forum/components/ThreadListEntry.tsx b/app/routes/forum/components/ThreadListEntry.tsx
@@ -2,18 +2,21 @@ import { Flex } from '@webkom/lego-bricks';
 import cx from 'classnames';
 import { Link } from 'react-router-dom';
 import styles from './ForumList.css';
+import type { ID } from 'app/store/models';
 import type { PublicThread } from 'app/store/models/Forum';
 
 const ThreadListEntry = ({
   thread,
   className,
+  forumId,
 }: {
   thread: PublicThread;
   className: string;
+  forumId: ID;
 }) => {
   return (
     <Flex column className={cx(styles.threadEntry, className)}>
-      <Link to={`/forum/threads/${thread.id}`}>
+      <Link to={`/forum/${forumId}/threads/${thread.id}`}>
         <h2>{thread.title}</h2>
         <div>
           <p className="secondaryFontColor">

diff --git a/app/routes/forum/index.tsx b/app/routes/forum/index.tsx
@@ -11,12 +11,12 @@ const ForumList = loadable(() => import('./components/ForumList'));
 const ForumRoute = () => (
   <Routes>
     <Route index element={<ForumList />} />
-    <Route path=":forumId" element={<ForumDetail />} />
-    <Route path="threads/:threadId" element={<ThreadDetail />} />
+    <Route path=":forumId/threads" element={<ForumDetail />} />
     <Route path="new" element={<ForumEditor />} />
     <Route path=":forumId/edit" element={<ForumEditor />} />
     <Route path=":forumId/new" element={<ThreadEditor />} />
-    <Route path="threads/:threadId/edit" element={<ThreadEditor />} />
+    <Route path=":forumId/threads/:threadId" element={<ThreadDetail />} />
+    <Route path=":forumId/threads/:threadId/edit" element={<ThreadEditor />} />
     <Route path="*" element={<PageNotFound />} />
   </Routes>
 );

diff --git a/app/store/models/Forum.ts b/app/store/models/Forum.ts
@@ -18,15 +18,14 @@ export interface PublicThread {
   id: ID;
   title: string;
   content: string;
-  createdAt: Dateish; 
-  forum: ID; 
+  createdAt: Dateish;
+  forum: ID;
 }
 
 export interface DetailedThread extends PublicThread {
-  comments?: Comment[]; 
+  comments?: Comment[];
   createdBy?: PublicUser;
   contentTarget: ContentTarget;
-  sticky: number;
 }
 
 export interface CreateForum {
@@ -42,11 +41,11 @@ export interface PublicForum {
   id: number;
   title: string;
   description: string;
-  createdAt: Dateish; 
+  createdAt: Dateish;
 }
 
 export interface DetailedForum extends PublicForum {
   threads?: PublicThread[];
-  created_by?: PublicUser; 
+  created_by?: PublicUser;
   contentTarget: string;
 }