dka36/Reassign Button Fix

cornell-dti · Oct 6, 2024 · efb0a8a · efb0a8a
1 parent 743874b
commit efb0a8a
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 8 deletions.
diff --git a/frontend/src/components/Modal/AssignDriverModal.tsx b/frontend/src/components/Modal/AssignDriverModal.tsx
@@ -10,6 +10,7 @@ type AssignModalProps = {
   ride: Ride;
   allDrivers: Driver[];
   reassign: boolean;
+  buttonRef: any
 };
 
 type DriverRowProps = {
@@ -35,13 +36,23 @@ const AssignDriverModal = ({
   ride,
   allDrivers,
   reassign = false,
+  buttonRef,
 }: AssignModalProps) => {
   const { refreshRides } = useRides();
   // source: https://stackoverflow.com/questions/32553158/detect-click-outside-react-component
-  function useOutsideAlerter(ref: any) {
+  function useOutsideAlerter(wrapperRef: any, buttonRef: any) {
     useEffect(() => {
       function handleClickOutside(event: any) {
-        if (ref.current && !ref.current.contains(event.target)) {
+        console.log("Button ref:", buttonRef.current); // Debugging statement
+        console.log("T1 WORK");
+        if (buttonRef.current === null) {
+          console.log("Button reference is null");
+        }
+        event.stopPropagation();
+        const isClickOutsideButton = buttonRef.current && !buttonRef.current.contains(event.target);
+        const isClickOutsideModal = wrapperRef.current && !wrapperRef.current.contains(event.target);
+        if (isClickOutsideModal && isClickOutsideButton) {
+          console.log("T2 (INTERRUPT) WORK");
           close();
         }
       }
@@ -50,8 +61,9 @@ const AssignDriverModal = ({
       return () => {
         document.removeEventListener('mousedown', handleClickOutside);
       };
-    }, [ref]);
+    }, [wrapperRef, buttonRef]);
   }
+
   const wrapperRef = useRef(null);
   const addDriver = (driver: Driver) => {
     axios
@@ -62,8 +74,10 @@ const AssignDriverModal = ({
       .then(() => refreshRides());
     close();
   };
-  useOutsideAlerter(wrapperRef);
 
+
+  useOutsideAlerter(wrapperRef, buttonRef);
+
   return (
     <>
       {isOpen && (

diff --git a/frontend/src/components/UserTables/RidesTable.tsx b/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';
@@ -8,6 +8,8 @@ import styles from './table.module.css';
 import { useEmployees } from '../../context/EmployeesContext';
 import DeleteOrEditTypeModal from '../Modal/DeleteOrEditTypeModal';
 import { trashbig } from '../../icons/other/index';
+import { useEffect } from 'react';
+import { useRef } from 'react';
 
 type RidesTableProps = {
   rides: Ride[];
@@ -22,6 +24,7 @@ const RidesTable = ({ rides, hasButtons }: RidesTableProps) => {
   const [editSingle, setEditSingle] = useState(false);
   const [reassign, setReassign] = useState(false);
   const [deleteOpen, setDeleteOpen] = useState(-1);
+  let buttonRef = useRef(null);
 
   const unscheduledColSizes = [0.5, 0.5, 0.8, 1, 1, 0.8, 1];
   const unscheduledHeaders = [
@@ -85,11 +88,14 @@ const RidesTable = ({ rides, hasButtons }: RidesTableProps) => {
             ),
           };
 
+
           const assignButton = (shouldReassign: boolean) => (
-            <Button
+            <Button 
               className={styles.assignButton}
-              onClick={() => {
-                setOpenAssignModal(index);
+              ref={buttonRef}
+              onClick={(e) =>  {
+                e.stopPropagation();
+                setOpenAssignModal((openAssignModal === index ? -1 : index));
                 setReassign(shouldReassign);
               }}
               small
@@ -118,6 +124,7 @@ const RidesTable = ({ rides, hasButtons }: RidesTableProps) => {
             <button
               className={styles.deleteIcon}
               onClick={() => {
+                //buttonRef = null;
                 setDeleteOpen(index);
               }}
             >
@@ -204,6 +211,7 @@ const RidesTable = ({ rides, hasButtons }: RidesTableProps) => {
                 ride={rides[index]}
                 allDrivers={drivers}
                 reassign={reassign}
+                buttonRef={buttonRef}
               />
               <RideModal
                 key={`ride-modal-${ride.id}`}