Merge pull request #551 from cornell-dti/dka34/link_fix

Dka34/link fix
cornell-dti · Nov 11, 2024 · b835bc1 · b835bc1
2 parents 772fc32 + 5cb51c9
commit b835bc1
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 48 deletions.
diff --git 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 (
-    <Link
-      to={{
-        pathname:
-          isAdmin || isBoth
-            ? `/admins/${userInfo.id}`
-            : `/drivers/${userInfo.id}`,
-      }}
-      style={{ textDecoration: 'none', color: 'inherit' }}
+    <div
+      onClick={handleClick}
+      style={{ cursor: 'pointer' }}
       className={styles.link}
     >
       <Card
@@ -96,7 +98,7 @@ const EmployeeCard = ({
           <p>{roles()}</p>
         </CardInfo>
       </Card>
-    </Link>
+    </div>
   );
 };
 

diff --git 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,21 +135,35 @@ const findEmployee = (
 };
 
 const Header = () => {
+  const navigate = useNavigate();
+
+  const handleBack = () => {
+    navigate('/admin/employees');
+  };
+
   return (
     <div className={styles.pageDivTitle}>
-      <Link
-        to={{
-          pathname: '/employees',
-        }}
+      <button
+        onClick={handleBack}
         className={styles.header}
+        style={{
+          background: 'none',
+          border: 'none',
+          cursor: 'pointer',
+          display: 'flex',
+          alignItems: 'center',
+          padding: 0,
+          fontSize: 'inherit',
+          color: 'inherit',
+        }}
       >
         <img
           className={styles.chevronLeft}
           src={chevronLeft}
           alt="Back to Employees List"
         />
         Employees
-      </Link>
+      </button>
     </div>
   );
 };
@@ -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 = () => {
             )}
           </UserDetail>
           <EmployeeStatistics rideCount={rideCount} hours={workingHours} />
-          {/* <PastRides isStudent={false} rides={rides} /> */}
         </div>
       </main>
     );

diff --git 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,37 +10,50 @@ import { useRiders } from '../../context/RidersContext';
 import { chevronLeft } from '../../icons/other';
 import axios from '../../util/axios';
 
-const Header = () => {
+const Header = ({ onBack }: { onBack: () => void }) => {
   return (
     <div className={styles.pageDivTitle}>
-      <Link
-        to={{
-          pathname: '/riders',
-        }}
+      <button
+        onClick={onBack}
         className={styles.header}
+        style={{
+          background: 'none',
+          border: 'none',
+          cursor: 'pointer',
+          display: 'flex',
+          alignItems: 'center',
+          padding: 0,
+        }}
       >
-        <img className={styles.chevronLeft} src={chevronLeft} />
+        <img className={styles.chevronLeft} src={chevronLeft} alt="Back" />
         Students
-      </Link>
+      </button>
     </div>
   );
 };
 
 const RiderDetail = () => {
+  const navigate = useNavigate();
   const { id: riderId } = useParams<{ id: string }>();
   const { riders } = useRiders();
   const [rider, setRider] = useState(
     riders.find((rider) => rider.id === riderId)
   );
   const [rides, setRides] = useState<Ride[]>([]);
   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);
     if (x < y) return -1;
     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 ? (
     <main id="main">
-      <Header />
+      <Header onBack={handleBack} />
       <div className={styles.detailContainer}>
         <UserDetail
           firstName={rider.firstName}

diff --git a/frontend/src/components/UserTables/StudentsTable.tsx b/frontend/src/components/UserTables/StudentsTable.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
-import cn from 'classnames';
+import { useNavigate } from 'react-router-dom';
 import moment from 'moment';
 import { Row, Table } from '../TableComponents/TableComponents';
 import styles from './table.module.css';
 import { Rider } from 'types';
 
 type StudentsTableProps = {
-  students: Rider[]; // Now receives the filtered list of students as a prop
+  students: Rider[];
 };
 
 const StudentsTable = ({ students }: StudentsTableProps) => {
+  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 (
     <Table>
       <Row header colSizes={colSizes} data={headers} />
@@ -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 (
-          <Link
+          <div
             key={id}
-            to={location}
-            style={{
-              display: 'block',
-              textDecoration: 'none',
-              color: 'inherit',
-            }}
+            onClick={() => handleRowClick(id)}
+            style={{ cursor: 'pointer' }}
           >
             <Row data={data} colSizes={colSizes} />
-          </Link>
+          </div>
         );
       })}
     </Table>

diff --git a/frontend/src/pages/Admin/Routes.tsx b/frontend/src/pages/Admin/Routes.tsx
@@ -35,10 +35,8 @@ const RoutesComponent = () => {
           <Route path="employees" element={<Employees />} />
           <Route path="admins/:id" element={<EmployeeDetail />} />
           <Route path="drivers/:id" element={<EmployeeDetail />} />
-          <Route path="riders" element={<Outlet />}>
-            <Route index element={<Students />} />
-            <Route path=":id" element={<RiderDetail />} />
-          </Route>
+          <Route path="riders" element={<Students />} />
+          <Route path="riders/:id" element={<RiderDetail />} />
           <Route path="locations" element={<Locations />} />
           <Route path="analytics" element={<Analytics />} />
         </Routes>