Add matched and timeout page

Author: guanquann

.husky/pre-commit

@@ -1,7 +1,14 @@
-cd ./frontend && npm run lint && npm run test
-cd ..
+cd ./frontend
+npm run lint
+npm run test -- --maxWorkers=50%
+cd .. 
 
-cd ./backend/user-service && npm run lint && npm run test
-cd ../..
+cd ./backend/user-service 
+npm run lint
+npm run test -- --maxWorkers=50%
+cd ../..  
 
-cd ./backend/question-service && npm run lint && npm run test
+cd ./backend/question-service
+npm run lint
+npm run test -- --maxWorkers=50%
+cd ../..

backend/question-service/Dockerfile

@@ -10,4 +10,4 @@ COPY . .
 
 EXPOSE 3000
 
-CMD ["npm", "start"]
+CMD ["npm", "run", "dev"]

backend/user-service/Dockerfile

@@ -10,4 +10,4 @@ COPY . .
 
 EXPOSE 3001
 
-CMD ["npm", "start"]
+CMD ["npm", "run", "dev"]

docker-compose.yml

@@ -2,18 +2,25 @@ services:
   user-service:
     image: peerprep/user-service
     build: ./backend/user-service
+    environment:
+      - CHOKIDAR_USEPOLLING=true
     env_file: ./backend/user-service/.env
     ports:
       - 3001:3001
     depends_on:
       - mongo
     networks:
       - peerprep-network
+    volumes:
+      - ./backend/user-service:/user-service
+      - /user-service/node_modules
     restart: on-failure
 
   question-service:
     image: peerprep/question-service
     build: ./backend/question-service
+    environment:
+      - CHOKIDAR_USEPOLLING=true
     env_file: ./backend/question-service/.env
     ports:
       - 3000:3000
@@ -22,18 +29,26 @@ services:
       - user-service
     networks:
       - peerprep-network
+    volumes:
+      - ./backend/question-service:/question-service
+      - /question-service/node_modules
     restart: on-failure
 
   frontend:
     image: peerprep/frontend
     build: ./frontend
+    environment:
+      - CHOKIDAR_USEPOLLING=true
     ports:
       - 5173:5173
     depends_on:
       - user-service
       - question-service
     networks:
       - peerprep-network
+    volumes:
+      - ./frontend:/frontend
+      - /frontend/node_modules
     restart: on-failure
 
   mongo:

frontend/src/App.tsx

@@ -10,6 +10,8 @@ import Landing from "./pages/Landing";
 import Home from "./pages/Home";
 import SignUp from "./pages/SignUp";
 import LogIn from "./pages/LogIn";
+import Matched from "./pages/Matched";
+import Timeout from "./pages/Timeout";
 import ProtectedRoutes from "./components/ProtectedRoutes";
 import Layout from "./components/Layout";
 import AuthProvider from "./contexts/AuthContext";
@@ -40,6 +42,11 @@ function App() {
               </ProfileContextProvider>
             }
           />
+          <Route path="matching" element={<ProtectedRoutes />}>
+            <Route index element={<div>Matching...</div>} />
+            <Route path="matched" element={<Matched />} />
+            <Route path="timeout" element={<Timeout />} />
+          </Route>
           <Route path="*" element={<PageNotFound />} />
         </Route>
         <Route path="/signup" element={<SignUp />}></Route>

frontend/src/assets/timeout.svg

@@ -0,0 +1,10 @@
+.fullheight {
+  flex: 1;
+}
+
+.center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}

frontend/src/pages/Matched/index.module.css

@@ -0,0 +1,55 @@
+import { useNavigate } from "react-router-dom";
+import AppMargin from "../../components/AppMargin";
+import { Avatar, Box, Button, Stack, Typography } from "@mui/material";
+import classes from "./index.module.css";
+
+const Matched: React.FC = () => {
+  const navigate = useNavigate();
+
+  return (
+    <AppMargin classname={`${classes.fullheight} ${classes.center}`}>
+      <Stack spacing={2} alignItems={"center"}>
+        <Typography variant="h1">It's a match!</Typography>
+
+        <Box
+          display="flex"
+          alignItems="center"
+          justifyContent="center"
+          paddingTop={2}
+          paddingBottom={2}
+        >
+          <Avatar sx={{ width: 120, height: 120 }} />
+
+          <Box
+            sx={(theme) => ({
+              width: "120px",
+              height: "2px",
+              backgroundColor: theme.palette.secondary.contrastText,
+              margin: "0 10px",
+            })}
+          />
+
+          <Avatar sx={{ width: 120, height: 120 }} />
+        </Box>
+
+        <Typography variant="h3">Practice with @johnjoe?</Typography>
+
+        <Stack spacing={2} direction="row" paddingTop={2} width={700}>
+          <Button
+            variant="contained"
+            color="secondary"
+            fullWidth
+            onClick={() => navigate("/matching")}
+          >
+            Rematch
+          </Button>
+          <Button variant="contained" fullWidth>
+            Accept
+          </Button>
+        </Stack>
+      </Stack>
+    </AppMargin>
+  );
+};
+
+export default Matched;

frontend/src/pages/Matched/index.tsx

@@ -0,0 +1,10 @@
+.fullheight {
+  flex: 1;
+}
+
+.center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}

frontend/src/pages/Timeout/index.module.css

@@ -0,0 +1,43 @@
+import { useNavigate } from "react-router-dom";
+import AppMargin from "../../components/AppMargin";
+import { Button, Stack, Typography } from "@mui/material";
+import timeout from "../../assets/timeout.svg";
+import classes from "./index.module.css";
+
+const Timeout: React.FC = () => {
+  const navigate = useNavigate();
+
+  return (
+    <AppMargin classname={`${classes.fullheight} ${classes.center}`}>
+      <Stack spacing={2} alignItems={"center"}>
+        <Typography variant="h1">Oops, timeout...</Typography>
+
+        <img src={timeout} style={{ height: 240, width: "auto" }} />
+
+        <Typography variant="h3">
+          Unfortunately, we could not find a match.
+        </Typography>
+
+        <Stack spacing={2} direction="row" paddingTop={2} width={700}>
+          <Button
+            variant="contained"
+            color="secondary"
+            fullWidth
+            onClick={() => navigate("/questions")}
+          >
+            Exit
+          </Button>
+          <Button
+            variant="contained"
+            fullWidth
+            onClick={() => navigate("/matching")}
+          >
+            Try Again
+          </Button>
+        </Stack>
+      </Stack>
+    </AppMargin>
+  );
+};
+
+export default Timeout;