Merge pull request #58 from guanquann/feat/matching-matched

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 ../..

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 Matching from "./pages/Matching";
 import Layout from "./components/Layout";
@@ -43,8 +45,8 @@ function App() {
           />
           <Route path="matching" element={<ProtectedRoutes />}>
             <Route index element={<Matching />} />
-            <Route path="matched" element={<div>Matched</div>} />
-            <Route path="timeout" element={<div>Timeout</div>} />
+            <Route path="matched" element={<Matched />} />
+            <Route path="timeout" element={<Timeout />} />
           </Route>
           <Route path="*" element={<PageNotFound />} />
         </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 @john?</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;