feat(client): implement forum answer posting

bounswe · Nov 20, 2024 · 51695d1 · 51695d1
1 parent a261471
commit 51695d1
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 5 deletions.
diff --git a/client/src/routes/Forum/Forum.data.tsx b/client/src/routes/Forum/Forum.data.tsx
@@ -1,4 +1,4 @@
-import { ActionFunction, LoaderFunction } from "react-router";
+import { ActionFunction, LoaderFunction, redirect } from "react-router";
 import { safeParse } from "valibot";
 import apiClient from "../../api";
 import { USER } from "../../constants";
@@ -190,8 +190,9 @@ export const bookmarkForumAction = (async ({
 }) satisfies ActionFunction;
 
 export const answerForumAction = (async ({ request, params }) => {
-    // if not logged in, redirect to login page and add a toast
+    // If not logged in, render a warning message and return redirect login.
 
+    const postId = params.postId;
     const user = sessionStorage.getObject(USER) || localStorage.getObject(USER);
     if (!user) {
         useToastStore.getState().add({
@@ -202,6 +203,7 @@ export const answerForumAction = (async ({ request, params }) => {
                 description: "You need to log in to answer forum questions.",
             },
         });
+        return redirect("/login");
     }
 
     const formData = await request.formData();

diff --git a/client/src/routes/Forum/Question.tsx b/client/src/routes/Forum/Question.tsx
@@ -1,4 +1,4 @@
-import { Form, useFetcher, useSearchParams } from "react-router-dom";
+import { useFetcher, useSearchParams } from "react-router-dom";
 import { useLoaderData, useRouteLoaderData } from "react-router-typesafe";
 import { buttonClass } from "../../components/button";
 import { ForumAnswerCard } from "../../components/forum-answer-card";
@@ -29,7 +29,7 @@ export const ForumQuestion = () => {
                         );
                     })}
                 </div>
-                <Form
+                <answerFetcher.Form
                     action="answer"
                     method="POST"
                     className="flex w-full max-w-xl flex-col items-center justify-center gap-4"
@@ -51,7 +51,7 @@ export const ForumQuestion = () => {
                     >
                         Post Comment
                     </button>
-                </Form>
+                </answerFetcher.Form>
             </main>
         </div>
     );