fix: fix bugs and add noti on queue timeout

Author: elroygohjy

frontend/src/app/components/button/QueueButton.tsx

@@ -3,11 +3,13 @@ import { useState } from "react";
 import useAccurateInterval from "../../hooks/useAccurateInterval";
 import Button from "./Button";
 import { RxCross1 } from "react-icons/rx";
-import { innkeeperWriteAtom } from "@/libs/room-jotai";
+import { innkeeperWriteAtom, isQueuingAtom } from "@/libs/room-jotai";
 import { atom, useAtom, useSetAtom } from "jotai";
+import { notification } from "antd";
 
 interface QueueButtonProps {
   enterQueue: () => void;
+  selectedDifficulty: "EASY" | "MEDIUM" | "HARD";
 }
 
 const triggerLeaveQueueAtom = atom(null, (get, set) => {
@@ -17,15 +19,32 @@ const triggerLeaveQueueAtom = atom(null, (get, set) => {
   });
 });
 
-const QueueButton = ({ enterQueue }: QueueButtonProps) => {
+const QueueButton = ({ enterQueue, selectedDifficulty }: QueueButtonProps) => {
   const [time, setTime] = useState(0);
   const [isStarted, setIsStarted] = useState(false);
   const [_, handleLeaveQueue] = useAtom(triggerLeaveQueueAtom);
+  const setIsQueueing = useSetAtom(isQueuingAtom);
+
+  const [api, contextHolder] = notification.useNotification();
+
+  const openNotification = () => {
+    api.error({
+      message: `Match not Found`,
+      description: (
+        <span>
+          There appears to be no match for <b>{selectedDifficulty}</b> at this
+          time. Please try again later or with another difficulty.
+        </span>
+      ),
+      placement: "top",
+    });
+  };
 
   const handleClick = () => {
     setTime(0);
     if (isStarted) {
       handleLeaveQueue();
+      setIsQueueing(false);
     } else {
       enterQueue();
     }
@@ -40,6 +59,8 @@ const QueueButton = ({ enterQueue }: QueueButtonProps) => {
       } else {
         handleLeaveQueue();
         setIsStarted(false);
+        setIsQueueing(false);
+        openNotification();
       }
     },
     isStarted ? 1000 : null,
@@ -56,6 +77,7 @@ const QueueButton = ({ enterQueue }: QueueButtonProps) => {
 
   return (
     <div>
+      {contextHolder}
       <Button
         className={`${isStarted ? "btn-accent" : "btn-success"} w-48`}
         onClick={handleClick}

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

@@ -3,10 +3,10 @@ import { useState } from "react";
 import QueueButton from "../button/QueueButton";
 import { QuestionType } from "../../admin/question/page";
 import { atom, useAtom } from "jotai";
-import { innkeeperWriteAtom } from "@/libs/room-jotai";
+import { innkeeperWriteAtom, isQueuingAtom } from "@/libs/room-jotai";
 import { fetchAllQuestionsDoneByUser } from "@/app/api";
 import { useQuery } from "@tanstack/react-query";
-import { Skeleton, Table } from "antd";
+import { Skeleton, Table, notification } from "antd";
 
 const sendMatchRequestAtom = atom(
   null,
@@ -23,9 +23,17 @@ const MatchingPage = () => {
     questionDifficulty: "EASY" | "MEDIUM" | "HARD",
   ) => void = useAtom(sendMatchRequestAtom)[1];
 
+  const [isQueueing, setIsQueueing] = useAtom(isQueuingAtom);
+
   const [difficulty, setDifficulty] = useState<"EASY" | "MEDIUM" | "HARD">(
     "EASY",
   );
+
+  const handleChangeDiff = (difficulty: "EASY" | "MEDIUM" | "HARD") => {
+    if (!isQueueing) {
+      setDifficulty(difficulty);
+    }
+  };
   const activityTableColumns: any = [
     {
       title: "Question",
@@ -105,55 +113,63 @@ const MatchingPage = () => {
   console.log({ allQuestions });
 
   return (
-    <main className="flex h-full flex-col items-center justify-center">
-      <section className="flex items-center gap-4">
-        <label>
-          <span>Difficulty Setting:</span>
-        </label>
-        <div className="join">
-          <button
-            type="button"
-            className={`btn btn-primary join-item text-white ${
-              difficulty == "EASY" && "btn-success"
-            }`}
-            onClick={() => setDifficulty("EASY")}
-          >
-            Easy
-          </button>
-          <button
-            type="button"
-            className={`btn btn-primary join-item text-white ${
-              difficulty == "MEDIUM" && "btn-warning"
-            }`}
-            onClick={() => setDifficulty("MEDIUM")}
-          >
-            Medium
-          </button>
-          <button
-            type="button"
-            className={`btn btn-primary join-item text-white ${
-              difficulty == "HARD" && "btn-error"
-            }`}
-            onClick={() => setDifficulty("HARD")}
-          >
-            Hard
-          </button>
+    <>
+      <main className="flex h-full flex-col items-center justify-center">
+        <section className="flex items-center gap-4">
+          <label>
+            <span>Difficulty Setting:</span>
+          </label>
+          <div className="join">
+            <button
+              type="button"
+              className={`btn btn-primary join-item text-white ${
+                difficulty == "EASY" && "btn-success"
+              }`}
+              onClick={() => handleChangeDiff("EASY")}
+            >
+              Easy
+            </button>
+            <button
+              type="button"
+              className={`btn btn-primary join-item text-white ${
+                difficulty == "MEDIUM" && "btn-warning"
+              }`}
+              onClick={() => handleChangeDiff("MEDIUM")}
+            >
+              Medium
+            </button>
+            <button
+              type="button"
+              className={`btn btn-primary join-item text-white ${
+                difficulty == "HARD" && "btn-error"
+              }`}
+              onClick={() => handleChangeDiff("HARD")}
+            >
+              Hard
+            </button>
+          </div>
+          <QueueButton
+            enterQueue={() => {
+              setIsQueueing(true);
+              sendMatchRequest(difficulty);
+            }}
+            selectedDifficulty={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 as any}
+            pagination={{ position: ["bottomCenter"] }}
+          />
         </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 as any}
-          pagination={{ position: ["bottomCenter"] }}
-        />
-      </div>
-    </main>
+      </main>
+    </>
   );
 };
 

frontend/src/libs/room-jotai.ts

@@ -12,6 +12,7 @@ export const codeLangAtom = atom("python");
 export const socketAtom = atom<InnkeeperSocket | null>(null);
 export const isConnectedAtom = atom(false);
 export const isQuestionModalOpenAtom = atom(false);
+export const isQueuingAtom = atom(false);
 
 /**
  * Note that the server only supports unmatched or matched, closed is a frontend