Remove CheatPanel component and add useStateMachine hook

Author: rickkoh

frontend/src/app/dashboard/_components/FindMatch/CheatPanel.tsx

@@ -3,7 +3,6 @@ import { FindMatchProvider } from "@/contexts/FindMatchContext";
 import ControlButton from "./ControlButton";
 import ConfigurationPanel from "./ConfigurationPanel";
 import ConfirmationDialog from "./ConfirmationDialog";
-// import CheatPanel from "./CheatPanel";
 import { getQuestionCategories } from "@/services/questionService";
 import { DifficultyEnum } from "@/types/Question";
 import { getCurrentUser } from "@/services/userService";
@@ -32,7 +31,6 @@ export default async function FindMatchButton() {
       socketUrl={`ws://localhost:4000/match`}
       userId={userData.id}
     >
-      {/* <CheatPanel /> */}
       <ControlButton />
       <ConfigurationPanel
         difficulties={DifficultyEnum.options}

frontend/src/app/dashboard/_components/FindMatch/FindMatchButton.tsx

@@ -0,0 +1,33 @@
+import { useState, useCallback } from "react";
+
+// Define possible states and transitions
+const states = {
+  IDLE: "IDLE",
+  FINDING: "FINDING",
+  FOUND: "FOUND",
+};
+
+const stateTransitions = {
+  [states.IDLE]: [states.FINDING, states.FOUND],
+  [states.FINDING]: [states.IDLE],
+  [states.FOUND]: [states.IDLE],
+};
+
+function useStateMachine() {
+  const [state, setState] = useState(states.IDLE);
+
+  const transition = useCallback(
+    (newState: string) => {
+      if (stateTransitions[state].includes(newState)) {
+        setState(newState);
+      } else {
+        console.warn(`Invalid transition from ${state} to ${newState}`);
+      }
+    },
+    [state]
+  );
+
+  return [state, transition];
+}
+
+export default useStateMachine;