Merge pull request #33 from ChangePlusPlusVandy/APP-64

getting the passenger and accompanying passenger wiring

package.json

@@ -19,6 +19,7 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@hookform/resolvers": "^3.3.4",
     "@tanstack/react-query": "^5.28.6",
+    "axios": "^1.6.8",
     "dotenv": "^16.3.1",
     "moon-loader": "^0.1.0",
     "react": "^18.2.0",

src/api/queries.ts

@@ -0,0 +1,7 @@
+import axios from "axios";
+import type { PassengerData } from "../interfaces/passenger.interface";
+
+export const getPassengers = (): Promise<PassengerData> =>
+  axios
+    .get(`${process.env.VITE_HOST}/passenger/rec9C9rLarSiAb9ZQ`)
+    .then((res) => res.data);

src/index.tsx

@@ -4,7 +4,14 @@ import ReactDOM from "react-dom/client";
 import "./styles/globals.css";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
-const queryClient = new QueryClient();
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      retry: false,
+    },
+  },
+});
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>

src/layout/App.tsx

@@ -1,12 +1,8 @@
 import styles from "./App.module.css";
 import SideBar from "./SideBar/Sidebar";
-import { createTestPassengerData } from "../util/test-data.util";
 import { Outlet } from "react-router-dom";
 
 const App = () => {
-  // App wrapper for tabs
-  console.log(createTestPassengerData());
-
   return (
     <div className={styles.appContainer}>
       <div className={styles.sideBarContainer}>

src/pages/PassengersPage/PassengersPage.tsx

@@ -1,55 +1,44 @@
 import styles from "./PassengersPage.module.css";
 import PatientCard from "./components/PatientCard/PatientCard";
 import PassengerCard from "./components/PassengerCard/PassengerCard";
-import { createTestPassengerData } from "../../util/test-data.util";
-import { useMemo } from "react";
+import { useQuery } from "@tanstack/react-query";
+import axios from "axios";
 import type { PassengerData } from "../../interfaces/passenger.interface";
 
-const PassengersPage = () => {
-  const data: PassengerData = createTestPassengerData();
-
-  // Memoize the flight info so that it doesn't have to be recalculated every time the component re-renders
-  const allInfo = useMemo(() => {
-    const generalInfo = {
-      "Full Name": data["Full Name"],
-      "First Name": data["First Name"],
-      Street: data.Street,
-      Country: data.Country,
-      "Email Address": data.Email,
-      "Type of Passenger": data.Type,
-      "Military Service Status": data["Military Service"],
-      "Military Member Status": data["Military Member"],
-      "How did you hear about us?": data["How did you hear about us"],
-      Passengers: data["Passenger Names (from All Flight Legs)"],
-    };
-
-    const medicalInfo = {
-      "Date of Birth": data["Date of Birth"].split("T")[0],
-      Gender: data.Gender,
-      Ethnicity: data.Ethnicity,
-      Diagnosis: data.Diagnosis,
-    };
+const ID = "rec9C9rLarSiAb9ZQ";
 
-    const financialInfo = {
-      "Household Income": data["Household Income"],
-      "Household Size": data["Household Size"],
-    };
-
-    const flightInfo = {
-      "All Flights": data["All Flight Legs"],
-      "Number of Flight Legs": data["# of Flight Legs"],
-      "Number of Booked Flight Requests": data["# of Booked Flight Requests"],
-    };
+const PassengersPage = () => {
+  // ping the getUserByID endpoint to get the user's data
+  const { data: passengerData, isLoading: passengerLoading } =
+    useQuery<PassengerData>({
+      queryKey: ["passenger"],
+      queryFn: async () =>
+        axios
+          .get(`${process.env.VITE_HOST}/passenger/${ID}`)
+          .then((res) => res.data),
+      enabled: true,
+    });
 
-    return {
-      generalInfo,
-      medicalInfo,
-      financialInfo,
-      flightInfo,
-    };
-  }, [data]);
+  const {
+    data: accompanyingPassengerData,
+    isLoading: accompanyingPassengerLoading,
+  } = useQuery<PassengerData[]>({
+    queryKey: ["accompanyingPassengers"],
+    queryFn: async () =>
+      axios
+        .get(`${process.env.VITE_HOST}/passenger/accompanying?id=${ID}`)
+        .then((res) => res.data),
+    enabled: true,
+  });
 
-  const { generalInfo } = allInfo;
+  if (
+    passengerLoading ||
+    accompanyingPassengerLoading ||
+    !accompanyingPassengerData ||
+    !passengerData
+  ) {
+    return <div>TEST...</div>;
+  }
 
   return (
     <>
@@ -58,18 +47,18 @@ const PassengersPage = () => {
           <h2 className={styles.header}>Patients and Companions</h2>
           <h3 className={styles.subheader}>Patient Information</h3>
           <div className={styles.patientInfo}>
-            <PatientCard patient={createTestPassengerData()} />
+            <PatientCard patient={passengerData} />
           </div>
         </div>
         <div className={styles.passengerSection}>
           <h3 className={styles.subheader}>Companion Information</h3>
           <h5 className={styles.description}>
-            Companions of {generalInfo["First Name"]}
+            Companions of {passengerData["First Name"]}
           </h5>
           <div className={styles.passengersContainer}>
-            {generalInfo.Passengers.map((index) => (
+            {accompanyingPassengerData.map((passenger, index) => (
               <div className={styles.passengerCard} key={index}>
-                <PassengerCard passenger={createTestPassengerData()} />
+                <PassengerCard passenger={passenger} />
               </div>
             ))}
           </div>