Merge pull request #73 from cheehongw/match-buttons

match buttons

frontend/src/api/gateway.ts

@@ -7,4 +7,4 @@ export const apiGatewayClient = axios.create({
 
 
 export const wsMatchMakeURL = process.env.NODE_ENV === 'production'? 'http://peerprep-g10.com:7999' : 'http://localhost:7999'
-export const wsCollabUrl = process.env.NODE_ENV === 'production'? 'ws://peerprep-g10.com:8083' :'ws://localhost:7998'
+export const wsCollabUrl = process.env.NODE_ENV === 'production'? 'ws://peerprep-g10.com:8083' :'ws://localhost:8083'

frontend/src/components/MatchMakeBtn/MatchMakeBtn.component.tsx

@@ -42,13 +42,6 @@ const MatchMakeBtn = () => {
           icon={<Icon as={DisconnectIcon} />}
         />
       </Tooltip>
-      <Tooltip label="Open Chat" aria-label="collaborate">
-        <IconButton
-          aria-label="open_chat"
-          colorScheme="teal"
-          icon={<ChatIcon />}
-        />
-      </Tooltip>
     </ButtonGroup>
   ) : (
     <Menu>
@@ -61,13 +54,15 @@ const MatchMakeBtn = () => {
           <MenuButton as={Button} isLoading={isMatching}>
             Collaborate
           </MenuButton>
+          <Tooltip label="Reconnect" aria-label="collaborate">
           <IconButton
             aria-label="reconnect"
             icon={<RepeatClockIcon />}
             variant="outline"
             onClick={restoreRoom}
             isLoading={isMatching}
           />
+          </Tooltip>
         </ButtonGroup>
       )}
 

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>
@@ -70,6 +70,7 @@ export function QnTable(pp: TableProp) {
                 <Th>
                   <Center>Difficulty</Center>
                 </Th>
+                <Th> Match </Th>
                 {isAdmin ? <Th isNumeric>Modify/Delete</Th> : <></>}
               </Tr>
             </Thead>

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

@@ -1,4 +1,5 @@
 import {
+  Button,
   ButtonGroup,
   Center,
   HStack,
@@ -15,6 +16,7 @@ import { EditIcon } from "@chakra-ui/icons";
 import { useDispatch } from "react-redux";
 import { delQuestion } from "../../api/questions";
 import { deleteQuestion } from "../../reducers/questionsSlice";
+import { useMatchmake } from "../../contexts/matchmake.context";
 import { rangeToScheme } from "../../helper/DifficultyFilterHelper";
 
 interface QuestionEntryProps {
@@ -23,7 +25,18 @@ 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) => {
@@ -38,6 +51,7 @@ export function QuestionEntry(props: QuestionEntryProps) {
           <Text>{qn.displayedQuestion}</Text>
         </Link>
       </Td>
+
       <Td>
         <HStack spacing={1}>
           {qn.topics.map((qntype) => (
@@ -50,14 +64,21 @@ export function QuestionEntry(props: QuestionEntryProps) {
           <Tag colorScheme={rangeToScheme(qn.difficulty)}>{qn.difficulty}</Tag>
         </Center>
       </Td>
+      <Td>
+        <Button colorScheme="teal"
+          size='sm'
+          isLoading={isMatching}
+          onClick={() => findMatch(qn.difficulty, qn.difficulty, qn._id)}>
+          Look for Match
+        </Button>
+      </Td>
       {isAdmin ? (
-        <Td isNumeric>
-          <ButtonGroup gap={0.1}>
+        <Td>
+          <ButtonGroup>
             <Link to={`/edit/${qn._id}`}>
               <IconButton
                 aria-label="Edit question"
                 icon={<EditIcon />}
-                colorScheme="blue"
               ></IconButton>
             </Link>
             <DeleteQnBtn
@@ -71,4 +92,4 @@ export function QuestionEntry(props: QuestionEntryProps) {
       )}
     </Tr>
   );
-}
+};

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,
     });