WIP: Student Modal Layout

frontend/src/components/ExportPreview/ExportPreview.tsx

@@ -1,16 +1,16 @@
 import React, { useState, useRef } from 'react';
 import { CSVLink } from 'react-csv';
 import ScheduledTable from '../UserTables/ScheduledTable';
 import { Driver } from '../../types/index';
 import styles from './exportPreview.module.css';
 import { useEmployees } from '../../context/EmployeesContext';
 import ExportButton from '../ExportButton/ExportButton';
 import { useDate } from '../../context/date';
 import { format_date } from '../../util';
 import axios from '../../util/axios';
 
 const ExportPreview = () => {
   const { drivers } = useEmployees();
   const [downloadData, setDownloadData] = useState<string>('');
   const { curDate } = useDate();
   const csvLink = useRef<
@@ -19,7 +19,7 @@
 
   const today = format_date(curDate);
 
   const downloadCSV = () => {
     axios
       .get(`/api/rides/download?date=${today}`, {
         responseType: 'text',
@@ -39,6 +39,7 @@
       <p className={styles.date}>{format_date(curDate)}</p>
       <h1 className={styles.header}>Scheduled Rides</h1>
       <div id="exportTable">
+        {/* TODO: download csv option for driver and student */}
         <ScheduledTable />
       </div>
       <div className={styles.exportButtonContainer}>

frontend/src/components/RequestRideModal/RequestRideInfo.tsx

@@ -10,6 +10,7 @@ import CustomRepeatingRides from './CustomRepeatingRides';
 import { RideModalType } from './types';
 import { checkBounds, isTimeValid } from '../../util/index';
 import { useLocations } from '../../context/LocationsContext';
+import { Tag } from '../../types/index';
 
 type RequestRideInfoProps = {
   ride?: Ride;
@@ -65,11 +66,13 @@ const RequestRideInfo: React.FC<RequestRideInfoProps> = ({
   useEffect(() => {
     if (ride) {
       const defaultStart =
-        ride.startLocation.tag === 'custom'
+        ride.startLocation.tag.valueOf() === Tag.CUSTOM.valueOf()
           ? 'Other'
           : ride.startLocation.id ?? '';
       const defaultEnd =
-        ride.endLocation.tag === 'custom' ? 'Other' : ride.endLocation.id ?? '';
+        ride.endLocation.tag.valueOf() === Tag.CUSTOM.valueOf()
+          ? 'Other'
+          : ride.endLocation.id ?? '';
       setValue('startLocation', defaultStart);
       setValue('endLocation', defaultEnd);
     }

frontend/src/components/UserDetail/AllRidesTable.tsx

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import { useTheme } from '@mui/material/styles';
+import AppBar from '@mui/material/AppBar';
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import ScheduledTable from '../UserTables/ScheduledTable';
+import UnscheduledTable from '../UserTables/UnscheduledTable';
+import PastRides from './PastRides';
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  dir?: string;
+  index: number;
+  value: number;
+}
+
+type RidesTableProps = {
+  riderId?: string;
+};
+
+function TabPanel(props: TabPanelProps) {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`full-width-tabpanel-${index}`}
+      aria-labelledby={`full-width-tab-${index}`}
+      {...other}
+    >
+      {value === index && (
+        <Box sx={{ p: 3 }}>
+          <Typography>{children}</Typography>
+        </Box>
+      )}
+    </div>
+  );
+}
+
+function a11yProps(index: number) {
+  return {
+    id: `full-width-tab-${index}`,
+    'aria-controls': `full-width-tabpanel-${index}`,
+  };
+}
+
+function RidesTable({ riderId }: RidesTableProps) {
+  const theme = useTheme();
+  const [value, setValue] = React.useState(0);
+
+  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+    setValue(newValue);
+  };
+
+  return (
+    <Box sx={{ bgcolor: 'background.paper', width: 500 }}>
+      <AppBar position="static">
+        <Tabs
+          value={value}
+          onChange={handleChange}
+          indicatorColor="secondary"
+          textColor="inherit"
+          variant="fullWidth"
+          aria-label="full width tabs example"
+        >
+          <Tab label="Scheduled Rides" {...a11yProps(0)} />
+          <Tab label="Unscheduled Rides" {...a11yProps(1)} />
+          <Tab label="Past Rides" {...a11yProps(2)} />
+        </Tabs>
+      </AppBar>
+      <TabPanel value={value} index={0} dir={theme.direction}>
+        <ScheduledTable riderId={riderId} />
+      </TabPanel>
+      <TabPanel value={value} index={1} dir={theme.direction}>
+        {/* TODO: need to display unscheduled rides per rider */}
+        <UnscheduledTable />
+      </TabPanel>
+      <TabPanel value={value} index={2} dir={theme.direction}>
+        {/* TODO: need to display rider's ride history */}
+        Past Rides
+      </TabPanel>
+    </Box>
+  );
+}
+
+export default RidesTable;

frontend/src/components/UserDetail/RiderDetail.tsx

@@ -9,6 +9,7 @@ import styles from './userDetail.module.css';
 import { useRiders } from '../../context/RidersContext';
 import { chevronLeft } from '../../icons/other';
 import axios from '../../util/axios';
+import AllRidesTable from './AllRidesTable';
 
 const Header = ({ onBack }: { onBack: () => void }) => {
   return (
@@ -108,7 +109,7 @@ const RiderDetail = () => {
             />
           </div>
         </UserDetail>
-        <PastRides isStudent={true} rides={rides} />
+        <AllRidesTable riderId={riderId} />
       </div>
     </main>
   ) : null;

frontend/src/components/UserDetail/UserDetail.tsx

@@ -12,6 +12,7 @@ import { useRiders } from '../../context/RidersContext';
 import { ToastStatus, useToast } from '../../context/toastContext';
 import AuthContext from '../../context/auth';
 import axios from '../../util/axios';
+import AllRidesTable from './AllRidesTable';
 
 type otherInfo = {
   children: JSX.Element | JSX.Element[];
@@ -97,6 +98,7 @@ const UserDetail = ({
       });
     }
   };
+
   return (
     <div className={cn(styles.userDetail, { [styles.rider]: isRider })}>
       {isShowing && rider ? (

frontend/src/components/UserTables/ScheduledTable.tsx

@@ -6,14 +6,20 @@ import { useEmployees } from '../../context/EmployeesContext';
 import { useRides } from '../../context/RidesContext';
 
 type ScheduledTableProp = {
-  query: string; // either 'rider' or 'driver'
+  riderId?: string;
 };
 
-const ScheduledTable = () => {
+const ScheduledTable = ({ riderId }: ScheduledTableProp) => {
   const { drivers } = useEmployees();
   const [rides, setRides] = useState<Ride[]>([]);
   const { scheduledRides } = useRides();
 
+  // the ride(s) for the student with the specific riderId
+  const filteredRides = rides.filter((ride) => ride.rider?.id === riderId);
+
+  // check that the rides displayed are associated with this student
+  filteredRides.forEach((ride) => console.log(ride.rider?.firstName));
+
   const compRides = (a: Ride, b: Ride) => {
     const x = new Date(a.startTime);
     const y = new Date(b.startTime);
@@ -28,16 +34,21 @@ const ScheduledTable = () => {
 
   return rides.length ? (
     <>
-      {drivers.map(({ id, firstName, lastName }) => {
-        const name = `${firstName} ${lastName}`;
-        const driverRides = rides.filter((r) => r.driver?.id === id);
-        return driverRides.length ? (
-          <React.Fragment key={id}>
-            <h1 className={styles.formHeader}>{name}</h1>
-            <RidesTable rides={driverRides} hasButtons={false} />
-          </React.Fragment>
-        ) : null;
-      })}
+      {/* if there is a riderId prop it means we want to display all of their rides. otherwise, we display each driver's rides */}
+      {riderId ? (
+        <RidesTable rides={filteredRides} hasButtons={false} />
+      ) : (
+        drivers.map(({ id, firstName, lastName }) => {
+          const name = `${firstName} ${lastName}`;
+          const driverRides = rides.filter((r) => r.driver?.id === id);
+          return driverRides.length ? (
+            <React.Fragment key={id}>
+              <h1 className={styles.formHeader}>{name}</h1>
+              <RidesTable rides={driverRides} hasButtons={false} />
+            </React.Fragment>
+          ) : null;
+        })
+      )}
     </>
   ) : null;
 };

frontend/src/components/UserTables/StudentsTable.tsx

@@ -24,9 +24,9 @@ const StudentsTable = ({ students }: StudentsTableProps) => {
   ];
 
   const fmtPhone = (number: string) => {
-    const areaCode = number.slice(0, 3);
-    const firstPart = number.slice(3, 6);
-    const secondPart = number.slice(6);
+    const areaCode = number?.slice(0, 3);
+    const firstPart = number?.slice(3, 6);
+    const secondPart = number?.slice(6);
     return `(${areaCode}) ${firstPart} ${secondPart}`;
   };
 

frontend/src/context/RidersContext.tsx

@@ -18,6 +18,15 @@ type RidersProviderProps = {
   children: React.ReactNode;
 };
 
+const sortByName = (
+  a: { firstName: string; lastName: string },
+  b: { firstName: string; lastName: string }
+) => {
+  const aFull = `${a.firstName} ${a.lastName}`.toLowerCase();
+  const bFull = `${b.firstName} ${b.lastName}`.toLowerCase();
+  return aFull < bFull ? -1 : 1;
+};
+
 export const RidersProvider = ({ children }: RidersProviderProps) => {
   const componentMounted = useRef(true);
   const [riders, setRiders] = useState<Array<Rider>>([]);
@@ -26,12 +35,8 @@ export const RidersProvider = ({ children }: RidersProviderProps) => {
       .get('/api/riders')
       .then((res) => res.data)
       .then((data) => data.data);
-    ridersData &&
-      ridersData.sort((a: Rider, b: Rider) => {
-        const aFull = `${a.firstName} ${a.lastName}`.toLowerCase();
-        const bFull = `${b.firstName} ${b.lastName}`.toLowerCase();
-        return aFull < bFull ? -1 : 1;
-      });
+
+    ridersData && ridersData.sort(sortByName);
     ridersData && componentMounted.current && setRiders(ridersData);
   }, []);