Dka34/link fix

README.md

@@ -26,50 +26,72 @@ The **Rider App** branch can be found [here](https://github.com/cornell-dti/carr
 
 ## Contributors:
 
-**Current Contributors**
-
-- Harrison Chin - Software Developer
-- Andrew Choi - Product Manager
-- Rohit Valiveti - Software Developer
-- Pratyush Sudhakar - Technical Project Manager
-- Enoch Chen - Software Developer
-- Desmond Atikpui - Software Developer
-- Stuti Gupta - Software Developer
-- Kevin Lin - Software Developer
-- Colin Wu - Software Developer
-- Raissa Ji - Software Developer
-- Nam Anh Dang - Software Developer
-- Selena Liu - Software Developer
-- Dwain Anderson - Software Developer
-
-**Past Contributors**
-
-- Daniel Wei - Technical Project Manager
-- Bryan Graeser - Product Manager
-- Nina Xie - Product Manager
-- Matthew Guo - Technical Project Manager
-- Aaron Kang - Software Developer
-- Zack Ashen - Software Developer
-- Tucker Stanley - Software Developer
-- Justin Kang - Software Developer
-- Michael Torku - Technical Project Manager
-- Austin Wu - Software Developer
-- Li Fengyu - Software Developer
-- Sam Steinberg - Product Manager
-- Laura Sizemore - Technical Project Manager, Software Developer
-- Christopher Hansen - Technical Project Manager
-- Jessica Chen - Software Developer
-- Bryan Graeser - Software Developer
-- Matthew Guo - Software Developer
-- Ishika Jain - Software Developer
-- Lucy Wang - Software Developer
-- Michael Ye - Software Developer
-- Becky Hu - Software Developer
-- Laura Sizemore - Software Developer
-- Pinxuan Huang - Software Developer
-- Jay Joo - Software Developer
-- Simran Puri - Software Developer
-- Aiden Kim - Designer
-- Yisu Zheng - Designer
-- Chelsea Wang - Designer
-- Joanne Lee - Designer
+## Contributors
+
+### Current Contributors
+
+#### Product Manager
+- Matthias Choi
+
+#### Technical Project Manager
+- Desmond Atikpui
+
+#### Software Developers
+- Dwain Anderson
+- Nam Anh Dang
+- Raissa Ji
+- Selena Liu
+
+---
+
+### Past Contributors
+
+#### Product Managers
+- Andrew Choi
+- Bryan Graeser
+- Nina Xie
+- Sam Steinberg
+- Stephy Chen
+
+#### Technical Project Managers
+- Christopher Hansen
+- Daniel Wei
+- Laura Sizemore
+- Matthew Guo
+- Michael Torku
+- Pratyush Sudhakar
+
+#### Software Developers
+- Aaron Kang
+- Aiden Kim
+- Andrew Choi
+- Becky Hu
+- Bryan Graeser
+- Chelsea Wang
+- Colin Wu
+- Enoch Chen
+- Harrison Chin
+- Ishika Jain
+- Jay Joo
+- Jessica Chen
+- Joanne Lee
+- Justin Kang
+- Kevin Lin
+- Laura Sizemore
+- Li Fengyu
+- Lucy Wang
+- Matthew Guo
+- Michael Ye
+- Pinxuan Huang
+- Rohit Valiveti
+- Simran Puri
+- Stuti Gupta
+- Tucker Stanley
+- Zack Ashen
+
+#### Designers
+- Aiden Kim
+- Chelsea Wang
+- Joanne Lee
+- Yisu Zheng
+

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,10 +31,11 @@
     startDate,
   },
 }: EmployeeCardProps) => {
+  const navigate = useNavigate();
   const netId = email.split('@')[0];
   const fmtPhone = formatPhone(phoneNumber);
 
   const formatAvail = (availability: {
     [key: string]: { startTime: string; endTime: string };
   }) => {
     if (!availability) {
@@ -51,14 +52,14 @@
   };
 
   const isAdmin = isDriver !== undefined;
   const isBoth = isDriver && isDriver == true;
   const roles = (): string => {
     if (isBoth) return 'Admin • Driver';
     if (isAdmin) return 'Admin';
     return 'Driver';
   };
 
   const userInfo = {
     id,
     firstName,
     lastName,
@@ -69,15 +70,16 @@
     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 @@
           <p>{roles()}</p>
         </CardInfo>
       </Card>
-    </Link>
+    </div>
   );
 };
 

frontend/src/components/Modal/AssignDriverModal.tsx

@@ -10,7 +10,7 @@ type AssignModalProps = {
   ride: Ride;
   allDrivers: Driver[];
   reassign: boolean;
-  buttonRef: any
+  buttonRef: any;
 };
 
 type DriverRowProps = {
@@ -44,8 +44,10 @@ const AssignDriverModal = ({
     useEffect(() => {
       function handleClickOutside(event: any) {
         event.stopPropagation();
-        const isClickOutsideButton = buttonRef.current && !buttonRef.current.contains(event.target);
-        const isClickOutsideModal = wrapperRef.current && !wrapperRef.current.contains(event.target);
+        const isClickOutsideButton =
+          buttonRef.current && !buttonRef.current.contains(event.target);
+        const isClickOutsideModal =
+          wrapperRef.current && !wrapperRef.current.contains(event.target);
         if (isClickOutsideModal && isClickOutsideButton) {
           close();
         }
@@ -69,9 +71,8 @@ const AssignDriverModal = ({
     close();
   };
 
-
   useOutsideAlerter(wrapperRef, buttonRef);
- 
+
   return (
     <>
       {isOpen && (

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>
     );

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}

frontend/src/components/UserTables/RidesTable.tsx

@@ -1,4 +1,4 @@
-import React, { useState }from 'react';
+import React, { useState } from 'react';
 import { Ride } from '../../types/index';
 import { Row, Table } from '../TableComponents/TableComponents';
 import { Button } from '../FormElements/FormElements';
@@ -94,14 +94,13 @@ const RidesTable = ({ rides, hasButtons }: RidesTableProps) => {
             ),
           };
 
-
           const assignButton = (shouldReassign: boolean) => (
-            <Button 
+            <Button
               className={styles.assignButton}
               ref={buttonRef}
-              onClick={(e) =>  {
+              onClick={(e) => {
                 e.stopPropagation();
-                setOpenAssignModal((openAssignModal === index ? -1 : index));
+                setOpenAssignModal(openAssignModal === index ? -1 : index);
                 setReassign(shouldReassign);
               }}
               small