From 5cb51c9b14dd31ebb198b59b4a2f4c62b16c700e Mon Sep 17 00:00:00 2001 From: Desmond Atikpui Date: Mon, 11 Nov 2024 15:03:03 -0500 Subject: [PATCH] Navigation Fix --- .../EmployeeCards/EmployeeCards.tsx | 22 +++++++------ .../components/UserDetail/EmployeeDetail.tsx | 31 +++++++++++++------ .../src/components/UserDetail/RiderDetail.tsx | 31 +++++++++++++------ .../components/UserTables/StudentsTable.tsx | 27 +++++++--------- frontend/src/pages/Admin/Routes.tsx | 6 ++-- 5 files changed, 69 insertions(+), 48 deletions(-) diff --git a/frontend/src/components/EmployeeCards/EmployeeCards.tsx b/frontend/src/components/EmployeeCards/EmployeeCards.tsx index fcdc772f4..dde780853 100644 --- a/frontend/src/components/EmployeeCards/EmployeeCards.tsx +++ b/frontend/src/components/EmployeeCards/EmployeeCards.tsx @@ -1,4 +1,4 @@ -import { Link } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; import Card, { CardInfo } from '../Card/Card'; import styles from './employeecards.module.css'; import { phone, wheel, user } from '../../icons/userInfo/index'; @@ -31,6 +31,7 @@ const EmployeeCard = ({ startDate, }, }: EmployeeCardProps) => { + const navigate = useNavigate(); const netId = email.split('@')[0]; const fmtPhone = formatPhone(phoneNumber); @@ -69,15 +70,16 @@ const EmployeeCard = ({ startDate, }; + const handleClick = () => { + const path = + isAdmin || isBoth ? `/admin/admins/${id}` : `/admin/drivers/${id}`; + navigate(path); + }; + return ( - {roles()}

 - + ); }; diff --git a/frontend/src/components/UserDetail/EmployeeDetail.tsx b/frontend/src/components/UserDetail/EmployeeDetail.tsx index 54675e9e6..a6325e8a9 100644 --- a/frontend/src/components/UserDetail/EmployeeDetail.tsx +++ b/frontend/src/components/UserDetail/EmployeeDetail.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from 'react'; -import { useParams, Link, useLocation } from 'react-router-dom'; +import { useParams, useLocation, useNavigate } from 'react-router-dom'; import { Ride } from '../../types'; import UserDetail, { UserContactInfo } from './UserDetail'; import { @@ -92,7 +92,6 @@ const EmployeeStatistics = ({ rideCount, hours }: EmployeeStatisticsProps) => { ); }; -//Convert DriverType to EmployeeType const DriverToEmployees = (drivers: DriverType[]): EmployeeDetailProps[] => { return drivers.map((driver) => ({ id: driver.id, @@ -106,7 +105,6 @@ const DriverToEmployees = (drivers: DriverType[]): EmployeeDetailProps[] => { })); }; -//Convert AdminType to EmployeeType const AdminToEmployees = (admins: AdminType[]): EmployeeDetailProps[] => { return admins.map((admin) => ({ id: admin.id, @@ -137,13 +135,27 @@ const findEmployee = ( }; const Header = () => { + const navigate = useNavigate(); + + const handleBack = () => { + navigate('/admin/employees'); + }; + return (
- { alt="Back to Employees List" /> Employees - +
); }; @@ -270,7 +282,7 @@ const EmployeeDetail = () => { if (employee) { const isAdmin = employee.isDriver !== undefined; - const isBoth = employee.isDriver ?? false; // isDriver is only for admins + also driver if true + const isBoth = employee.isDriver ?? false; const availToString = (acc: string, [day, timeRange]: string[]) => `${acc + day}: ${timeRange} • `; const parsedAvail = employee.availability @@ -325,7 +337,6 @@ const EmployeeDetail = () => { )} - {/* */} ); diff --git a/frontend/src/components/UserDetail/RiderDetail.tsx b/frontend/src/components/UserDetail/RiderDetail.tsx index 520a1bfa9..d1a964c62 100644 --- a/frontend/src/components/UserDetail/RiderDetail.tsx +++ b/frontend/src/components/UserDetail/RiderDetail.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from 'react'; import moment from 'moment'; -import { useParams, Link } from 'react-router-dom'; +import { useParams, useNavigate } from 'react-router-dom'; import UserDetail, { UserContactInfo } from './UserDetail'; import { phone, home, calendar } from '../../icons/userInfo/index'; import PastRides from './PastRides'; @@ -10,23 +10,30 @@ import { useRiders } from '../../context/RidersContext'; import { chevronLeft } from '../../icons/other'; import axios from '../../util/axios'; -const Header = () => { +const Header = ({ onBack }: { onBack: () => void }) => { return (
- - + Back Students - +
); }; const RiderDetail = () => { + const navigate = useNavigate(); const { id: riderId } = useParams<{ id: string }>(); const { riders } = useRiders(); const [rider, setRider] = useState( @@ -34,6 +41,11 @@ const RiderDetail = () => { ); const [rides, setRides] = useState([]); const netid = rider?.email.split('@')[0]; + + const handleBack = () => { + navigate('/admin/riders'); + }; + const compRides = (a: Ride, b: Ride) => { const x = new Date(a.startTime); const y = new Date(b.startTime); @@ -41,6 +53,7 @@ const RiderDetail = () => { if (x > y) return 1; return 0; }; + const formatDate = (date: string): string => moment(date).format('MM/DD/YYYY'); @@ -70,7 +83,7 @@ const RiderDetail = () => { return rider ? (
-
+
{ + const navigate = useNavigate(); const colSizes = [1, 0.75, 0.75, 1, 1.25, 1, 1, 1]; const headers = [ 'Name / NetId', @@ -33,6 +33,10 @@ const StudentsTable = ({ students }: StudentsTableProps) => { const formatDate = (date: string): string => moment(date).format('MM/DD/YYYY'); + const handleRowClick = (id: string) => { + navigate(`/admin/riders/${id}`); + }; + return ( @@ -71,33 +75,26 @@ const StudentsTable = ({ students }: StudentsTableProps) => { const shortAddress = address.split(',')[0]; const joinEndDate = `${formatDate(joinDate)} - ${formatDate(endDate)}`; const isActive = active ? 'Active' : 'Inactive'; - const location = { - pathname: `/riders/${r.id}`, - }; const data = [ nameNetId, phone, shortAddress, joinEndDate, - '0 Rides / 0 No Shows', // You can add real usage data here + '0 Rides / 0 No Shows', disability, isActive, 'Edit', ]; return ( - handleRowClick(id)} + style={{ cursor: 'pointer' }} > - + ); })}
diff --git a/frontend/src/pages/Admin/Routes.tsx b/frontend/src/pages/Admin/Routes.tsx index 993b9d6b2..25d806772 100644 --- a/frontend/src/pages/Admin/Routes.tsx +++ b/frontend/src/pages/Admin/Routes.tsx @@ -35,10 +35,8 @@ const RoutesComponent = () => { } /> } /> } /> - }> - } /> - } /> - + } /> + } /> } /> } />