Fix /questions page refreshing on add/edit

Author: tzyian

peerprep/api/gateway.ts

@@ -2,6 +2,7 @@ import { cookies } from "next/headers";
 import { LoginResponse, Question, StatusBody, UserServiceResponse } from "./structs";
 import DOMPurify from "isomorphic-dompurify";
 import { CookieNames } from "@/app/actions/session";
+import { revalidatePath } from "next/cache";
 
 export function generateAuthHeaders() {
   return {
@@ -20,31 +21,32 @@ export function getUserData() {
 export function generateJSONHeaders() {
   return {
     ...generateAuthHeaders(),
-    "Content-type": "application/json; charset=UTF-8,
+    "Content-type": "application/json; charset=UTF-8",
   };
 }
 
 export async function fetchQuestion(
-  questionId: number
+  questionId: numbe,
 ): Promise<Question | StatusBody> {
   try {
     const response = await fetch(
       `${process.env.NEXT_PUBLIC_NGINX}/${process.env.NEXT_PUBLIC_QUESTION_SERVICE}/questions/solve/${questionId}`,
       {
         method: "GET",
         headers: generateAuthHeaders(),
-        cache: "no-store"
+        cache: "no-store",
       },
     );
     if (!response.ok) {
       return {
         error: await response.text(),
-        status: response.status
+        status: response.statu,
       };
     }
 
     const question = (await response.json()) as Question;
     question.content = DOMPurify.sanitize(question.content);
+    revalidatePath(`/questions/edit/${questionId}`);
     return question;
   } catch (err: any) {
     return { error: err.message, status: 400 };
@@ -62,7 +64,7 @@ export async function getSessionLogin(validatedFields: {
         method: "POST",
         body: JSON.stringify(validatedFields),
         headers: {
-          "Content-type": "application/json; charset=UTF-8"
+          "Content-type": "application/json; charset=UTF-8",
         },
       },
     );
@@ -92,7 +94,7 @@ export async function postSignupUser(validatedFields: {
         method: "POST",
         body: JSON.stringify(validatedFields),
         headers: {
-          "Content-type": "application/json; charset=UTF-8"
+          "Content-type": "application/json; charset=UTF-8,
         },
       },
     );

peerprep/app/api/internal/questions/helper.ts

@@ -3,10 +3,9 @@
 import React from "react";
 import { Difficulty, Question } from "@/api/structs";
 import Chip from "@/components/shared/Chip";
-import PeerprepButton from "@/components/shared/PeerprepButton";
 import styles from "@/style/question.module.css";
 import { useRouter } from "next/navigation";
-import { deleteQuestion } from "@/app/api/internal/questions/helper";
+import { deleteQuestion } from "@/app/questions/helper";
 import CollabEditor from "@/components/questionpage/CollabEditor";
 import DOMPurify from "isomorphic-dompurify";
 

peerprep/app/api/internal/questions/route.ts

@@ -4,7 +4,7 @@ import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Question, QuestionSchema } from "@/api/structs";
-import { editQuestion } from "@/app/api/internal/questions/helper";
+import { editQuestion } from "@/app/questions/helper";
 import QuestionForm from "@/app/questions/QuestionForm";
 import { useRouter } from "next/navigation";
 
@@ -23,7 +23,7 @@ const EditQuestion = ({ question }: { question: Question }) => {
 
   const onSubmit = async (values: z.infer<typeof QuestionSchema>) => {
     console.log(values);
-    const qn = {
+    const qn: Question = {
       id: question.id,
       ...values,
     };

peerprep/app/questions/[question]/question.tsx

@@ -0,0 +1,59 @@
+"use server";
+
+import { Question, QuestionFullBody, StatusBody } from "@/api/structs";
+import { revalidatePath } from "next/cache";
+import { generateAuthHeaders, generateJSONHeaders } from "@/api/gateway";
+
+export async function deleteQuestion(id: number): Promise<StatusBody> {
+  const res = await fetch(
+    `${process.env.NEXT_PUBLIC_NGINX}/${process.env.NEXT_PUBLIC_QUESTION_SERVICE}/questions/delete/${id}`,
+    {
+      method: "DELETE",
+      headers: generateAuthHeaders(),
+    },
+  );
+  if (res.ok) {
+    return { status: res.status };
+  }
+  revalidatePath("/questions");
+  const json = await res.json();
+  return json as StatusBody;
+}
+
+export async function editQuestion(question: Question): Promise<StatusBody> {
+  console.log("editing question", question.id);
+  const res = await fetch(
+    `${process.env.NEXT_PUBLIC_NGINX}/${process.env.NEXT_PUBLIC_QUESTION_SERVICE}/questions/replace/${question.id}`,
+    {
+      method: "PUT",
+      body: JSON.stringify(question),
+      headers: generateJSONHeaders(),
+    },
+  );
+  if (!res.ok) {
+    return { status: res.status };
+  }
+  revalidatePath("/questions");
+  revalidatePath("/questions/edit/" + question.id);
+  const json = await res.json();
+  return json as StatusBody;
+}
+
+export async function addQuestion(
+  question: QuestionFullBody,
+): Promise<StatusBody> {
+  console.log("Adding question", question.title);
+  const url = `${process.env.NEXT_PUBLIC_NGINX}/${process.env.NEXT_PUBLIC_QUESTION_SERVICE}/questions`;
+  console.log(url);
+  const res = await fetch(url, {
+    method: "POST",
+    body: JSON.stringify(question),
+    headers: generateJSONHeaders(),
+  });
+  if (!res.ok) {
+    return { status: res.status };
+  }
+  revalidatePath("/questions");
+  const json = await res.json();
+  return json as StatusBody;
+}

peerprep/app/questions/edit/[question]/EditQuestion.tsx

@@ -8,7 +8,7 @@ import { useRouter } from "next/navigation";
 import { exampleQuestion } from "@/app/questions/new/ExampleQuestion";
 import { zodResolver } from "@hookform/resolvers/zod";
 import QuestionForm from "@/app/questions/QuestionForm";
-import { addQuestion } from "@/app/api/internal/questions/helper";
+import { addQuestion } from "@/app/questions/helper";
 
 const NewQuestion = () => {
   const router = useRouter();

peerprep/app/questions/helper.ts

@@ -4,7 +4,7 @@ import { Difficulty, Question } from "@/api/structs";
 import PeerprepButton from "../shared/PeerprepButton";
 import { useRouter } from "next/navigation";
 import styles from "@/style/questionCard.module.css";
-import { deleteQuestion } from "@/app/api/internal/questions/helper";
+import { deleteQuestion } from "@/app/questions/helper";
 import DOMPurify from "isomorphic-dompurify";
 
 type QuestionCardProps = {