Merge branch 'fix-refresh-on-delete-question' into post-ms6

Author: tzyian

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

@@ -1,5 +1,6 @@
 import { generateAuthHeaders, generateJSONHeaders } from "@/api/gateway";
 import { NextRequest, NextResponse } from "next/server";
+import { revalidatePath } from "next/cache";
 
 export async function GET() {
   try {
@@ -8,22 +9,22 @@ export async function GET() {
       {
         method: "GET",
         headers: generateAuthHeaders(),
-      }
+      },
     );
     if (!response.ok) {
       return NextResponse.json(
         {
           error: await response.text(),
           status: response.status,
         },
-        { status: response.status }
+        { status: response.status },
       );
     }
     return response;
   } catch (err: any) {
     return NextResponse.json(
       { error: err.message, status: 400 },
-      { status: 400 }
+      { status: 400 ,
     );
   }
 }
@@ -37,7 +38,7 @@ export async function POST(request: NextRequest) {
         method: "POST",
         body: JSON.stringify(body),
         headers: generateJSONHeaders(),
-      }
+      },
     );
     if (response.ok) {
       return NextResponse.json(
@@ -74,10 +75,11 @@ export async function DELETE(request: NextRequest) {
       {
         method: "DELETE",
         headers: generateAuthHeaders(),
-      }
+      },
     );
     if (response.ok) {
       // NextResponse doesn't support 204.
+      revalidatePath("/questions");
       return new Response(null, { status: response.status });
     }
     return NextResponse.json(

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

@@ -45,6 +45,7 @@ function QuestionBlock({ question }: Props) {
       }
       console.log(`Successfully deleted the question.`);
       router.push("/questions");
+      router.refresh();
     } else {
       console.log("Deletion cancelled.");
     }

peerprep/app/questions/loading.tsx

@@ -0,0 +1,9 @@
+const LoadingPage = () => {
+  return (
+    <div>
+      <h1>Loading...</h1>
+    </div>
+  );
+};
+
+export default LoadingPage;

peerprep/app/questions/new/page.tsx

@@ -89,6 +89,7 @@ function NewQuestion({}: Props) {
       ...formData,
     };
     const status = await addQuestion(question);
+    router.refresh();
     if (status.error) {
       console.log("Failed to add question.");
       console.log(`Code ${status.status}:  ${status.error}`);

peerprep/app/questions/page.tsx

@@ -4,14 +4,25 @@ import Matchmaking from "@/components/questionpage/Matchmaking";
 import { QuestionFilterProvider } from "@/contexts/QuestionFilterContext";
 import { UserInfoProvider } from "@/contexts/UserInfoContext";
 import { hydrateUid } from "../actions/server_actions";
+import { Question } from "@/api/structs";
+import { generateAuthHeaders } from "@/api/gateway";
 
 async function QuestionsPage() {
   const userId = await hydrateUid();
+
+  const questions: Question[] = await fetch(
+    `${process.env.NEXT_PUBLIC_NGINX}/${process.env.NEXT_PUBLIC_QUESTION_SERVICE}/questions`,
+    {
+      method: "GET",
+      headers: generateAuthHeaders(),
+    },
+  ).then((res) => res.json());
+
   return (
     <UserInfoProvider userid={userId}>
       <QuestionFilterProvider>
         <Matchmaking></Matchmaking>
-        <QuestionList></QuestionList>
+        <QuestionList questions={questions}></QuestionList>
       </QuestionFilterProvider>
     </UserInfoProvider>
   );

peerprep/components/questionpage/QuestionCard.tsx

@@ -5,7 +5,7 @@ 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 DOMPurify from "dompurify";
+import DOMPurify from "isomorphic-dompurify";
 
 type QuestionCardProps = {
   question: Question;
@@ -16,10 +16,11 @@ const QuestionCard: React.FC<QuestionCardProps> = ({ question }) => {
   const handleDelete = async () => {
     if (
       confirm(
-        `Are you sure you want to delete ${question.title}? (ID: ${question.id}) `
+        `Are you sure you want to delete ${question.title}? (ID: ${question.id}) `,
       )
     ) {
       const status = await deleteQuestion(question.id);
+      router.refresh();
       if (status.error) {
         console.log("Failed to delete question.");
         console.log(`Code ${status.status}:  ${status.error}`);
@@ -58,7 +59,7 @@ const QuestionCard: React.FC<QuestionCardProps> = ({ question }) => {
           Difficulty:{" "}
           <span
             className={`capitalize font-bold ${getDifficultyColor(
-              question.difficulty
+              question.difficulty,
             )}`}
           >
             {Difficulty[question.difficulty]}

peerprep/components/questionpage/QuestionList.tsx

@@ -1,46 +1,28 @@
 "use client";
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import QuestionCard from "./QuestionCard";
-import { Question, Difficulty, isError } from "@/api/structs";
+import { Difficulty, Question } from "@/api/structs";
 import PeerprepDropdown from "../shared/PeerprepDropdown";
 import PeerprepSearchBar from "../shared/PeerprepSearchBar";
 import { useQuestionFilter } from "@/contexts/QuestionFilterContext";
+
+type Props = {
+  questions: Question[];
+};
+
 // TODO make multiple select for topics at least
-const QuestionList: React.FC = () => {
-  const [questions, setQuestions] = useState<Question[]>([]);
-  const [loading, setLoading] = useState(true);
+const QuestionList = ({ questions }: Props) => {
   const [searchFilter, setSearchFilter] = useState<string>("");
   const [difficultyFilter, setDifficultyFilter] = useState<string>(
-    Difficulty.All
+    Difficulty.All,
   );
   const [topicFilter, setTopicFilter] = useState<string>("all");
-
   const { topicList, setTopicList } = useQuestionFilter();
 
-  useEffect(() => {
-    const fetchQuestions = async () => {
-      const payload = await fetch(`/api/internal/questions`).then((res) =>
-        res.json()
-      );
-      // uh
-      if (isError(payload)) {
-        // should also reflect the error
-        return;
-      }
-      const data: Question[] = payload;
-
-      setLoading(false);
-      setQuestions(data);
-
-      // get all present topics in all qns
-      const uniqueTopics = Array.from(
-        new Set(data.flatMap((question) => question.topicTags))
-      ).sort();
-      setTopicList(["all", ...uniqueTopics]);
-    };
-
-    fetchQuestions();
-  }, []);
+  const uniqueTopics = Array.from(
+    new Set(questions.flatMap((question) => question.topicTags) ?? []),
+  );
+  setTopicList(["all", ...uniqueTopics]);
 
   const filteredQuestions = questions.filter((question) => {
     const matchesDifficulty =
@@ -89,15 +71,11 @@ const QuestionList: React.FC = () => {
         />
       </div>
 
-      {loading ? (
-        <p>Loading questions...</p>
-      ) : (
-        <div>
-          {sortedQuestions.map((question) => (
-            <QuestionCard key={question.id} question={question} />
-          ))}
-        </div>
-      )}
+      <div>
+        {sortedQuestions.map((question) => (
+          <QuestionCard key={question.id} question={question} />
+        ))}
+      </div>
     </div>
   );
 };