Merge pull request #58 from Eclipse-Dominator/matching_timer_cancel

Matching timeout and cancel

Author: cheehongw

.github/workflows/build_push_registry.yml

@@ -30,9 +30,7 @@ jobs:
             question_service:
               - 'question_service/**'
             matching_service:
-              - 'user_service/**'
-            match_worker:
-              - 'match_worker/**'
+              - 'matching_service/**'
             collab_service:
               - 'collab_service/**'
               
@@ -88,14 +86,7 @@ jobs:
           docker-compose push matching-service
           echo "::set-output name=build_status::true"
 
-      - name: 5. Build and Push match-worker
-        if: steps.changes.outputs.match_worker == 'true'
-        run: |
-          docker-compose build match-worker
-          docker-compose push match-worker
-          echo "::set-output name=build_status::true"
-
-      - name: 6. Build and Push collab-service
+      - name: 5. Build and Push collab-service
         if: steps.changes.outputs.collab_service == 'true'
         run: |
           docker-compose build collab-service

docker-compose.yml

@@ -28,62 +28,6 @@ services:
     volumes:
       - questions_test_cases:/app/question_test_cases
 
-  match-worker:
-    container_name: match-worker_1
-    image: asia-southeast1-docker.pkg.dev/cs3219-400714/peerprep/match-worker_1:latest
-    environment:
-      - CHANNEL_NAME=diff1
-    build:
-      context: ./match_worker
-      dockerfile: Dockerfile.prod
-    depends_on:
-      rabbitmq:
-        condition: service_healthy
-      matching-service:
-        condition: service_started
-
-  match-worker2:
-    container_name: match-worker_2
-    image: asia-southeast1-docker.pkg.dev/cs3219-400714/peerprep/match-worker_1:latest
-    environment:
-      - CHANNEL_NAME=diff2
-    build:
-      context: ./match_worker
-      dockerfile: Dockerfile.prod
-    depends_on:
-      rabbitmq:
-        condition: service_healthy
-      matching-service:
-        condition: service_started
-
-  match-worker3:
-    container_name: match-worker_3
-    image: asia-southeast1-docker.pkg.dev/cs3219-400714/peerprep/match-worker_1:latest
-    environment:
-      - CHANNEL_NAME=diff3
-    build:
-      context: ./match_worker
-      dockerfile: Dockerfile.prod
-    depends_on:
-      rabbitmq:
-        condition: service_healthy
-      matching-service:
-        condition: service_started
-
-  match-worker4:
-    container_name: match-worker_4
-    image: asia-southeast1-docker.pkg.dev/cs3219-400714/peerprep/match-worker_1:latest
-    environment:
-      - CHANNEL_NAME=diff4
-    build:
-      context: ./match_worker
-      dockerfile: Dockerfile.prod
-    depends_on:
-      rabbitmq:
-        condition: service_healthy
-      matching-service:
-        condition: service_started
-
   collab-service:
     container_name: collab-service
     image: asia-southeast1-docker.pkg.dev/cs3219-400714/peerprep/collab-service:latest
@@ -121,9 +65,6 @@ services:
       - PORT=8082
     ports:
       - "8082:8082"
-    depends_on:
-      rabbitmq:
-        condition: service_healthy
 
   mongo:
     container_name: mongo

docker_compose_dev.yml

@@ -37,57 +37,6 @@ services:
       - PORT=8082
     ports:
       - "8082:8082"
-    depends_on:
-      rabbitmq:
-        condition: service_healthy
-
-  match-worker:
-    container_name: match-worker_1
-    environment:
-      - CHANNEL_NAME=diff1
-    build:
-      context: ./match_worker
-    depends_on:
-      rabbitmq:
-        condition: service_healthy
-      matching-service:
-        condition: service_started
-
-  match-worker2:
-    container_name: match-worker_2
-    environment:
-      - CHANNEL_NAME=diff2
-    build:
-      context: ./match_worker
-    depends_on:
-      rabbitmq:
-        condition: service_healthy
-      matching-service:
-        condition: service_started
-
-  match-worker3:
-    container_name: match-worker_3
-    environment:
-      - CHANNEL_NAME=diff3
-    build:
-      context: ./match_worker
-    depends_on:
-      rabbitmq:
-        condition: service_healthy
-      matching-service:
-        condition: service_started
-
-  match-worker4:
-    container_name: match-worker_4
-    environment:
-      - CHANNEL_NAME=diff4
-    build:
-      context: ./match_worker
-    depends_on:
-      rabbitmq:
-        condition: service_healthy
-      matching-service:
-        condition: service_started
 
   collab-service:
     container_name: collab-service

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

@@ -1,7 +1,9 @@
-import { ChevronDownIcon } from "@chakra-ui/icons";
+import { ChatIcon, ChevronDownIcon } from "@chakra-ui/icons";
 import {
   Button,
+  ButtonGroup,
   HStack,
+  IconButton,
   Menu,
   MenuButton,
   MenuItem,
@@ -15,30 +17,44 @@ const diffRange = [
   [3, 5.9],
   [6, 7.9],
   [8, 9.9],
+  [0, 9.9],
 ];
 
 const CollaborateBtn = () => {
   return (
-    <HStack>
-      <Text>In Room</Text>
-    </HStack>
+    <ButtonGroup>
+      <IconButton
+        aria-label="open_chat"
+        colorScheme="teal"
+        variant="outline"
+        icon={<ChatIcon />}
+      />
+    </ButtonGroup>
   );
 };
 
 const MatchMakeBtn = () => {
-  const { findMatch, isMatching, matchedRoom } = useMatchmake();
+  const { findMatch, isMatching, matchedRoom, timeLeft, cancelMatch } =
+    useMatchmake();
 
   return matchedRoom ? (
     <CollaborateBtn />
   ) : (
     <Menu>
-      <MenuButton
-        as={Button}
-        rightIcon={<ChevronDownIcon />}
-        isLoading={isMatching}
-      >
-        Collaborate
-      </MenuButton>
+      {timeLeft ? (
+        <Button onClick={cancelMatch} colorScheme="red">
+          Cancel
+        </Button>
+      ) : (
+        <MenuButton
+          as={Button}
+          rightIcon={<ChevronDownIcon />}
+          isLoading={isMatching}
+        >
+          Collaborate
+        </MenuButton>
+      )}
+
       <MenuList>
         <MenuItem onClick={() => findMatch(diffRange[0][0], diffRange[0][1])}>
           Basic
@@ -52,6 +68,9 @@ const MatchMakeBtn = () => {
         <MenuItem onClick={() => findMatch(diffRange[3][0], diffRange[3][1])}>
           Hard
         </MenuItem>
+        <MenuItem onClick={() => findMatch(diffRange[4][0], diffRange[4][1])}>
+          All
+        </MenuItem>
       </MenuList>
     </Menu>
   );

frontend/src/components/QnDrawer/QnDrawer.component.tsx

@@ -52,7 +52,7 @@ export const QnDrawer = (prop: qnProp) => {
               </Tag>
               <Divider orientation="vertical" padding="2"></Divider>
               {question.topics.map((qnTag) => (
-                <Tag>{qnTag}</Tag>
+                <Tag key={qnTag}>{qnTag}</Tag>
               ))}
             </HStack>
           </DrawerHeader>

frontend/src/components/QnSubmissionHistory/QnSubmissionHistory.component.tsx

@@ -3,6 +3,9 @@ import {
   Center,
   HStack,
   IconButton,
+  Skeleton,
+  SkeletonText,
+  Stack,
   Table,
   TableContainer,
   Tbody,
@@ -61,8 +64,22 @@ const SubmissionRow = ({ submission }: { submission: submissionRecord }) => {
   );
 };
 
+const SubmissionRowSkeleton = () => {
+  return (
+    <Stack width="100%">
+      <Skeleton height="20px" speed={0.9} />
+      <Skeleton height="40px" speed={1} />
+      <Skeleton height="40px" speed={1.1} />
+      <Skeleton height="40px" speed={1.2} />
+    </Stack>
+  );
+};
+
 const QnSubmissionHistory = () => {
-  const { currSubmission, submissions } = useSharedEditor();
+  const { currSubmission, submissions, submissionLoading } = useSharedEditor();
+  if (submissionLoading) {
+    return <SubmissionRowSkeleton />;
+  }
 
   if (submissions.length === 0 && !currSubmission) {
     return <Text>No Submissions found!</Text>;