Merge pull request #36 from UoaWDCC/Kinzi-Navbar

Kinzi navbar
UoaWDCC · Jul 16, 2024 · da02c1c · da02c1c
2 parents 2852b55 + 4c6e885
commit da02c1c
Show file tree

Hide file tree

Showing 35 changed files with 1,260 additions and 1,131 deletions.
diff --git a/.github/workflows/npm_test.yml b/.github/workflows/npm_test.yml
diff --git a/api/public/index.html b/api/public/index.html
@@ -80,7 +80,7 @@ <h3>API Explorer: <a href="./explorer">/explorer</a></h3>
 
   <footer class="power">
     <a href="https://loopback.io" target="_blank">
-      <img src="https://loopback.io/images/branding/powered-by-loopback/blue/powered-by-loopback-sm.png" />
+      <img src="https://loopback.io/images/branding/powered-by-loopback/blue/powered-by-loopback-sm.png" alt="logo" />
     </a>
   </footer>
 </body>

diff --git a/web/.nvmrc b/web/.nvmrc
@@ -1 +1 @@
-v20.9.0
+v20.9.0
diff --git a/web/.storybook/preview.tsx b/web/.storybook/preview.tsx
@@ -3,7 +3,7 @@ import React, { useEffect } from 'react';
 import { addons } from '@storybook/preview-api';
 import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
 import { MantineProvider, useMantineColorScheme } from '@mantine/core';
-import { theme } from '../src/theme';
+import { theme } from '../src/app/theme';
 
 const channel = addons.getChannel();
 

diff --git a/web/.yarn/releases/yarn-4.1.1.cjs b/web/.yarn/releases/yarn-4.1.1.cjs
diff --git a/web/.yarn/releases/yarn-4.3.1.cjs b/web/.yarn/releases/yarn-4.3.1.cjs
diff --git a/web/.yarnrc.yml b/web/.yarnrc.yml
@@ -1,3 +1,3 @@
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.1.1.cjs
+yarnPath: .yarn/releases/yarn-4.3.1.cjs
diff --git a/web/index.html b/web/index.html
@@ -2,12 +2,12 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/svg+xml" href="fsae_kiwi.png" />
     <meta
       name="viewport"
       content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=yes"
     />
-    <title>Vite + Mantine App</title>
+    <title>F:SAE:47 Job Board</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/web/package.json b/web/package.json
@@ -22,6 +22,7 @@
     "@mantine/core": "7.8.1",
     "@mantine/hooks": "7.8.1",
     "@reduxjs/toolkit": "^2.2.5",
+    "@tabler/icons-react": "^3.7.0",
     "jwt-decode": "^4.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -72,5 +73,5 @@
     "vite-tsconfig-paths": "^4.3.1",
     "vitest": "^1.5.2"
   },
-  "packageManager": "yarn@4.1.1"
+  "packageManager": "yarn@4.3.1"
 }
diff --git a/web/public/fsae_white_and_orange_logo.png b/web/public/fsae_white_and_orange_logo.png
diff --git a/web/src/app/App.tsx b/web/src/app/App.tsx
@@ -7,9 +7,19 @@ import 'react-toastify/dist/ReactToastify.css';
 
 export default function App() {
   return (
-    <MantineProvider theme={theme}>
+    <MantineProvider theme={theme} defaultColorScheme="dark">
       <Router />
-      <ToastContainer />
+      <ToastContainer
+        position="bottom-right"
+        autoClose={5000}
+        hideProgressBar={false}
+        newestOnTop={false}
+        closeOnClick
+        rtl={false}
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover
+      />
     </MantineProvider>
   );
 }
diff --git a/web/src/app/Layouts/AppLayout.tsx b/web/src/app/Layouts/AppLayout.tsx
@@ -0,0 +1,10 @@
+import Navbar from "../components/Navbar/Navbar";
+
+export function AppLayout({ children }: { children: React.ReactNode }) {
+    return (
+      <div>
+        <Navbar />
+        <main>{children}</main>
+      </div>
+    );
+  }
diff --git a/web/src/app/Router.tsx b/web/src/app/Router.tsx
@@ -1,7 +1,6 @@
 import { createBrowserRouter, RouterProvider, Navigate } from 'react-router-dom';
 import { HomePage } from './pages/Home.page';
 import { Login } from './pages/Login.page';
-import { SignUp } from './pages/Signup.page';
 import { StudentProfile } from './pages/StudentProfile.page';
 import { SponsorProfile } from './pages/SponsorProfile.page';
 import { AlumniProfile } from './pages/AlumniProfile.page';
@@ -10,25 +9,63 @@ import { JobBoard } from './pages/JobBoard.page';
 import { StudentsBoard } from './pages/StudentsBoard.page';
 import { SponsorsBoard } from './pages/SponsorsBoard.page';
 import { AlumniBoard } from './pages/AlumniBoard.page';
+import { NotFound } from './pages/NotFound.page';
 import ProfileSwitcher from './pages/ProfileSwitcher';
+import { AppLayout } from './Layouts/AppLayout';
 import ProtectedRoute from './components/ProtectedRoute';
+import { StudentSignUp } from './pages/StudentSignup.page';
+import { SponsorSignUp } from './pages/SponsorSignup.page';
+import { AlumniSignUp } from './pages/AlumniSignup.page';
+import { AdminSignUp } from './pages/AdminSignup.page';
+import SignupSwitcher from './pages/SignupSwitcher.page';
+
 // Protected route is currently commented out. To be enabled once the Authentication Logic has been implemented
 const router = createBrowserRouter([
   {
     path: '/',
-    element: <HomePage />,
+    element: (
+      <AppLayout>
+        <HomePage />
+      </AppLayout>
+    ),
   },
   {
     path: '/login',
-    element: <Login />,
+    element: (
+      <AppLayout>
+        <Login />
+      </AppLayout>
+    ),
   },
   {
     path: '/signup',
-    element: <SignUp />,
+    element: (
+      <AppLayout>
+        <SignupSwitcher />
+      </AppLayout>
+    ),
+    children: [
+      {
+        path: 'student',
+        element: <StudentSignUp />,
+      },
+      {
+        path: 'sponsor',
+        element: <SponsorSignUp />,
+      },
+      {
+        path: 'alumni',
+        element: <AlumniSignUp />,
+      },
+    ],
   },
   {
     path: '/profile',
-    element: <ProfileSwitcher />,
+    element: (
+      <AppLayout>
+        <ProfileSwitcher />
+      </AppLayout>
+    ),
     children: [
       {
         path: 'student',
@@ -66,27 +103,54 @@ const router = createBrowserRouter([
   },
   {
     path: '/jobs',
-    //  <ProtectedRoute allowedRoles={['student', 'admin']}>
-    element: <JobBoard />,
-    //  </ProtectedRoute>
+
+    element: (
+      // <ProtectedRoute allowedRoles={['student', 'admin']}>
+      <AppLayout>
+        <JobBoard />
+      </AppLayout>
+      // </ProtectedRoute>
+    ),
   },
   {
     path: '/students',
-    //  <ProtectedRoute allowedRoles={['sponsor', 'alumni', 'admin']}>
-    element: <StudentsBoard />,
-    //  </ProtectedRoute>
+
+    element: (
+      // <ProtectedRoute allowedRoles={['sponsor', 'alumni', 'admin']}>
+      <AppLayout>
+        <StudentsBoard />
+      </AppLayout>
+      //</ProtectedRoute>
+    ),
   },
   {
     path: '/sponsors',
-    //  <ProtectedRoute allowedRoles={['student', 'admin']}>
-    element: <SponsorsBoard />,
-    //  </ProtectedRoute>
+    element: (
+      //<ProtectedRoute allowedRoles={['student', 'admin']}>
+      <AppLayout>
+        <SponsorsBoard />
+      </AppLayout>
+      //</ProtectedRoute>
+    ),
   },
   {
     path: '/alumni',
-    //  <ProtectedRoute allowedRoles={['student', 'admin']}>
-    element: <AlumniBoard />,
-    //  </ProtectedRoute>
+
+    element: (
+      //<ProtectedRoute allowedRoles={['student', 'admin']}>
+      <AppLayout>
+        <AlumniBoard />
+      </AppLayout>
+      // </ProtectedRoute>
+    ),
+  },
+  {
+    path: '*', // Catch-all undefined routes
+    element: (
+      <AppLayout>
+        <NotFound />
+      </AppLayout>
+    ),
   },
 ]);
 

diff --git a/web/src/app/components/Navbar/Navbar.test.tsx b/web/src/app/components/Navbar/Navbar.test.tsx