Add stub for user context and request time

Author: alvinlim277

peerprep/app/questions/page.tsx

@@ -2,13 +2,16 @@ import React from "react";
 import QuestionList from "@/components/questionpage/QuestionList";
 import Matchmaking from "@/components/questionpage/Matchmaking";
 import { QuestionFilterProvider } from "@/contexts/QuestionFilterContext";
+import { UserInfoProvider } from "@/contexts/UserInfoContext";
 
 const QuestionsPage = () => {
   return (
-    <QuestionFilterProvider>
-      <Matchmaking></Matchmaking>
-      <QuestionList></QuestionList>
-    </QuestionFilterProvider>
+    <UserInfoProvider>
+      <QuestionFilterProvider>
+        <Matchmaking></Matchmaking>
+        <QuestionList></QuestionList>
+      </QuestionFilterProvider>
+    </UserInfoProvider>
   );
 };
 

peerprep/components/questionpage/Matchmaking.tsx

@@ -3,7 +3,28 @@ import React, { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import PeerprepButton from "../shared/PeerprepButton";
 import { useQuestionFilter } from "@/contexts/QuestionFilterContext";
-const QUERY_INTERVAL_MILLISECONDS = 3000;
+import { useUserInfo } from "@/contexts/UserInfoContext";
+
+const QUERY_INTERVAL_MILLISECONDS = 2000;
+
+const getMatchRequestTime = (): string => {
+  const now = new Date();
+  const options: Intl.DateTimeFormatOptions = {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: false,
+  };
+
+  const formattedDate = now.toLocaleString("en-CA", options); // gives YYYY-MM-DD, HH:mm:ss
+  const finalDate = formattedDate.replace(",", "").replace(/:/g, "-");
+
+  return finalDate;
+};
+
 const usePeriodicCallback = (
   callback: () => void,
   intervalTime: number,
@@ -22,13 +43,16 @@ const Matchmaking = () => {
   const router = useRouter();
   const [isMatching, setIsMatching] = useState(false);
   const { difficulty, topics } = useQuestionFilter();
+  const { userid } = useUserInfo();
 
   const handleMatch = () => {
     if (!isMatching) {
       setIsMatching(true);
       console.log("Match attempted");
       console.log("Selected Difficulty:", difficulty);
       console.log("Selected Topics:", topics);
+      console.debug("Request time: ", getMatchRequestTime());
+      console.debug("User id: ", userid);
     } else {
       setIsMatching(false);
       console.debug("User stopped matching");
@@ -46,13 +70,18 @@ const Matchmaking = () => {
 
   return (
     // TODO: move this to some admin panel or something
-    <div className="p-4 space-x-4">
+    <div className="p-4 flex flex-row items-center space-x-4">
       <PeerprepButton onClick={() => router.push(`questions/new`)}>
         Add Question
       </PeerprepButton>
-      <PeerprepButton onClick={handleMatch}>
-        {isMatching ? "Cancel Match" : "Find Match"}
-      </PeerprepButton>
+      <div className="flex flex-row items-center space-x-4">
+        <PeerprepButton onClick={handleMatch}>
+          {isMatching ? "Cancel Match" : "Find Match"}
+        </PeerprepButton>
+        {isMatching && (
+          <div className="w-5 h-5 bg-difficulty-hard rounded-full ml-2" />
+        )}
+      </div>
     </div>
   );
 };

peerprep/contexts/UserInfoContext.tsx

@@ -1,2 +1,34 @@
 // maybe store  SAFE user info and wrap the whole damn app in it
 // username, userid?, userstate (matching, idle, inmenu)
+
+"use client";
+import React, { createContext, useContext, useState, ReactNode } from "react";
+
+interface UserInfoContextType {
+  userid: string;
+  setUserid: (userid: string) => void;
+}
+
+const UserInfoContext = createContext<UserInfoContextType | undefined>(
+  undefined
+);
+
+export const UserInfoProvider: React.FC<{ children: ReactNode }> = ({
+  children,
+}) => {
+  const [userid, setUserid] = useState<string>("dummy-user");
+
+  return (
+    <UserInfoContext.Provider value={{ userid, setUserid }}>
+      {children}
+    </UserInfoContext.Provider>
+  );
+};
+
+export const useUserInfo = (): UserInfoContextType => {
+  const context = useContext(UserInfoContext);
+  if (!context) {
+    throw new Error("useUserInfo must be used within a UserInfoProvider");
+  }
+  return context;
+};