Fix router (#449)

* Restructured router

* Deleted duplicated route

* Restructured folders

frontend/src/App.tsx

@@ -4,14 +4,11 @@ import { RouterProvider } from "react-router-dom";
 
 // Internal imports
 import router from "router/Router";
-import { HeaderNav, FooterNav } from "components/components";
 
 export default function App() {
   return (
     <>
-      <HeaderNav />
       <RouterProvider router={router} />
-      <FooterNav />
     </>
   );
 }

frontend/src/components/components.tsx

@@ -9,7 +9,6 @@ import { Checkbox } from "./Inputs/Checkbox";
 import { Chip } from "./Inputs/Chip";
 import { Dropdown, DropdownOption } from "./Inputs/Dropdown";
 import { TextField } from "./Inputs/Textfield";
-import { HeaderNav } from "./Navigation/HeaderNav";
 import { FooterNav } from "./Navigation/FooterNav";
 import { ProgressBar } from "./Navigation/ProgressBar";
 import { Notification } from "./Notification/Notification";
@@ -36,7 +35,6 @@ export {
   DropdownOption,
   TextField,
   // Navigation
-  HeaderNav,
   FooterNav,
   ProgressBar,
   // Notification

frontend/src/layouts/DefaultNavLayout.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Outlet } from "react-router-dom";
+import { FooterNav } from "components/components";
+import { HeaderNav } from "tw-components";
+
+const DefaultNavLayout = () => {
+  return (
+    <>
+      <HeaderNav />
+      <Outlet />
+      <FooterNav />
+    </>
+  );
+};
+
+export default DefaultNavLayout;

frontend/src/layouts/HomeLayout.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { Outlet } from "react-router-dom";
+
+const HomeLayout = () => {
+  return (
+    <>
+      <Outlet />
+    </>
+  );
+};
+
+export default HomeLayout;

frontend/src/pages/Authentication/page.tsx

@@ -1,33 +1,34 @@
 import React from "react";
 import { Link, useLocation } from "react-router-dom";
-
-import InputGroup from "../../tw-components/InputGroup";
+import { AuthNav, InputGroup } from "tw-components";
 
 /** AuthenticationPage
  * @dev handles both "/login" and "/signup" paths
- * @dev shows the <LoginForm /> or <SignupForm /> depending on the path
- */
+*/
 
 export default function AuthenticationPage() {
   return (
-    <div className="flex flex-row" style={{ height: "calc(100vh - 64px)" }}>
-      <div className="w-full lg:basis-1/2 bg-tan">
-        <div className="lg:hidden flex flex-col justify-center items-center h-full">
-          <div className="w-10/12">
-            <div className="bg-white p-3 rounded-2xl">
-              <AuthForm />
+    <>
+      <AuthNav />
+      <div className="flex flex-row" style={{ height: "calc(100vh - 64px)" }}>
+        <div className="w-full lg:basis-1/2 bg-tan">
+          <div className="lg:hidden flex flex-col justify-center items-center h-full">
+            <div className="w-10/12">
+              <div className="bg-white p-3 rounded-2xl">
+                <AuthForm />
+              </div>
             </div>
           </div>
         </div>
-      </div>
-      <div className="max-lg:hidden basis-1/2">
-        <div className="flex flex-col justify-center items-center h-full">
-          <div className="w-[439px]">
-            <AuthForm />
+        <div className="max-lg:hidden basis-1/2">
+          <div className="flex flex-col justify-center items-center h-full">
+            <div className="w-[439px]">
+              <AuthForm />
+            </div>
           </div>
         </div>
       </div>
-    </div>
+    </>
   );
 }
 

frontend/src/pages/CreditsPage/CreditsPage.tsx

@@ -5,8 +5,8 @@ import React, { Fragment, useState } from "react";
 import { logoHfLA } from "assets/images/images";
 import { Chip } from "components/components";
 import { Card } from "components/Cards/StandardCard";
-import { iconData } from "pages/api_data/creditsIconData";
-import { illustrationData } from "pages/api_data/creditsIllustrationData";
+import { iconData } from "api_data/creditsIconData";
+import { illustrationData } from "api_data/creditsIllustrationData";
 
 const CreditsPage = () => {
   const [activeData, setActiveData] = useState(illustrationData);

frontend/src/pages/LandingPage/LandingPageCop.tsx

@@ -8,7 +8,7 @@ import {
   copDatum,
   fetchAllCopData,
   fetchCopDataById,
-} from "../api_data/copData";
+} from "../../api_data/copData";
 
 function LandingPageCop() {
   const [isDialogOpen, setIsDialogOpen] = useState(false);

frontend/src/pages/QualifierPage/QualifierPageCalendar.tsx

@@ -11,7 +11,7 @@ import {
   Button,
 } from "components/components";
 import { QualifierNav, QualifierTitle } from "./QualifierComponents";
-import { timezones } from "../api_data/timezoneData";
+import { timezones } from "../../api_data/timezoneData";
 import { iconArrowLeft } from "assets/images/images";
 
 function QualifierPageCalendar() {

frontend/src/pages/QualifierPage/QualifierPageRoles.tsx

@@ -5,7 +5,7 @@ import { useNavigate } from "react-router-dom";
 // Internal Imports
 import { Button, Chip } from "components/components";
 import { QualifierNav, QualifierTitle } from "./QualifierComponents";
-import { fetchAllCopData, copDatum } from "pages/api_data/copData";
+import { fetchAllCopData, copDatum } from "api_data/copData";
 import { onKey } from "components/Utility/utils";
 
 function QualifierPageRoles() {

frontend/src/router/Router.tsx

@@ -1,10 +1,6 @@
 // External Imports
-import React, { Fragment } from "react";
-import {
-  createRoutesFromElements,
-  createBrowserRouter,
-  Route,
-} from "react-router-dom";
+import React from "react";
+import { createBrowserRouter } from "react-router-dom";
 
 // Internal Imports
 import { CreditsPage } from "pages/CreditsPage/CreditsPage";
@@ -18,26 +14,61 @@ import {
   loader as qualifierLoader,
 } from "pages/QualifierPage/QualifierPage";
 import AuthenticationPage from "pages/Authentication/page";
+import HomeLayout from "layouts/HomeLayout";
+import DefaultNavLayout from "layouts/DefaultNavLayout";
 
-const router = createBrowserRouter(
-  createRoutesFromElements(
-    <Fragment>
-      <Route path="/" element={<LandingPage />} />
-      <Route path="/login" element={<AuthenticationPage />} />
-      <Route path="/signup" element={<AuthenticationPage />} />
-      <Route path="qualifier/" element={<QualifierPage />}>
-        <Route
-          path=":page/"
-          element={<QualifierContent />}
-          loader={qualifierLoader}
-        />
-      </Route>
-      <Route path="/demo" element={<Demo />} />
-      <Route path="/demo-tailwind" element={<DemoTailwind />} />
-      <Route path="/credits" element={<CreditsPage />} />
-      <Route path="*" element={<NotFoundPage />} />
-    </Fragment>
-  )
-);
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <HomeLayout />,
+    children: [
+      {
+        path: "/",
+        element: <DefaultNavLayout />,
+        children: [
+          {
+            index: true,
+            element: <LandingPage />,
+          },
+          {
+            path: "qualifier",
+            element: <QualifierPage />,
+            children: [
+              {
+                path: ":page",
+                element: <QualifierContent />,
+                loader: qualifierLoader,
+              },
+            ],
+          },
+          {
+            path: "credits",
+            element: <CreditsPage />,
+          },
+          {
+            path: "demo",
+            element: <Demo />,
+          },
+          {
+            path: "demo-tailwind",
+            element: <DemoTailwind />,
+          },
+          {
+            path: "*",
+            element: <NotFoundPage />,
+          },
+        ],
+      },
+    ],
+  },
+  {
+    path: "login",
+    element: <AuthenticationPage />,
+  },
+  {
+    path: "signup",
+    element: <AuthenticationPage />,
+  },
+]);
 
 export default router;

frontend/src/tw-components/AuthNav.tsx

@@ -0,0 +1,38 @@
+// External Imports
+import React, { useState } from "react";
+
+// Internal Imports
+import { logoHorizontal } from "assets/images/images";
+import { iconArrowLeft } from "assets/images/images";
+
+function AuthNav() {
+  const [path] = useState(window.location.pathname);
+
+  const Logo = () => {
+    return (
+      <a href="/" rel="noopener noreferrer">
+        <img
+          className="max-h-[24px] md:max-h-[32px]"
+          src={logoHorizontal}
+          alt="Civic Tech Jobs - Home"
+        />
+      </a>
+    );
+  };
+
+  return (
+    <header className="h-16 py-1 px-3 w-full flex items-center justify-center shadow-[-1px_1px_2px_rgb(51,51,51,0.2)]">
+      <div className="grow flex justify-center">
+        <a href="/">
+          <img src={iconArrowLeft} alt="Back to home arrow" className="w-5" />
+        </a>
+      </div>
+      <div>
+        <Logo />
+      </div>
+      <div className="grow"></div>
+    </header>
+  );
+}
+
+export default AuthNav;

frontend/src/components/Navigation/HeaderNav.tsx → frontend/src/tw-components/HeaderNav.tsx

@@ -1,11 +1,11 @@
 // External Imports
-import React, { Fragment, useState } from "react";
+import React from "react";
 
 // Internal Imports
-import { logoHorizontal, logoStacked } from "assets/images/images";
+import { logoHorizontal } from "assets/images/images";
 import { IconHamburgerMenu } from "assets/images/images";
-import { Button } from "../Buttons/Button";
-import { iconArrowLeft } from "assets/images/images";
+import { Button } from "../components/components";
+import { Link } from "react-router-dom";
 
 interface menuObject {
   name?: string;
@@ -21,15 +21,7 @@ const menuItems: menuObject[] = [
   { name: "Projects", link: "https://www.hackforla.org/projects/" },
 ];
 
-/** HeaderNav component
- * @dev changes from default to auth header depending on the path
- * @dev can't use the Link component from react router because this component
- * is rendered outside of the router context created in Router.tsx
- */
-
 function HeaderNav() {
-  const [path] = useState(window.location.pathname);
-
   const Logo = () => {
     return (
       <a href="/" rel="noopener noreferrer">
@@ -42,7 +34,7 @@ function HeaderNav() {
     );
   };
 
-  const DefaultHeader = (
+  return (
     <header className="h-16 py-1 px-3 w-full flex items-center justify-between shadow-[-1px_1px_2px_rgb(51,51,51,0.2)]">
       <div>
         <Logo />
@@ -67,9 +59,11 @@ function HeaderNav() {
           })}
         </nav>
 
-        <Button href="/login" color="primary" size="sm">
-          Log In
-        </Button>
+        <Link to="/login">
+          <Button color="primary" size="sm">
+            Log In
+          </Button>
+        </Link>
         <button
           className="md:hidden ml-3"
           aria-expanded="false"
@@ -80,26 +74,6 @@ function HeaderNav() {
       </div>
     </header>
   );
-
-  const AuthHeader = (
-    <header className="h-16 py-1 px-3 w-full flex items-center justify-center shadow-[-1px_1px_2px_rgb(51,51,51,0.2)]">
-      <div className="grow flex justify-center">
-        <a href="/">
-          <img src={iconArrowLeft} alt="Back to home arrow" className="w-5" />
-        </a>
-      </div>
-      <div>
-        <Logo />
-      </div>
-      <div className="grow"></div>
-    </header>
-  );
-
-  if (path === "/login" || path === "/signup") {
-    return AuthHeader;
-  } else {
-    return DefaultHeader;
-  }
 }
 
-export { HeaderNav };
+export default HeaderNav;

frontend/src/tw-components/index.tsx

@@ -0,0 +1,3 @@
+export { default as AuthNav } from "./AuthNav";
+export { default as HeaderNav } from "./HeaderNav";
+export { default as InputGroup } from "./InputGroup";

frontend/tailwind.config.js

@@ -3,7 +3,6 @@ module.exports = {
   content: [
     "./src/pages/Demo/DemoTailwind.tsx",
     "./src/pages/Authentication/*.tsx",
-    "./src/components/Navigation/HeaderNav.tsx",
     "./src/tw-components/*.tsx",
   ], // Will change to "./src/**/*.{js,jsx,tsx}", "./templates/index.html"
   theme: {