Set up internal API, verify local testing and fix question filter bug

Author: alvinlim277

peerprep/.env.example

@@ -1,5 +1,7 @@
 NEXT_PUBLIC_QUESTION_SERVICE=
 NEXT_PUBLIC_USER_SERVICE=
+NEXT_PUBLIC_MATCHING_SERVICE=
+NEXT_PUBLIC_STORAGE_BLOB=
 # note NGINX will currently point to itself.
 NEXT_PUBLIC_NGINX=
 DEV_ENV=

peerprep/api/structs.ts

@@ -48,6 +48,24 @@ export interface SigninResponse {
   data: UserData;
 }
 
+export interface MatchRequest {
+  userId: string;
+  topicTags: string[];
+  difficulty: string;
+  requestTime: string;
+}
+
+export interface MatchData {
+  roomId: string;
+  user1: string;
+  user2: string;
+}
+
+export interface MatchResponse {
+  isMatchFound: boolean;
+  data: MatchData;
+}
+
 // credit - taken from Next.JS Auth tutorial
 export type FormState =
   | {

peerprep/app/api/internal/matching/helper.ts

@@ -0,0 +1,56 @@
+import {
+  MatchData,
+  MatchRequest,
+  MatchResponse,
+  StatusBody,
+} from "@/api/structs";
+
+// helper to be called from client to check storage blob
+export async function checkMatchStatus(
+  userId: string
+): Promise<MatchResponse | StatusBody> {
+  console.debug("In matching helper, checking storage blob:", userId);
+  const res = await fetch(
+    `${process.env.NEXT_PUBLIC_NGINX}/api/internal/matching?uid=${userId}`,
+    {
+      method: "GET",
+    }
+  );
+  if (!res.ok) {
+    return {
+      error: await res.text(),
+      status: res.status,
+    };
+  }
+  const json = (await res.json()) as MatchData;
+  const isMatchFound = true; // TODO differntiate??
+
+  return {
+    isMatchFound,
+    data: json,
+  } as MatchResponse;
+}
+
+export async function findMatch(
+  matchRequest: MatchRequest
+): Promise<StatusBody> {
+  console.debug(
+    "In matching helper, posting match request",
+    JSON.stringify(matchRequest)
+  );
+  const res = await fetch(
+    `${process.env.NEXT_PUBLIC_NGINX}/api/internal/matching`,
+    {
+      method: "POST",
+      body: JSON.stringify(matchRequest),
+    }
+  );
+  if (!res.ok) {
+    return {
+      error: await res.text(),
+      status: res.status,
+    };
+  }
+  const json = await res.json();
+  return json as StatusBody;
+}

peerprep/app/api/internal/matching/route.ts

@@ -0,0 +1,70 @@
+import { generateAuthHeaders, generateJSONHeaders } from "@/api/gateway";
+import { QuestionFullBody } from "@/api/structs";
+import { NextRequest, NextResponse } from "next/server";
+
+// all get request interpreted as getting from storage blob
+export async function GET(request: NextRequest) {
+  const uid = request.nextUrl.searchParams.get("uid"); // Assuming you're passing the userId as a query parameter
+  console.log("in route,", uid);
+  if (!uid) {
+    return NextResponse.json({ error: "User ID is required" }, { status: 400 });
+  }
+
+  try {
+    const response = await fetch(
+      `${process.env.NEXT_PUBLIC_STORAGE_BLOB}/request/${uid}`,
+      {
+        method: "GET",
+        headers: generateAuthHeaders(),
+      }
+    );
+    if (!response.ok) {
+      return NextResponse.json(
+        {
+          error: await response.text(),
+          status: response.status,
+        },
+        { status: response.status }
+      );
+    }
+    return response;
+  } catch (err: any) {
+    return NextResponse.json(
+      { error: err.message, status: 400 },
+      { status: 400 }
+    );
+  }
+}
+
+// for matching stuff all post requests interpreted as posting matchmaking request
+export async function POST(request: NextRequest) {
+  const body = await request.json();
+  try {
+    const response = await fetch(
+      `${process.env.NEXT_PUBLIC_MATCHING_SERVICE}/request`,
+      {
+        method: "POST",
+        body: JSON.stringify(body),
+        headers: generateJSONHeaders(),
+      }
+    );
+    if (response.ok) {
+      return NextResponse.json(
+        { status: response.status },
+        { status: response.status }
+      );
+    }
+    return NextResponse.json(
+      {
+        error: (await response.json())["Error adding question: "],
+        status: response.status,
+      },
+      { status: response.status }
+    );
+  } catch (err: any) {
+    return NextResponse.json(
+      { error: err.message, status: 400 },
+      { status: 400 }
+    );
+  }
+}

peerprep/components/questionpage/Matchmaking.tsx

@@ -1,11 +1,19 @@
 "use client";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 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 {
+  checkMatchStatus,
+  findMatch,
+} from "@/app/api/internal/matching/helper";
+import { match } from "assert";
+import { TIMEOUT } from "dns";
 
-const QUERY_INTERVAL_MILLISECONDS = 2000;
+const QUERY_INTERVAL_MILLISECONDS = 5000;
+const TIMEOUT_MILLISECONDS = 30000;
 
 const getMatchRequestTime = (): string => {
   const now = new Date();
@@ -41,29 +49,58 @@ const usePeriodicCallback = (
 
 const Matchmaking = () => {
   const router = useRouter();
-  const [isMatching, setIsMatching] = useState(false);
+  const [isMatching, setIsMatching] = useState<boolean>(false);
   const { difficulty, topics } = useQuestionFilter();
   const { userid } = useUserInfo();
+  const timeout = useRef<NodeJS.Timeout>();
 
-  const handleMatch = () => {
+  const handleMatch = async () => {
     if (!isMatching) {
+      // start 30s timeout
+      timeout.current = setTimeout(() => {
+        setIsMatching(false);
+        console.log("Match request timed out after 30s");
+      }, TIMEOUT_MILLISECONDS);
+
       setIsMatching(true);
+      const matchRequest: MatchRequest = {
+        userId: userid,
+        difficulty: difficulty,
+        topicTags: topics,
+        requestTime: getMatchRequestTime(),
+      };
       console.log("Match attempted");
-      console.log("Selected Difficulty:", difficulty);
-      console.log("Selected Topics:", topics);
-      console.debug("Request time: ", getMatchRequestTime());
-      console.debug("User id: ", userid);
+      console.debug(matchRequest);
+
+      const status = await findMatch(matchRequest);
+      if (status.error) {
+        console.log("Failed to find match. Cancel matching.");
+        setIsMatching(false);
+        return;
+      }
+      console.log(`Started finding match.`);
     } else {
+      // if user manually stopped it clear timeout
+      if (timeout.current) {
+        clearTimeout(timeout.current);
+      }
+
       setIsMatching(false);
-      console.debug("User stopped matching");
+      console.log("User stopped matching");
     }
-
-    // username as userid?
-    // should probably just use the questionlist selections as params
   };
 
-  const queryResource = () => {
-    console.debug("Querying resource blob for matchmaking status");
+  const queryResource = async () => {
+    const res = await checkMatchStatus(userid);
+    if (isError(res)) {
+      // for now 404 means no match found so dont stop matching on error, let request timeout
+      return;
+    }
+    setIsMatching(false);
+    // TODO: iron out what is in a match response and sync up with collab service rooms
+    const matchRes: MatchResponse = res as MatchResponse;
+    console.log("Match found!");
+    console.debug(matchRes);
   };
 
   usePeriodicCallback(queryResource, QUERY_INTERVAL_MILLISECONDS, isMatching);
@@ -79,7 +116,7 @@ const Matchmaking = () => {
           {isMatching ? "Cancel Match" : "Find Match"}
         </PeerprepButton>
         {isMatching && (
-          <div className="w-5 h-5 bg-difficulty-hard rounded-full ml-2" />
+          <div className="w-3 h-3 bg-difficulty-hard rounded-full ml-2" />
         )}
       </div>
     </div>

peerprep/components/questionpage/QuestionList.tsx

@@ -32,7 +32,7 @@ const QuestionList: React.FC = () => {
       // get all present topics in all qns
       const uniqueTopics = Array.from(
         new Set(data.flatMap((question) => question.topicTags))
-      );
+      ).sort();
       setTopicsList(["all", ...uniqueTopics]);
     };
 
@@ -54,6 +54,20 @@ const QuestionList: React.FC = () => {
 
   const sortedQuestions = filteredQuestions.sort((a, b) => a.id - b.id);
 
+  const handleSetDifficulty = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const diff = e.target.value;
+    setDifficulty(diff);
+  };
+
+  const handleSetTopics = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const topic = e.target.value;
+    if (topic === "all") {
+      setTopics(topicsList);
+    } else {
+      setTopics([topic]);
+    }
+  };
+
   return (
     <div className="flex-grow max-h-screen overflow-y-auto p-4">
       <div className="flex space-x-4 mb-4 items-end">
@@ -65,13 +79,14 @@ const QuestionList: React.FC = () => {
         <PeerprepDropdown
           label="Difficulty"
           value={difficulty}
-          onChange={(e) => setDifficulty(e.target.value)}
+          onChange={handleSetDifficulty}
           options={Object.keys(Difficulty).filter((key) => isNaN(Number(key)))}
         />
         <PeerprepDropdown
           label="Topics"
+          // coincidentally "all" is at the top of the list so the display works out...dumb luck!
           value={topics[0]}
-          onChange={(e) => setTopics([e.target.value])}
+          onChange={handleSetTopics}
           options={topicsList}
         />
       </div>

peerprep/contexts/UserInfoContext.tsx

@@ -1,4 +1,4 @@
-// maybe store  SAFE user info and wrap the whole damn app in it
+// maybe store  SAFE user info and wrap the relevant client components in it (like titlebar? matchmaking?)
 // username, userid?, userstate (matching, idle, inmenu)
 
 "use client";
@@ -16,7 +16,7 @@ const UserInfoContext = createContext<UserInfoContextType | undefined>(
 export const UserInfoProvider: React.FC<{ children: ReactNode }> = ({
   children,
 }) => {
-  const [userid, setUserid] = useState<string>("dummy-user");
+  const [userid, setUserid] = useState<string>("test-user");
 
   return (
     <UserInfoContext.Provider value={{ userid, setUserid }}>