Merge pull request #155 from PeerPrep/kevin/table

Kevin/table

Author: sivayogasubramanian

frontend/src/app/api/index.ts

@@ -54,18 +54,19 @@ export const fetchQuestionDescriptionUrl = async (qnId: string) => {
 };
 
 export const fetchAllQuestionsDoneByUser = async () => {
-  const { payload } = (await FetchAuth.fetch(`${API_URL}/users/activity/`).then(
+  const { payload } = await FetchAuth.fetch(`${API_URL}/users/activity/`).then(
     (res) => {
-      res.json();
+      return res.json();
     },
-  )) as any;
-  const questionIds = payload.join("-");
+  );
+
+  const questionIds = payload.map((ele: any) => ele.questionId).join("-");
+  console.log({ questionIds });
   // console.log({ res });
-  return await FetchAuth.fetch(
+  const questions = await FetchAuth.fetch(
     `${API_URL}/questions/group/${questionIds}`,
-  ).then((res) => {
-    res.json();
-  });
+  ).then((res) => res.json());
+  return questions.payload.map((k: any, i: any) => ({ ...k, ...payload[i] }));
 };
 
 export const fetchAllQuestionsUrl = async () => {

frontend/src/app/components/matching/MatchingPage.tsx

@@ -7,6 +7,8 @@ import { innkeeperWriteAtom, isQueuingAtom } from "@/libs/room-jotai";
 import { fetchAllQuestionsDoneByUser } from "@/app/api";
 import { useQuery } from "@tanstack/react-query";
 import { Skeleton, Table, notification } from "antd";
+import { EyeOutlined } from "@ant-design/icons";
+import ReactMarkdown from "react-markdown";
 
 const sendMatchRequestAtom = atom(
   null,
@@ -19,6 +21,8 @@ const sendMatchRequestAtom = atom(
 );
 
 const MatchingPage = () => {
+  const [currQn, setCurrQn] = useState<QuestionType | null>(null);
+
   const sendMatchRequest: (
     questionDifficulty: "EASY" | "MEDIUM" | "HARD",
   ) => void = useAtom(sendMatchRequestAtom)[1];
@@ -96,12 +100,37 @@ const MatchingPage = () => {
     },
     {
       title: "Submitted Date",
-      dataIndex: "date",
+      dataIndex: "submitted",
       sortDirections: ["descend"],
-      render: (date: string) => <>{date}</>,
+      render: (date: string) => {
+        return new Date(date).toLocaleDateString();
+      },
+    },
+    {
+      title: "Actions",
+      dataIndex: "actions",
+      align: "center",
+      width: 10,
+      render: (text: string, record: QuestionType, index: number) => (
+        <div className="flex justify-center gap-2">
+          <EyeOutlined
+            className="p-2 text-xl hover:cursor-pointer hover:rounded-full hover:bg-primary-focus"
+            onClick={() => {
+              onClickModal("my_modal_2");
+              setCurrQn(record);
+            }}
+          />
+        </div>
+      ),
     },
   ];
 
+  const onClickModal = (modalId: string) => {
+    if (document) {
+      (document.getElementById(modalId) as HTMLFormElement).showModal();
+    }
+  };
+
   const {
     data: allQuestions,
     isLoading: allQuestionsLoading,
@@ -115,6 +144,18 @@ const MatchingPage = () => {
   return (
     <>
       <main className="flex h-full flex-col items-center justify-center">
+        <dialog id="my_modal_2" className="modal">
+          <div className="modal-box max-w-4xl p-6">
+            <form method="dialog" className="pb">
+              <button className="btn btn-circle btn-ghost btn-sm absolute right-2 top-2">
+                ✕
+              </button>
+            </form>
+            <ReactMarkdown className="prose min-w-[40svh] max-w-none rounded-b-md bg-secondary p-6">
+              {currQn?.description || ""}
+            </ReactMarkdown>
+          </div>
+        </dialog>
         <section className="flex items-center gap-4">
           <label>
             <span>Difficulty Setting:</span>

frontend/src/app/settings/page.tsx

@@ -10,17 +10,25 @@ import {
 import useLogin from "../hooks/useLogin";
 import { message } from "antd";
 import { useMutation } from "@tanstack/react-query";
+import { getAuth, signOut } from "firebase/auth";
+import { useRouter } from "next/navigation";
 
 const SettingPage = () => {
   const user = useLogin();
+  const router = useRouter();
 
   const deleteProfileMutation = useMutation(async () => deleteProfileUrl(), {
     onSuccess: () => {
       closeModal("delete_modal");
       api.open({
         type: "success",
-        content: "Successfully deleted profile!",
+        content: "Successfully deleted profile! Logging you out...",
       });
+      const auth = getAuth();
+      setTimeout(() => {
+        signOut(auth);
+        router.push("/");
+      }, 2000);
     },
     onError: (e) => {
       api.open({
@@ -55,19 +63,23 @@ const SettingPage = () => {
 
   const onFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    updateProfileUrl(name, preferredLang, selectedImage).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 :(",
-        });
-      }
-    });
+    updateProfileUrl(name, preferredLang, selectedImage)
+      .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(() => {
+        window.location.reload();
+      });
   };
 
   const onEscKeyDown = (e: React.KeyboardEvent<HTMLDialogElement>) => {