feat: add table matching page, add toasts for everything, mark as

kevinchua6 · kevinchua6 · commit b7563c86f377 · 2023-11-01T21:34:07.000+08:00
complete button
diff --git a/frontend/src/app/admin/portal/page.tsx b/frontend/src/app/admin/portal/page.tsx
@@ -1,23 +1,43 @@
 "use client";
 
+import { fetchAllUsers, fetchIsAdmin, promoteToAdmin } from "@/app/api";
 import Button from "@/app/components/button/Button";
 import useAdmin from "@/app/hooks/useAdmin";
+import { message } from "antd";
 import { useRouter } from "next/navigation";
-import { use, useState } from "react";
+import { use, useEffect, useState } from "react";
 import Select, { MultiValue } from "react-select";
 
 const AdminPortalPage = () => {
   const isAdmin = useAdmin();
   const router = useRouter();
+  const [api, contextHolder] = message.useMessage();
+
+  type User = {
+    uid: string;
+    name: string;
+    imageUrl: string | null;
+    preferredLang: string | null;
+    role: string;
+  };
 
   interface SelectOptionType {
     label: string;
     value: string;
   }
-  const adminOptions: MultiValue<SelectOptionType> = [
-    { label: "Hello", value: "123" },
-    { label: "Hello2", value: "456" },
-  ];
+  const [adminOptions, setAdminOptions] = useState<
+    MultiValue<SelectOptionType>
+  >([]);
+
+  useEffect(() => {
+    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 = (
     selectedOptions: MultiValue<SelectOptionType>,
@@ -35,6 +55,7 @@ const AdminPortalPage = () => {
 
   return (
     <main className="mt-12 flex flex-col items-center justify-center">
+      {contextHolder}
       <h1 className="mb-2 block text-5xl font-bold text-white underline">
         Admin Portal
       </h1>
@@ -58,7 +79,28 @@ const AdminPortalPage = () => {
             classNamePrefix="select"
           />
         </section>
-        <Button className="btn-accent" onClick={() => "todo"}>
+        <Button
+          className="btn-accent"
+          onClick={() => {
+            promoteToAdmin(selectedQnType.map((option) => option.value))
+              .then((res) => {
+                if (res.statusMessage.type.toLowerCase() === "success") {
+                  api.success({
+                    type: "success",
+                    content: "Successfully updated profile!",
+                  });
+                } else {
+                  api.error({
+                    type: "error",
+                    content: "Failed to update profile :(",
+                  });
+                }
+              })
+              .then(() => {
+                setSelectedQnType([]);
+              });
+          }}
+        >
           Grant Access
         </Button>
       </div>
diff --git a/frontend/src/app/api/index.ts b/frontend/src/app/api/index.ts
@@ -53,14 +53,60 @@ export const fetchQuestionDescriptionUrl = async (qnId: string) => {
   );
 };
 
+export const fetchAllQuestionsDoneByUser = async () => {
+  const { payload } = (await FetchAuth.fetch(`${API_URL}/users/activity/`).then(
+    (res) => {
+      res.json();
+    },
+  )) as any;
+  const questionIds = payload.join("-");
+  // console.log({ res });
+  return await FetchAuth.fetch(
+    `${API_URL}/questions/group/${questionIds}`,
+  ).then((res) => {
+    res.json();
+  });
+};
+
 export const fetchAllQuestionsUrl = async () => {
   return await FetchAuth.fetch(`${API_URL}/questions/`).then((res) =>
     res.json(),
   );
 };
 
+export const completeQuestion = async (questionId: string) => {
+  return await FetchAuth.fetch(`${API_URL}/users/activity/`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      questionId,
+    }),
+  }).then((res) => res.json());
+};
+
+export const promoteToAdmin = async (userId: string[]) => {
+  return await FetchAuth.fetch(`${API_URL}/users/admin/update`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      role: "admin",
+      uids: userId,
+    }),
+  }).then((res) => res.json());
+};
+
+export const fetchAllUsers = async () => {
+  return await FetchAuth.fetch(`${API_URL}/users/admin/profiles`).then((res) =>
+    res.json(),
+  );
+};
+
 export const fetchIsAdmin = async () => {
-  return await FetchAuth.fetch(`${API_URL}/users/admin`)
+  return await FetchAuth.fetch(`${API_URL}/users/admin/profiles`)
     .then((res) => res.json())
     .then((res) => {
       return res.statusMessage.type.toLowerCase() === "success";
@@ -95,7 +141,10 @@ export const deleteQuestionUrl = async (questionId: string) => {
 
 interface ProfileResponse {
   payload: Profile;
-  statusMessage: string;
+  statusMessage: {
+    type: "success" | "error";
+    message: string;
+  };
 }
 
 export async function fetchProfileUrl(): Promise<ProfileResponse> {
diff --git a/frontend/src/app/components/matching/MatchingPage.tsx b/frontend/src/app/components/matching/MatchingPage.tsx
@@ -4,6 +4,9 @@ import QueueButton from "../button/QueueButton";
 import { QuestionType } from "../../admin/question/page";
 import { atom, useAtom } from "jotai";
 import { innkeeperWriteAtom } from "@/libs/room-jotai";
+import { fetchAllQuestionsDoneByUser } from "@/app/api";
+import { useQuery } from "@tanstack/react-query";
+import { Skeleton, Table } from "antd";
 
 const sendMatchRequestAtom = atom(
   null,
@@ -91,8 +94,18 @@ const MatchingPage = () => {
     },
   ];
 
+  const {
+    data: allQuestions,
+    isLoading: allQuestionsLoading,
+    refetch: refetchAllQuestions,
+  } = useQuery(["activityQuestions"], () => {
+    return fetchAllQuestionsDoneByUser();
+  });
+
+  console.log({ allQuestions });
+
   return (
-    <main className="flex h-full items-center justify-center">
+    <main className="flex h-full flex-col items-center justify-center">
       <section className="flex items-center gap-4">
         <label>
           <span>Difficulty Setting:</span>
@@ -128,6 +141,18 @@ const MatchingPage = () => {
         </div>
         <QueueButton enterQueue={() => sendMatchRequest(difficulty)} />
       </section>
+      <div className="m-7">
+        <h1 className="mb-2 block text-5xl font-bold text-white underline">
+          Completed Questions
+        </h1>
+        <Table
+          className="mt-4"
+          bordered
+          columns={activityTableColumns}
+          dataSource={allQuestions}
+          pagination={{ position: ["bottomCenter"] }}
+        />
+      </div>
     </main>
   );
 };
diff --git a/frontend/src/app/components/modal/AddQuestionModal.tsx b/frontend/src/app/components/modal/AddQuestionModal.tsx
@@ -7,7 +7,6 @@ import topicsOptions from "@/app/admin/questionTypeData";
 import Button from "../button/Button";
 import { QuestionType } from "@/app/admin/question/page";
 import PreviewModalButton from "./PreviewModalButton";
-import QuestionModal from "./QuestionModal";
 
 export interface SelectOptionType {
   label: string;
diff --git a/frontend/src/app/components/modal/EditQuestionModal.tsx b/frontend/src/app/components/modal/EditQuestionModal.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import Select, { MultiValue } from "react-select";
 import { message } from "antd";
 import { useMutation } from "@tanstack/react-query";
-import { createQuestionUrl } from "@/app/api";
+import { createQuestionUrl, updateQuestionUrl } from "@/app/api";
 import topicsOptions from "@/app/admin/questionTypeData";
 import { QuestionType } from "@/app/admin/question/page";
 
@@ -57,8 +57,8 @@ const EditQuestionModal = ({
     }
   };
 
-  const createQuestionMutation = useMutation(
-    async (newQuestion: QuestionType) => createQuestionUrl(newQuestion),
+  const editQuestionMutation = useMutation(
+    async (newQuestion: QuestionType) => updateQuestionUrl(newQuestion),
     {
       onSuccess: () => {
         closeModal("edit_modal");
@@ -88,14 +88,14 @@ const EditQuestionModal = ({
       (formElements.namedItem("title") as HTMLInputElement)?.value || "";
 
     const submissionData = {
+      _id: question?._id ?? "",
       title: titleValue,
       difficulty: difficulty,
       tags: selectedTypes,
       description: e.currentTarget.description.value,
     };
 
-    console.log("Form Submission Data:", submissionData);
-    createQuestionMutation.mutate(submissionData);
+    editQuestionMutation.mutate(submissionData);
   };
 
   return (
diff --git a/frontend/src/app/components/status-bar/StatusBar.tsx b/frontend/src/app/components/status-bar/StatusBar.tsx
@@ -1,15 +1,17 @@
-import { executeCode } from "@/app/api";
+import { completeQuestion, executeCode } from "@/app/api";
 import { UserState } from "@/libs/innkeeper-api-types";
 import {
   codeLangAtom,
   codeMirrorValueAtom,
   innkeeperWriteAtom,
   isQuestionModalOpenAtom,
+  questionIdAtom,
   resultAtom,
   userStatesAtom,
 } from "@/libs/room-jotai";
 import { atom, useAtomValue, useSetAtom } from "jotai";
 import Button from "../button/Button";
+import { message } from "antd";
 import UserStateBadge from "./UserStatusBadge";
 
 interface StatusBarProps {
@@ -30,19 +32,41 @@ const triggerExitRoomRequestAtom = atom(null, (get, set) => {
 const StatusBar = ({ exitMethod }: StatusBarProps) => {
   const code = useAtomValue(codeMirrorValueAtom);
   const userStates = useAtomValue(userStatesAtom);
+  const questionId = useAtomValue(questionIdAtom);
   const callExecution = useSetAtom(triggerExecutionRequestAtom);
   const callExitRoom = useSetAtom(triggerExitRoomRequestAtom);
   const setQuestionModalOpen = useSetAtom(isQuestionModalOpenAtom);
+  const [api, contextHolder] = message.useMessage();
 
   return (
     <footer className="fixed bottom-0 left-0 flex w-[100svw] items-center justify-between border-black bg-primary px-4 py-2 shadow-sm lg:static lg:w-full lg:px-12">
+      {contextHolder}
       <div className="flex gap-4">
         {userStates &&
           userStates.map((userState: UserState) => (
             <UserStateBadge userState={userState} key={userState.userId} />
           ))}
       </div>
       <div className="flex items-center gap-4">
+        <Button
+          className="btn-outline btn-sm"
+          onClick={() =>
+            questionId &&
+            completeQuestion(questionId).then((res) =>
+              res.statusMessage.type.toLowerCase() === "success"
+                ? api.success({
+                    type: "success",
+                    content: "Successfully completed question!",
+                  })
+                : api.error({
+                    type: "error",
+                    content: "Failure completing question",
+                  }),
+            )
+          }
+          children={<span>Mark As Complete</span>}
+          disabled={!questionId}
+        />
         <Button
           className="btn-success btn-sm"
           onClick={() => setQuestionModalOpen(true)}
diff --git a/frontend/src/app/settings/page.tsx b/frontend/src/app/settings/page.tsx
@@ -4,6 +4,7 @@ import { BiUserCircle } from "@react-icons/all-files/bi/BiUserCircle";
 import { fetchProfileUrl, updateProfileUrl } from "../api";
 import useLogin from "../hooks/useLogin";
 import useAdmin from "../hooks/useAdmin";
+import { message } from "antd";
 
 const SettingPage = () => {
   const user = useLogin();
@@ -20,6 +21,8 @@ const SettingPage = () => {
   //   setName(user?.reloadUserInfo?.displayName ?? null);
   // }, [user]);
 
+  const [api, contextHolder] = message.useMessage();
+
   const [name, setName] = useState<string>("");
   const [preferredLang, setPreferredLang] = useState<string | null>(null);
   const [profileImageUrl, setProfileImageUrl] = useState<string | null>(null);
@@ -35,15 +38,24 @@ const SettingPage = () => {
 
   const onFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    //TODO: submit logic
     updateProfileUrl(name, preferredLang, selectedImage).then((res) => {
-      // setProfile(res.payload);
-      console.log(res);
+      if (res.statusMessage.type.toLowerCase() === "success") {
+        api.success({
+          type: "success",
+          content: "Successfully updated profile!",
+        });
+      } else {
+        api.error({
+          type: "error",
+          content: "Failed to update profile :(",
+        });
+      }
     });
   };
 
   return (
     <main className="flex flex-col items-center gap-4 p-12">
+      {contextHolder}
       <h1 className="text-5xl font-bold text-white underline">User Profile</h1>
       <form
         className="flex flex-col justify-center gap-8 bg-secondary p-12"
