Merge pull request #167 from PeerPrep/elroy-bug-fixes

fix: fix bugs

Author: elroygohjy

frontend/src/app/admin/portal/page.tsx

@@ -1,16 +1,15 @@
 "use client";
 
-import { fetchAllUsers, fetchIsAdmin, promoteToAdmin } from "@/app/api";
+import { fetchAllUsers, promoteToAdmin } from "@/app/api";
 import Button from "@/app/components/button/Button";
 import useAdmin from "@/app/hooks/useAdmin";
+import LoadingPage from "@/app/loading";
 import { message } from "antd";
-import { useRouter } from "next/navigation";
-import { use, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import Select, { MultiValue } from "react-select";
 
 const AdminPortalPage = () => {
-  const isAdmin = useAdmin();
-  const router = useRouter();
+  const { isAdmin, isLoading } = useAdmin();
   const [api, contextHolder] = message.useMessage();
 
   type User = {
@@ -30,13 +29,15 @@ const AdminPortalPage = () => {
   >([]);
 
   useEffect(() => {
-    fetchAllUsers().then((allUsers) => {
-      setAdminOptions(
-        allUsers.payload
-          .filter((user: User) => user.role === "user")
-          .map((user: User) => ({ label: user.name, value: user.uid })),
-      );
-    });
+    if (isAdmin) {
+      fetchAllUsers().then((allUsers) => {
+        setAdminOptions(
+          allUsers.payload
+            .filter((user: User) => user.role === "user")
+            .map((user: User) => ({ label: user.name, value: user.uid })),
+        );
+      });
+    }
   }, [api, contextHolder]);
 
   const handleSelectChange = (
@@ -49,8 +50,20 @@ const AdminPortalPage = () => {
     MultiValue<SelectOptionType>
   >([]);
 
+  if (isLoading) {
+    return <LoadingPage />;
+  }
+
   if (!isAdmin) {
-    router.push("/");
+    return (
+      <div className="flex h-full items-center justify-center">
+        <div className="flex items-center">
+          <h1 className="text-6xl text-white">401</h1>
+          <div className="divider divider-horizontal h-24"></div>
+          <h2 className="text-xl text-white">Unauthorized</h2>
+        </div>
+      </div>
+    );
   }
 
   return (

frontend/src/app/admin/question/page.tsx

@@ -30,6 +30,7 @@ import { onAuthStateChanged } from "firebase/auth";
 import useLogin from "@/app/hooks/useLogin";
 import { useRouter } from "next/navigation";
 import useAdmin from "@/app/hooks/useAdmin";
+import LoadingPage from "@/app/loading";
 
 export interface QuestionType {
   _id?: string;
@@ -58,12 +59,7 @@ const Table = dynamic(() => import("antd/lib").then((m) => m.Table), {
 });
 
 const QuestionPage = () => {
-  const router = useRouter();
-  const isAdmin = useAdmin();
-
-  if (!isAdmin) {
-    router.push("/");
-  }
+  const { isAdmin, isLoading } = useAdmin();
 
   const user = useLogin();
   const [api, contextHolder] = message.useMessage();
@@ -265,6 +261,22 @@ const QuestionPage = () => {
     );
   };
 
+  if (isLoading) {
+    return <LoadingPage />;
+  }
+
+  if (!isAdmin) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <div className="flex items-center">
+          <h1 className="text-6xl text-white">401</h1>
+          <div className="divider divider-horizontal h-24"></div>
+          <h2 className="text-xl text-white">Unauthorized</h2>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <>
       <EditQuestionModal

frontend/src/app/components/modal/QuestionModal.tsx

@@ -34,27 +34,32 @@ const QuestionModal = () => {
 
   const [questions, setQuestions] = useState<QuestionType[]>([]);
   const setCollabQuestion = useSetAtom(triggerQuestionIdUpdateRequestAtom);
+  const questionDifficulty = useAtomValue(
+    questionDifficultyAtom,
+  )?.toLowerCase();
+
   useEffect(() => {
     fetchAllQuestionsUrl().then((res) => {
-      setQuestions(res.payload);
+      setQuestions(
+        res.payload.filter((question: any) => {
+          const curQnDifficulty = question.difficulty.toLowerCase();
+          return curQnDifficulty === questionDifficulty;
+        }),
+      );
     });
   }, []);
 
-  const questionDifficulty = useAtomValue(
-    questionDifficultyAtom,
-  )?.toLowerCase();
+  // setQuestions(
+  //   questions.filter(
+  //   }),
+  // );
 
-  const options: SelectedOptionType[] = questions
-    .filter((question) => {
-      const curQnDifficulty = question.difficulty.toLowerCase();
-      return curQnDifficulty === questionDifficulty;
-    })
-    .map((question, i) => {
-      return {
-        label: question.title as string,
-        value: i,
-      };
-    });
+  const options: SelectedOptionType[] = questions.map((question, i) => {
+    return {
+      label: question.title as string,
+      value: i,
+    };
+  });
 
   let color;
 

frontend/src/app/components/navbar/Navbar.tsx

@@ -24,7 +24,7 @@ const Navbar = () => {
   const [user, setUser] = useState<User | null>(null);
   const [profileImageUrl, setProfileImageUrl] = useState<string | null>(null);
   const [name, setName] = useState<string>("");
-  const isAdmin = useAdmin();
+  const { isAdmin, isLoading } = useAdmin();
 
   useEffect(() => {
     fetchProfileUrl().then((res) => {

frontend/src/app/hooks/useAdmin.tsx

@@ -2,7 +2,6 @@
 import { useEffect, useState } from "react";
 import { getAuth, onAuthStateChanged } from "firebase/auth";
 import { auth } from "../../libs/firebase-config";
-import { useRouter } from "next/navigation";
 import { fetchIsAdmin } from "../api";
 
 export interface Profile {
@@ -14,21 +13,24 @@ export interface Profile {
 }
 
 const useAdmin = () => {
-  const [isAdmin, setIsAdmin] = useState<boolean>(true);
+  const [isAdmin, setIsAdmin] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(true); // Add isLoading state
+
   useEffect(() => {
     const unsubscribe = onAuthStateChanged(auth, async (authUser) => {
       if (authUser) {
         // If a user is authenticated, update the user state
         const isAdmin = await fetchIsAdmin();
         setIsAdmin(isAdmin);
       }
+      setIsLoading(false); // Set isLoading to false
     });
 
     // Clean up the listener when the component unmounts
     return () => unsubscribe();
   }, []);
 
-  return isAdmin;
+  return { isAdmin, isLoading }; // Return both isAdmin and isLoading
 };
 
 export default useAdmin;