Add stopwatch for matchmaking and default difficulty to easy

Author: alvinlim277

peerprep/app/actions/server_actions.ts

@@ -62,7 +62,7 @@ export async function login(state: FormState, formData: FormData) {
   }
 }
 
-export async function hydrateUid(): Promise<undefined|string> {
+export async function hydrateUid(): Promise<undefined | string> {
   if (!cookies().has("session")) {
     console.log("No session found - triggering switch back to login page.");
     redirect("/auth/login");

peerprep/components/questionpage/Matchmaking.tsx

@@ -4,11 +4,17 @@ import { useRouter } from "next/navigation";
 import PeerprepButton from "../shared/PeerprepButton";
 import { useQuestionFilter } from "@/contexts/QuestionFilterContext";
 import { useUserInfo } from "@/contexts/UserInfoContext";
-import { isError, MatchRequest, MatchResponse } from "@/api/structs";
+import {
+  Difficulty,
+  isError,
+  MatchRequest,
+  MatchResponse,
+} from "@/api/structs";
 import {
   checkMatchStatus,
   findMatch,
 } from "@/app/api/internal/matching/helper";
+import ResettingStopwatch from "../shared/ResettingStopwatch";
 
 const QUERY_INTERVAL_MILLISECONDS = 5000;
 const TIMEOUT_MILLISECONDS = 30000;
@@ -60,6 +66,18 @@ const Matchmaking = () => {
     }
   };
 
+  const getMatchMakingRequest = (): MatchRequest => {
+    const matchRequest: MatchRequest = {
+      userId: userid,
+      // welp, just bandaid default easy
+      difficulty: difficulty === Difficulty.All ? Difficulty.Easy : difficulty,
+      topicTags: topics,
+      requestTime: getMatchRequestTime(),
+    };
+
+    return matchRequest;
+  };
+
   const handleMatch = async () => {
     if (!isMatching) {
       setIsMatching(true);
@@ -71,12 +89,7 @@ const Matchmaking = () => {
       }, TIMEOUT_MILLISECONDS);
 
       // assemble the match request
-      const matchRequest: MatchRequest = {
-        userId: userid,
-        difficulty: difficulty,
-        topicTags: topics,
-        requestTime: getMatchRequestTime(),
-      };
+      const matchRequest = getMatchMakingRequest();
       console.log("Match attempted");
       console.debug(matchRequest);
 
@@ -126,9 +139,7 @@ const Matchmaking = () => {
         <PeerprepButton onClick={handleMatch}>
           {isMatching ? "Cancel Match" : "Find Match"}
         </PeerprepButton>
-        {isMatching && (
-          <div className="w-3 h-3 bg-difficulty-hard rounded-full ml-2" />
-        )}
+        {isMatching && <ResettingStopwatch isActive={isMatching} />}
       </div>
     </div>
   );

peerprep/components/shared/ResettingStopwatch.tsx

@@ -0,0 +1,38 @@
+import React, { useState, useEffect } from "react";
+
+interface ResettingStopwatchProps {
+  isActive: boolean;
+}
+
+// pass isActive from parent component
+//
+const ResettingStopwatch: React.FC<ResettingStopwatchProps> = ({
+  isActive,
+}) => {
+  const [elapsedTime, setElapsedTime] = useState<number>(0);
+
+  useEffect(() => {
+    let interval: NodeJS.Timeout | null = null;
+
+    if (isActive) {
+      interval = setInterval(() => {
+        setElapsedTime((prevTime) => prevTime + 1);
+      }, 1000);
+    }
+
+    return () => {
+      if (interval) clearInterval(interval);
+      setElapsedTime(0);
+    };
+  }, [isActive]);
+
+  const formatTime = (time: number) => {
+    const minutes = Math.floor(time / 60);
+    const seconds = time % 60;
+    return `${minutes}:${seconds < 10 ? "0" : ""}${seconds}`;
+  };
+
+  return <div>{formatTime(elapsedTime)}</div>;
+};
+
+export default ResettingStopwatch;

peerprep/contexts/QuestionFilterContext.tsx

@@ -18,6 +18,7 @@ export const QuestionFilterProvider: React.FC<{ children: ReactNode }> = ({
 }) => {
   const [difficulty, setDifficulty] = useState<string>(Difficulty.All); // default to all
   const [topics, setTopics] = useState<string[]>(["all"]); // I guess default set this too the whole list of topics from questionlist
+  //can also consider moving all the uniqu topics here?
 
   return (
     <QuestionFilterContext.Provider

peerprep/middleware.ts

@@ -15,7 +15,7 @@ function isSession(request: NextRequest): boolean {
 }
 
 export function middleware(request: NextRequest) {
-  // // UNCOMMENT AND ADD TO ENV IF JUST TESTING FRONTEND STUFF
+  // UNCOMMENT AND ADD TO ENV IF JUST TESTING FRONTEND STUFF
   // if (process.env.NEXT_BYPASS_LOGIN === "yesplease") {
   //   return NextResponse.next();
   // }