Hook up new logic for matching to frontend

Note 2 things:
1. A bug related to incomplete cancellation has surfaced, and
   become more prominent as a user can now match themselves.
   -- Suggested fix is to both send a cancellation signal and
      to do a paranoid check on the User ID attached to the
      match queue - though paranoid check might not be necessary
      because RabbitMQ ensures ordering is kept.
2. Collab Service has yet to implement their side of the change
   fully - in particular, no persistence is performed yet, so
   reconnection is still a problem.

Author: WZWren

peerprep/api/structs.ts

@@ -55,6 +55,10 @@ export interface MatchRequest {
   requestTime: string;
 }
 
+export interface MatchReqInitRes {
+  match_code: string;
+}
+
 export interface MatchData {
   roomId: string;
   user1: string;

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

@@ -3,15 +3,16 @@ import {
   MatchRequest,
   MatchResponse,
   StatusBody,
+  MatchReqInitRes
 } from "@/api/structs";
 
 // helper to be called from client to check storage blob
 export async function checkMatchStatus(
-  userId: string
+  matchHash: string
 ): Promise<MatchResponse | StatusBody> {
-  console.debug("In matching helper, checking storage blob:", userId);
+  console.debug("In matching helper, checking storage blob:", matchHash);
   const res = await fetch(
-    `${process.env.NEXT_PUBLIC_NGINX}/api/internal/matching?uid=${userId}`,
+    `${process.env.NEXT_PUBLIC_NGINX}/api/internal/matching?matchHash=${matchHash}`,
     {
       method: "GET",
     }
@@ -33,7 +34,7 @@ export async function checkMatchStatus(
 
 export async function findMatch(
   matchRequest: MatchRequest
-): Promise<StatusBody> {
+): Promise<StatusBody|MatchReqInitRes> {
   console.debug(
     "In matching helper, posting match request",
     JSON.stringify(matchRequest)
@@ -49,8 +50,8 @@ export async function findMatch(
     return {
       error: await res.text(),
       status: res.status,
-    };
+    } as StatusBody;
   }
   const json = await res.json();
-  return json as StatusBody;
+  return json as MatchReqInitRes;
 }

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

@@ -4,15 +4,15 @@ 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 });
+  const matchHash = request.nextUrl.searchParams.get("matchHash"); // Assuming you're passing the userId as a query parameter
+  console.log("in route,", matchHash);
+  if (!matchHash) {
+    return NextResponse.json({ error: "MatchHash is required" }, { status: 400 });
   }
 
   try {
     const response = await fetch(
-      `${process.env.NEXT_PUBLIC_STORAGE_BLOB}/request/${uid}`,
+      `${process.env.NEXT_PUBLIC_STORAGE_BLOB}/request/${matchHash}`,
       {
         method: "GET",
         headers: generateAuthHeaders(),
@@ -50,7 +50,7 @@ export async function POST(request: NextRequest) {
     );
     if (response.ok) {
       return NextResponse.json(
-        { status: response.status },
+        { match_code: (await response.json()).match_code },
         { status: response.status }
       );
     }

peerprep/app/questions/[question]/[roomID]/page.tsx

@@ -6,13 +6,16 @@ import React from "react";
 import QuestionBlock from "./question";
 
 type Props = {
+  searchParams: {
+    match?: string
+  },
   params: {
     question: string;
     roomID: string;
   };
 };
 
-async function Question({ params }: Props) {
+async function Question({ params, searchParams }: Props) {
   const question = await fetchQuestion(params.question);
 
   return (
@@ -24,6 +27,7 @@ async function Question({ params }: Props) {
           question={question as QnType}
           roomID={params.roomID}
           authToken={getSessionToken()}
+          matchHash={searchParams.match}
         />
       )}
     </div>

peerprep/app/questions/[question]/[roomID]/question.tsx

@@ -13,6 +13,7 @@ interface Props {
   question: Question;
   roomID?: String;
   authToken?: String;
+  matchHash?: String;
 }
 
 interface DifficultyChipProps {
@@ -29,7 +30,7 @@ function DifficultyChip({ diff }: DifficultyChipProps) {
   );
 }
 
-function QuestionBlock({ question, roomID, authToken }: Props) {
+function QuestionBlock({ question, roomID, authToken, matchHash }: Props) {
   const router = useRouter();
 
   const handleDelete = async () => {
@@ -95,6 +96,7 @@ function QuestionBlock({ question, roomID, authToken }: Props) {
           question={question}
           roomID={roomID}
           authToken={authToken}
+          matchHash={matchHash}
         />
       </div>
     </>

peerprep/components/questionpage/CollabEditor.tsx

@@ -48,9 +48,10 @@ interface Props {
   question: Question;
   roomID?: String;
   authToken?: String;
+  matchHash?: String;
 }
 
-export default function CollabEditor({ question, roomID, authToken }: Props) {
+export default function CollabEditor({ question, roomID, authToken, matchHash }: Props) {
   const [theme, setTheme] = useState("terminal");
   const [fontSize, setFontSize] = useState(18);
   const [language, setLanguage] = useState("python");
@@ -86,6 +87,7 @@ export default function CollabEditor({ question, roomID, authToken }: Props) {
       const authMessage = {
         type: "auth",
         token: authToken,
+        matchHash: matchHash // omitted if undefined
       };
       newSocket.send(JSON.stringify(authMessage));
     };

peerprep/components/questionpage/Matchmaking.tsx

@@ -55,6 +55,7 @@ const usePeriodicCallback = (
 const Matchmaking = () => {
   const router = useRouter();
   const [isMatching, setIsMatching] = useState<boolean>(false);
+  const [matchHash, setMatchHash] = useState<string>("");
   const { difficulties, topicList } = useQuestionFilter();
   const [difficultyFilter, setDifficultyFilter] = useState<string>(
     Difficulty.Easy
@@ -86,12 +87,16 @@ const Matchmaking = () => {
     return matchRequest;
   };
 
+  // TODO: Canceling the match should propagate a cancellation signal
+  //       Currently, we can actually match yourself rn due to this change
+  //       This indicates to me that 1 users can match on a cancellation
   const handleMatch = async () => {
     if (!isMatching) {
       setIsMatching(true);
 
       // start 30s timeout
       timeout.current = setTimeout(() => {
+        setMatchHash("");
         setIsMatching(false);
         console.log("Match request timed out after 30s");
       }, TIMEOUT_MILLISECONDS);
@@ -103,22 +108,25 @@ const Matchmaking = () => {
 
       //   send match request
       const status = await findMatch(matchRequest);
-      if (status.error) {
+      if (isError(status)) {
         stopTimer();
         console.log("Failed to find match. Cancel matching.");
+        setMatchHash("");
         setIsMatching(false);
         return;
       }
+      setMatchHash(status.match_code);
       console.log(`Started finding match.`);
     } else {
+      setMatchHash("");
       stopTimer();
       setIsMatching(false);
       console.log("User stopped matching");
     }
   };
 
   const queryResource = async () => {
-    const res = await checkMatchStatus(userid);
+    const res = await checkMatchStatus(matchHash);
     if (isError(res)) {
       // for now 404 means no match found so dont stop matching on error, let request timeout
       return;
@@ -128,17 +136,8 @@ const Matchmaking = () => {
     // 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!");
-    // display in a popup for now
-    // const message = `Room ID: ${matchRes.data.roomId}
-    // User1: ${matchRes.data.user1}
-    // User2: ${matchRes.data.user2}
-    // Question: ${matchRes.data.questionId}
-    // `;
-    const message = "Match found! Redirecting to collab page...";
-    window.alert(message);
-    // redirect to question page
     router.push(
-      `/questions/${matchRes.data.questionId}/${matchRes.data.roomId}`
+      `/questions/${matchRes.data.questionId}/${matchRes.data.roomId}?match=${matchHash}`
     );
   };
 
@@ -151,8 +150,8 @@ const Matchmaking = () => {
         Add Question
       </PeerprepButton>
       <div className="flex flex-row items-center space-x-4">
-        <PeerprepButton onClick={handleMatch}>
-          {isMatching ? "Cancel Match" : "Find Match"}
+        <PeerprepButton onClick={handleMatch} disabled={!isMatching && matchHash !== ""}>
+          {isMatching ? "Cancel Match" : matchHash === "" ? "Find Match" : "Redirecting..."}
         </PeerprepButton>
         {!isMatching && (
           <PeerprepDropdown

peerprep/components/shared/PeerprepButton.tsx

@@ -6,15 +6,17 @@ type PeerprepButtonProps = {
   onClick: () => void;
   children: React.ReactNode;
   className?: string;
+  disabled?: boolean
 };
 
 const PeerprepButton: React.FC<PeerprepButtonProps> = ({
   onClick,
   children,
   className,
+  disabled
 }) => {
   return (
-    <button onClick={onClick} className={`${styles.button} ${className}`}>
+    <button onClick={onClick} className={`${styles.button} ${className}`} disabled={disabled}>
       {children}
     </button>
   );