From efb0a8a0d58106d3f07ee96d279df34d72f0a62a Mon Sep 17 00:00:00 2001
From: Dwain-Anderson <dka36@cornell.edu>
Date: Sun, 6 Oct 2024 10:19:37 -0400
Subject: [PATCH] dka36/Reassign Button Fix

---
 .../components/Modal/AssignDriverModal.tsx    | 22 +++++++++++++++----
 .../src/components/UserTables/RidesTable.tsx  | 16 ++++++++++----
 2 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/Modal/AssignDriverModal.tsx b/frontend/src/components/Modal/AssignDriverModal.tsx
index c2bc5624..9e4df9e4 100644
--- 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
index e78f9548..575c2994 100644
--- 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}`}