Merge pull request #18 from ChangePlusPlusVandy/app-63-sidebar-update

APP 63 Sidebar Updates and Renaming

src/layout/App.tsx

@@ -1,6 +1,6 @@
 import styles from "./App.module.css";
+import SideBar from "./SideBar/Sidebar";
 import { createTestPassengerData } from "../util/test-data.util";
-import SideBar from "../components/SideBarComponent/SidebarComponent";
 import { Outlet } from "react-router-dom";
 
 const App = () => {

src/layout/Router.tsx

@@ -1,12 +1,12 @@
 import App from "./App";
-import Dashboard from "../pages/Dashboard/Dashboard";
-import MyFlights from "../pages/MyFlights/MyFlights";
-import PersonalInfo from "../pages/PersonalInfo/PersonalInfo";
-import RequestFlight from "../pages/RequestFlight/RequestFlight";
-import SignIn from "../pages/SignIn/SignIn";
-import SignUp from "../pages/SignUp/SignUp";
+import DashboardPage from "../pages/DashboardPage/DashboardPage";
+import TripsPage from "../pages/TripsPage/TripsPage";
+import PersonalInfoPage from "../pages/PersonalInfoPage/PersonalInfoPage";
+import RequestFlightPage from "../pages/RequestFlightPage/RequestFlightPage";
+import SignInPage from "../pages/SignInPage/SignInPage";
+import SignUpPage from "../pages/SignUpPage/SignUpPage";
 import ExamplePage from "../pages/ExamplePage/ExamplePage";
-import Passengers from "../pages/Passengers/Passengers";
+import PassengersPage from "../pages/PassengersPage/PassengersPage";
 import { RouterProvider, createBrowserRouter } from "react-router-dom";
 
 const router = createBrowserRouter([
@@ -16,35 +16,35 @@ const router = createBrowserRouter([
     children: [
       {
         path: "/sign-up",
-        element: <SignUp />,
+        element: <SignUpPage />,
       },
       {
         path: "/sign-in",
-        element: <SignIn />,
+        element: <SignInPage />,
       },
       {
         path: "/dashboard",
-        element: <Dashboard />,
+        element: <DashboardPage />,
       },
       {
         path: "/request",
-        element: <RequestFlight />,
+        element: <RequestFlightPage />,
       },
       {
-        path: "/my-flights",
-        element: <MyFlights />,
+        path: "/trips",
+        element: <TripsPage />,
       },
       {
         path: "/personal-info",
-        element: <PersonalInfo />,
+        element: <PersonalInfoPage />,
       },
       {
         path: "/example",
         element: <ExamplePage />,
       },
       {
         path: "/passengers",
-        element: <Passengers />,
+        element: <PassengersPage />,
       },
     ],
   },

src/components/SideBarComponent/SideBarComponent.definitions.ts → src/layout/SideBar/SideBar.definitions.ts

@@ -9,8 +9,9 @@ export interface Tab {
 
 export enum Tabs {
   DASHBOARD = "Dashboard",
+  PASSENGERS = "Patient and Passengers",
+  DOCUMENTS = "Documents",
+  TRIPS = "Trips",
+  PERSONAL_INFO = "Personal Info",
   REQUEST = "Request a Flight",
-  MYFLIGHTS = "My Flights",
-  PERSONALINFO = "Personal Info",
-  PASSENGERS = "Passengers",
 }

src/components/SideBarComponent/SidebarComponent.tsx → src/layout/SideBar/Sidebar.tsx

@@ -1,5 +1,5 @@
-import styles from "./SideBarComponent.module.css";
-import { Tabs, type Tab } from "./SideBarComponent.definitions";
+import styles from "./SideBar.module.css";
+import { Tabs, type Tab } from "./SideBar.definitions";
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -11,6 +11,7 @@ import {
   faPerson,
   faPlane,
   faTicket,
+  faFile,
 } from "@fortawesome/free-solid-svg-icons";
 
 const renderTab = (
@@ -67,24 +68,29 @@ const SideBar = () => {
       icon: faHome,
     },
     {
-      title: Tabs.REQUEST,
+      title: Tabs.PASSENGERS,
+      link: "passengers",
+      icon: faPeopleGroup,
+    },
+    {
+      title: Tabs.DOCUMENTS,
       link: "request",
-      icon: faTicket,
+      icon: faFile,
     },
     {
-      title: Tabs.MYFLIGHTS,
-      link: "my-flights",
+      title: Tabs.TRIPS,
+      link: "trips",
       icon: faPlane,
     },
     {
-      title: Tabs.PERSONALINFO,
+      title: Tabs.PERSONAL_INFO,
       link: "personal-info",
       icon: faPerson,
     },
     {
-      title: Tabs.PASSENGERS,
-      link: "passengers",
-      icon: faPeopleGroup,
+      title: Tabs.REQUEST,
+      link: "request",
+      icon: faTicket,
     },
   ];
 

src/components/SideBarComponent/__tests__/SideBarComponent.test.tsx → src/layout/SideBar/__tests__/SideBarComponent.test.tsx

@@ -1,4 +1,4 @@
-import SideBar from "../SidebarComponent";
+import SideBar from "../Sidebar";
 import { fireEvent, render } from "@testing-library/react";
 
 // mock the router provider
@@ -20,9 +20,9 @@ describe("SideBarComponent", () => {
     // check if the tabs are there
     expect(component.getByText("DASHBOARD")).toBeTruthy();
     expect(component.getByText("REQUEST A FLIGHT")).toBeTruthy();
-    expect(component.getByText("MY FLIGHTS")).toBeTruthy();
+    expect(component.getByText("TRIPS")).toBeTruthy();
     expect(component.getByText("PERSONAL INFO")).toBeTruthy();
-    expect(component.getByText("PASSENGERS")).toBeTruthy();
+    expect(component.getByText("PATIENT AND PASSENGERS")).toBeTruthy();
 
     // get the open button and click it
     const openButton = component.getByTestId("open-button");
@@ -31,9 +31,9 @@ describe("SideBarComponent", () => {
     // check if that worked (the text shouldn't be there anymore)
     expect(component.queryByText("DASHBOARD")).toBeFalsy();
     expect(component.queryByText("REQUEST A FLIGHT")).toBeFalsy();
-    expect(component.queryByText("MY FLIGHTS")).toBeFalsy();
+    expect(component.queryByText("TRIPS")).toBeFalsy();
     expect(component.queryByText("PERSONAL INFO")).toBeFalsy();
-    expect(component.queryByText("PASSENGERS")).toBeFalsy();
+    expect(component.queryByText("PATIENT AND PASSENGERS")).toBeFalsy();
   });
 
   it("correctly switches tabs", () => {
@@ -55,7 +55,7 @@ describe("SideBarComponent", () => {
     expect(requestTab.className).toContain("SideBarTitleSelected");
 
     // get the my flights tab and click it
-    const myFlightsTab = component.getByText("MY FLIGHTS");
+    const myFlightsTab = component.getByText("TRIPS");
     fireEvent.click(myFlightsTab);
 
     // check if the my flights tab is selected
@@ -70,7 +70,7 @@ describe("SideBarComponent", () => {
     expect(personalInfoTab.className).toContain("SideBarTitleSelected");
 
     // get the passengers tab and click it
-    const passengersTab = component.getByText("PASSENGERS");
+    const passengersTab = component.getByText("PATIENT AND PASSENGERS");
     fireEvent.click(passengersTab);
 
     // check if the passengers tab is selected

src/pages/Dashboard/Dashboard.tsx → src/pages/DashboardPage/DashboardPage.tsx

@@ -3,7 +3,7 @@ import Select from "../../components/SelectComponent/SelectComponent";
 import { useForm } from "react-hook-form";
 import type { SubmitHandler, FieldValues } from "react-hook-form";
 
-const Dashboard = () => {
+const DashboardPage = () => {
   const onSubmit: SubmitHandler<FieldValues> = (data) => {
     console.log(data);
   };
@@ -64,4 +64,4 @@ const Dashboard = () => {
   );
 };
 
-export default Dashboard;
+export default DashboardPage;

src/pages/Passengers/Passengers.tsx → src/pages/PassengersPage/PassengersPage.tsx

@@ -1,11 +1,11 @@
-import Passenger from "../../components/Passenger/Passenger";
+import Passenger from "./components/Passenger/Passenger";
 import { createTestPassengerData } from "../../util/test-data.util";
 
-const Passengers = () => {
+const PassengersPage = () => {
   // Passengers tab
   console.log("Passengers");
 
   return <Passenger passenger={createTestPassengerData()} />;
 };
 
-export default Passengers;
+export default PassengersPage;

src/components/Passenger/Passenger.definitions.ts → src/pages/PassengersPage/components/Passenger/Passenger.definitions.ts

@@ -1,4 +1,4 @@
-import type { PassengerData } from "../../interfaces/passenger.interface";
+import type { PassengerData } from "../../../../interfaces/passenger.interface";
 
 /**
  * Passenger Props

src/components/Passenger/Passenger.tsx → src/pages/PassengersPage/components/Passenger/Passenger.tsx

@@ -1,13 +1,16 @@
 import styles from "./Passenger.module.css";
-import { formatDate, getAge } from "../../util/date.util";
-import PassengerDetailsModal from "../../modals/PassengerDetailsModal/PassengerDetailsModal";
-import Tag from "../TagComponent/Tag";
-import { TagColor, TagVariant } from "../TagComponent/Tag.definitions";
-import Button from "../ButtonComponent/ButtonComponent";
+import { formatDate, getAge } from "../../../../util/date.util";
+import PassengerDetailsModal from "../PassengerDetailsModal/PassengerDetailsModal";
+import Tag from "../../../../components/TagComponent/Tag";
+import {
+  TagColor,
+  TagVariant,
+} from "../../../../components/TagComponent/Tag.definitions";
+import Button from "../../../../components/ButtonComponent/ButtonComponent";
 import {
   ButtonColor,
   ButtonVariant,
-} from "../ButtonComponent/ButtonComponent.definitions";
+} from "../../../../components/ButtonComponent/ButtonComponent.definitions";
 import { useState } from "react";
 import type { PassengerProps } from "./Passenger.definitions";
 

src/components/Passenger/__tests__/Passenger.test.tsx → src/pages/PassengersPage/components/Passenger/__tests__/Passenger.test.tsx

@@ -1,5 +1,5 @@
-import { getAge } from "../../../util/date.util";
-import { createTestPassengerData } from "../../../util/test-data.util";
+import { getAge } from "../../../../../util/date.util";
+import { createTestPassengerData } from "../../../../../util/test-data.util";
 import Passenger from "../Passenger";
 import { render } from "@testing-library/react";
 

src/modals/PassengerDetailsModal/PassengerDetailsModal.definitions.ts → src/pages/PassengersPage/components/PassengerDetailsModal/PassengerDetailsModal.definitions.ts

@@ -1,4 +1,4 @@
-import type { PassengerData } from "../../interfaces/passenger.interface";
+import type { PassengerData } from "../../../../interfaces/passenger.interface";
 
 export interface PassengerDetailsModalProps {
   passenger: PassengerData;

src/pages/PersonalInfo/PersonalInfo.tsx → src/pages/PersonalInfoPage/PersonalInfoPage.tsx

@@ -1,9 +1,9 @@
-import styles from "./PersonalInfo.module.css";
+import styles from "./PersonalInfoPage.module.css";
 import { createTestPassengerData } from "../../util/test-data.util";
 import { useMemo, useState } from "react";
 import type { PassengerData } from "../../interfaces/passenger.interface";
 
-const PersonalInfo = () => {
+const PersonalInfoPage = () => {
   const [tabIndex, setTabIndex] = useState(0);
   const tabs = ["General", "Medical", "Financial", "Flight History"];
   const data: PassengerData = createTestPassengerData();
@@ -111,4 +111,4 @@ const PersonalInfo = () => {
   );
 };
 
-export default PersonalInfo;
+export default PersonalInfoPage;

src/pages/PersonalInfo/__tests__/PersonalInfo.test.tsx → src/pages/PersonalInfoPage/__tests__/PersonalInfo.test.tsx

@@ -1,4 +1,4 @@
-import PersonalInfo from "../PersonalInfo";
+import PersonalInfoPage from "../PersonalInfoPage";
 import { render, fireEvent } from "@testing-library/react";
 import type { PassengerData } from "../../../interfaces/passenger.interface";
 
@@ -34,7 +34,7 @@ jest.mock("../../../util/test-data.util", () => ({
 describe("Tabs Tests", () => {
   /**************************FIRST TEST*******************************/
   test("Test tabs", () => {
-    const tab = render(<PersonalInfo />);
+    const tab = render(<PersonalInfoPage />);
 
     // Check that the tabs render
     expect(tab).toBeTruthy();
@@ -77,7 +77,7 @@ describe("Tabs Tests", () => {
   });
 
   test("Test snapshots", () => {
-    const { container } = render(<PersonalInfo />);
+    const { container } = render(<PersonalInfoPage />);
     expect(container).toMatchSnapshot();
   });
 });

src/pages/RequestFlightPage/RequestFlightPage.tsx

@@ -0,0 +1,14 @@
+import FlightTimeSelector from "./components/FlightTimeSelector/FlightTimeSelector";
+
+const RequestFlightPage = () => {
+  // Request flight tab
+  console.log("RequestFlight");
+
+  return (
+    <div>
+      <FlightTimeSelector />
+    </div>
+  );
+};
+
+export default RequestFlightPage;

src/components/FlightTimeSelector/FlightTimeSelector.tsx → src/pages/RequestFlightPage/components/FlightTimeSelector/FlightTimeSelector.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import styles from "./FlightTimeSelector.module.css";
 import "react-calendar/dist/Calendar.css";
-import Icon from "../CustomIcon/Icon.tsx";
+import Icon from "../../../../components/CustomIcon/Icon.tsx";
 import DatePicker from "react-calendar";
 import { useState } from "react";
 import type { DateValue, FormTypes } from "./FlightTimeSelector.definitions.ts";

src/pages/SignIn/SignIn.tsx → src/pages/SignInPage/SignInPage.tsx

@@ -1,8 +1,8 @@
-const SignIn = () => {
+const SignInPage = () => {
   // Sign in page
   console.log("SignIn");
 
   return <div>SignIn</div>;
 };
 
-export default SignIn;
+export default SignInPage;

src/pages/SignUp/SignUp.tsx → src/pages/SignUpPage/SignUpPage.tsx

@@ -1,8 +1,8 @@
-const SignUp = () => {
+const SignUpPage = () => {
   // Sign in page
   console.log("SignUp");
 
   return <div>SignUp</div>;
 };
 
-export default SignUp;
+export default SignUpPage;

src/pages/MyFlights/MyFlights.tsx → src/pages/TripsPage/TripsPage.tsx

@@ -1,10 +1,10 @@
-import styles from "./MyFlights.module.css";
-import FlightTicket from "../../components/FlightTicket/FlightTicket";
+import styles from "./TripsPage.module.css";
+import FlightTicket from "./components/FlightTicket/FlightTicket";
 import { createTestFlightLegData } from "../../util/test-data.util";
 import { formatTimeFrame } from "../../util/date.util";
 import type { FlightLegData } from "../../interfaces/flight-leg.interface";
 
-const MyFlights = () => {
+const TripsPage = () => {
   /**
    * Processes the flights by filtering, sorting, and grouping them by request.
    *
@@ -117,4 +117,4 @@ const MyFlights = () => {
   );
 };
 
-export default MyFlights;
+export default TripsPage;

src/modals/FlightDetailsModal/FlightDetailsModal.definitions.tsx → src/pages/TripsPage/components/FlightDetailsModal/FlightDetailsModal.definitions.tsx

@@ -1,4 +1,4 @@
-import type { FlightLegData } from "../../interfaces/flight-leg.interface";
+import type { FlightLegData } from "../../../../interfaces/flight-leg.interface";
 
 export interface FlightDetailsModalProps {
   onClose: () => void;

src/modals/FlightDetailsModal/__tests__/FlightDetailsModal.test.tsx → src/pages/TripsPage/components/FlightDetailsModal/__tests__/FlightDetailsModal.test.tsx

@@ -1,4 +1,4 @@
-import { createTestFlightLegData } from "../../../util/test-data.util";
+import { createTestFlightLegData } from "../../../../../util/test-data.util";
 import FlightDetailsModal from "../FlightDetailsModal";
 import { fireEvent, render } from "@testing-library/react";