Merge pull request #36 from ChangePlusPlusVandy/app-97-addPassenger

App 97 add passenger

package.json

@@ -19,7 +19,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@hookform/resolvers": "^3.3.4",
-    "axios": "^1.6.7",
+    "axios": "^1.6.8",
     "@tanstack/react-query": "^5.28.6",
     "dotenv": "^16.3.1",
     "moon-loader": "^0.1.0",

src/api/queries.ts

@@ -42,6 +42,44 @@ export const createUser = (
     })
     .then((res) => res.data);
 
+export const createPassenger = (
+  passenger: {
+    fields: {
+      "First Name": string;
+      "Last Name": string;
+      Relationship:
+        | "Mother"
+        | "Father"
+        | "Step-mother"
+        | "Step-father"
+        | "Legal Guardian"
+        | "Spouse"
+        | "Family Member"
+        | "Other Caregiver";
+      "Date of Birth": Date | string;
+      Diagnoses?: (string | undefined)[];
+      Gender: "Male" | "Female" | "Other";
+      Street: string;
+      City: string;
+      State: string;
+      Zip: string;
+      Country: string;
+      "Cell Phone": string;
+      Email: string;
+      Waiver: boolean;
+    };
+  },
+  userId: string,
+  token?: string | null,
+): Promise<PassengerData> =>
+  axios
+    .post(`${process.env.VITE_HOST}/passenger/${userId}`, passenger, {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    })
+    .then((res) => res.data);
+
 export const linkUser = (
   airtableRecordId: string,
   token?: string | null,

src/pages/PassengersPage/PassengersPage.module.css

@@ -29,6 +29,8 @@
   font-weight: 700;
   color: var(--miracle-color-dark);
   margin-top: 2rem;
+  display: flex;
+  align-items: center;
 }
 
 .description {
@@ -43,8 +45,14 @@
   justify-content: space-evenly;
   justify-content: flex-start;
   margin-top: 2rem;
+  overflow-x: auto;
+  overflow-y: hidden;
 }
 
 .passengerCard {
   margin-right: 3rem;
 }
+
+.plusButton {
+  margin-left: 0.5rem;
+}

src/pages/PassengersPage/PassengersPage.tsx

@@ -1,19 +1,22 @@
 import styles from "./PassengersPage.module.css";
 import PatientCard from "./components/PatientCard/PatientCard";
 import PassengerCard from "./components/PassengerCard/PassengerCard";
+import PlusButton from "./components/PlusButton/PlusButton";
+import AddPassengerModal from "./components/AddPassengerModal/AddPassengerModal";
 import { getAccompanyingPassengers, getPassengers } from "../../api/queries";
 import { useUserContext } from "../../context/User.context";
 import { useNavigationContext } from "../../context/Navigation.context";
 import { Tabs } from "../../layout/SideBar/SideBar.definitions";
 import { useQuery } from "@tanstack/react-query";
 import { useAuth } from "@clerk/clerk-react";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import type { PassengerData } from "../../interfaces/passenger.interface";
 
 const PassengersPage = () => {
   const { getToken } = useAuth();
   const { currentUser } = useUserContext();
   const { setCurrentTab } = useNavigationContext();
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   // ping the getUserByID endpoint to get the user's data
   const { data: passengerData, isLoading: passengerLoading } =
@@ -55,6 +58,9 @@ const PassengersPage = () => {
 
   return (
     <>
+      {isModalOpen && (
+        <AddPassengerModal onClose={() => setIsModalOpen(false)} />
+      )}
       <div className={styles.container}>
         <div className={styles.patientSection}>
           <h2 className={styles.header}>Patients and Companions</h2>
@@ -64,7 +70,14 @@ const PassengersPage = () => {
           </div>
         </div>
         <div className={styles.passengerSection}>
-          <h3 className={styles.subheader}>Companion Information</h3>
+          <div className={styles.passengerSectionHeader}>
+            <h3 className={styles.subheader}>
+              Companion Information
+              <div className={styles.plusButton}>
+                <PlusButton setOpen={setIsModalOpen} />
+              </div>{" "}
+            </h3>
+          </div>
           <h5 className={styles.description}>
             Companions of {passengerData["First Name"]}
           </h5>

src/pages/PassengersPage/components/AddPassengerModal/AddPassengerModal.definitions.ts

@@ -0,0 +1,28 @@
+export type FormData = {
+  "First Name": string;
+  "Last Name": string;
+  Relationship:
+    | "Mother"
+    | "Father"
+    | "Step-mother"
+    | "Step-father"
+    | "Legal Guardian"
+    | "Spouse"
+    | "Family Member"
+    | "Other Caregiver";
+  "Date of Birth": Date | string;
+  Diagnoses?: (string | undefined)[];
+  Gender: "Male" | "Female" | "Other";
+  Street: string;
+  City: string;
+  State: string;
+  Zip: string;
+  Country: string;
+  "Cell Phone": string;
+  Email: string;
+  Waiver: "Yes" | "No";
+};
+
+export type AddPassengerModalProps = {
+  onClose: () => void;
+};

src/pages/PassengersPage/components/AddPassengerModal/AddPassengerModal.module.css

@@ -0,0 +1,13 @@
+.inputList {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.errorMessage {
+  color: red;
+  margin-top: 0.2rem;
+  text-align: center;
+  font-size: medium;
+}