match buttons

Author: cheehongw

frontend/src/components/QnTable/QnTable.component.tsx

@@ -51,7 +51,7 @@ export function QnTable(pp: TableProp) {
               boxShadow: "xl",
             }}
             width="80%"
-            sx={{ tableLayout: "fixed" }}
+            sx={{ tableLayout: "auto" }}
           >
             <TableCaption>
               <Center>
@@ -67,7 +67,8 @@ export function QnTable(pp: TableProp) {
               <Tr boxShadow="base">
                 <Th>Questions</Th>
                 <Th>Type</Th>
-                <Th>Difficulty</Th>
+                <Th w="10%">Difficulty</Th>
+                <Th> Match </Th>
                 {isAdmin ? <Th>Modify/Delete</Th> : <></>}
               </Tr>
             </Thead>

frontend/src/components/QnTable/QuestionEntry.component.tsx

@@ -1,4 +1,4 @@
-import { ButtonGroup, HStack, IconButton, Tag, Td, Text, Tr } from "@chakra-ui/react";
+import { Button, ButtonGroup, HStack, IconButton, Tag, Td, Text, Tr } from "@chakra-ui/react";
 import { Question } from "../../models/Question.model";
 import { Link } from "react-router-dom";
 import { DeleteQnBtn } from "../DeleteQnBtn/DeleteQnBtn.component";
@@ -7,6 +7,7 @@ import { diffToScheme } from "../../helper/UIHelper";
 import { useDispatch } from "react-redux";
 import { delQuestion } from "../../api/questions";
 import { deleteQuestion } from "../../reducers/questionsSlice";
+import { useMatchmake } from "../../contexts/matchmake.context";
 
 interface QuestionEntryProps {
     qn: Question, 
@@ -16,6 +17,16 @@ interface QuestionEntryProps {
 export function QuestionEntry(props : QuestionEntryProps) {
 
     const {qn, isAdmin} = props;
+    const {
+      findMatch,
+      isMatching,
+      matchedRoom,
+      timeLeft,
+      cancelMatch,
+      restoreRoom,
+      quitRoom,
+    } = useMatchmake();
+
     const dispatch = useDispatch();
 
     const onDelete = async (_id: string) => {
@@ -40,6 +51,13 @@ export function QuestionEntry(props : QuestionEntryProps) {
         <Td>
           <Tag colorScheme={diffToScheme(qn.difficulty)}>{qn.difficulty}</Tag>
         </Td>
+        <Td>
+            <Button colorScheme="teal" 
+              isLoading={isMatching}
+              onClick={() => findMatch(qn.difficulty, qn.difficulty, qn._id)}>
+              Look for Match
+            </Button>
+        </Td>
         {isAdmin ? (
           <Td>
             <ButtonGroup>

frontend/src/contexts/matchmake.context.tsx

@@ -27,7 +27,7 @@ interface RoomCloseResponse {
 }
 
 interface MatchmakeContextInterface {
-  findMatch: (diffStart: number, diffEnd: number) => void;
+  findMatch: (diffStart: number, diffEnd: number, qn__id?: string) => void;
   cancelMatch: () => void;
   quitRoom: () => void;
   disconnectRoom: () => void;
@@ -192,7 +192,7 @@ export const MatchmakeProvider = ({
     };
   }, [navigate, user]);
 
-  const findMatch = (diffStart: number, diffEnd: number) => {
+  const findMatch = (diffStart: number, diffEnd: number, qn__id?: string) => {
     if (!socket || !user) return;
     if (!socket.connected) socket.connect();
 
@@ -205,6 +205,7 @@ export const MatchmakeProvider = ({
     });
     socket.emit("findMatch", {
       username: user.username,
+      preferredQn: qn__id,
       from: diffStart,
       to: diffEnd,
     });