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: {