Render stop matching button on all matching pages

Author: nicolelim02

frontend/src/App.tsx

@@ -41,8 +41,10 @@ function App() {
               </ProfileContextProvider>
             }
           />
-          <Route path="match" element={<ProtectedRoutes />}>
+          <Route path="matching" element={<ProtectedRoutes />}>
             <Route index element={<Matching />} />
+            <Route path="matched" element={<div>Matched</div>} />
+            <Route path="timeout" element={<div>Timeout</div>} />
           </Route>
           <Route path="*" element={<PageNotFound />} />
         </Route>

frontend/src/components/Navbar/index.tsx

@@ -18,6 +18,7 @@ import { useNavigate, useLocation } from "react-router-dom";
 import { useAuth } from "../../contexts/AuthContext";
 import { useState } from "react";
 import { USE_AUTH_ERROR_MESSAGE } from "../../utils/constants";
+import { isMatchingPage } from "../../utils/url";
 
 type NavbarItem = { label: string; link: string; needsLogin: boolean };
 
@@ -35,8 +36,6 @@ const Navbar: React.FC<NavbarProps> = (props) => {
   const location = useLocation();
   const path = location.pathname;
 
-  console.log(path);
-
   const auth = useAuth();
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
 
@@ -73,7 +72,7 @@ const Navbar: React.FC<NavbarProps> = (props) => {
           >
             PeerPrep
           </Typography>
-          {path !== "/match" ? (
+          {!isMatchingPage(path) ? (
             <Stack direction={"row"} alignItems={"center"} spacing={2}>
               {navbarItems
                 .filter((item) => !item.needsLogin || (item.needsLogin && user))

frontend/src/utils/url.ts

@@ -0,0 +1,4 @@
+export const isMatchingPage = (path: string) => {
+  const pattern = /^(?<prefix>\/matching)(?<ignore>\/.*)*$/;
+  return pattern.test(path);
+};