Add matching page

Author: nicolelim02

frontend/src/App.tsx

@@ -11,6 +11,7 @@ import Home from "./pages/Home";
 import SignUp from "./pages/SignUp";
 import LogIn from "./pages/LogIn";
 import ProtectedRoutes from "./components/ProtectedRoutes";
+import Matching from "./pages/Matching";
 
 function App() {
   return (
@@ -27,10 +28,13 @@ function App() {
             </Route>
           </Route>
           <Route path="profile/:userId" element={<ProfilePage />} />
+          <Route path="match">
+            <Route index element={<Matching />} />
+          </Route>
           <Route path="*" element={<PageNotFound />} />
         </Route>
-        <Route path="/signup" element={<SignUp />}></Route>
-        <Route path="/login" element={<LogIn />}></Route>
+        <Route path="signup" element={<SignUp />}></Route>
+        <Route path="login" element={<LogIn />}></Route>
       </Routes>
     </AuthProvider>
   );

frontend/src/assets/matching.svg

@@ -0,0 +1,47 @@
+import {
+  Box,
+  CircularProgress,
+  CircularProgressProps,
+  Typography,
+} from "@mui/material";
+
+type TimerProps = { totalTime: number; timeLeft: number };
+
+const Timer: React.FC<CircularProgressProps & TimerProps> = (props) => {
+  const { totalTime, timeLeft } = props;
+  const percentage = (timeLeft / totalTime) * 100;
+  return (
+    <Box sx={{ position: "relative", display: "inline-flex" }}>
+      <CircularProgress
+        variant="determinate"
+        size={80}
+        value={100}
+        sx={(theme) => ({ color: theme.palette.grey[200] })}
+      />
+      <CircularProgress
+        variant="determinate"
+        disableShrink
+        value={percentage}
+        size={80}
+        sx={{ position: "absolute" }}
+        {...props}
+      />
+      <Box
+        sx={{
+          top: 0,
+          bottom: 0,
+          left: 0,
+          right: 0,
+          position: "absolute",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
+        <Typography variant="h6">{timeLeft}</Typography>
+      </Box>
+    </Box>
+  );
+};
+
+export default Timer;

frontend/src/components/Timer/index.tsx

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

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

@@ -0,0 +1,32 @@
+import React, { useEffect } from "react";
+import AppMargin from "../../components/AppMargin";
+import { Stack, Typography } from "@mui/material";
+import matching from "../../assets/matching.svg";
+import classes from "./index.module.css";
+import Timer from "../../components/Timer";
+
+const Matching: React.FC = () => {
+  const totalTime = 30;
+  const [timeLeft, setTimeLeft] = React.useState(totalTime);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setTimeLeft((prevTime) => (prevTime <= 0 ? 0 : prevTime - 1));
+    }, 1000);
+    return () => clearInterval(timer);
+  }, []);
+
+  return (
+    <AppMargin classname={`${classes.fullheight} ${classes.center}`}>
+      <Stack spacing={2} alignItems={"center"}>
+        <Typography component={"h1"} variant="h3">
+          Finding your practice partner
+        </Typography>
+        <img src={matching} style={{ height: 120, width: "auto" }} />
+        <Timer totalTime={totalTime} timeLeft={timeLeft} thickness={4} />
+      </Stack>
+    </AppMargin>
+  );
+};
+
+export default Matching;