From 469c426e0560d4c72a5c727afed22950ea919b74 Mon Sep 17 00:00:00 2001
From: Brett Heath-Wlaz <bheathwlaz@mbta.com>
Date: Thu, 31 Oct 2024 14:34:11 -0400
Subject: [PATCH] fix crash when canceling alert association (#547)

---
 .../PaMessageForm/AssociateAlert.tsx          | 118 ++++++------------
 .../Dashboard/PaMessageForm/PaMessageForm.tsx |  24 ++--
 2 files changed, 52 insertions(+), 90 deletions(-)

diff --git a/assets/js/components/Dashboard/PaMessageForm/AssociateAlert.tsx b/assets/js/components/Dashboard/PaMessageForm/AssociateAlert.tsx
index 6579c6c39..11e7444ae 100644
--- a/assets/js/components/Dashboard/PaMessageForm/AssociateAlert.tsx
+++ b/assets/js/components/Dashboard/PaMessageForm/AssociateAlert.tsx
@@ -1,10 +1,4 @@
-import React, {
-  Dispatch,
-  SetStateAction,
-  ComponentType,
-  useState,
-  useEffect,
-} from "react";
+import React, { useState, useEffect } from "react";
 import {
   Button,
   Container,
@@ -15,32 +9,25 @@ import {
   Form,
 } from "react-bootstrap";
 import { fetchActiveAndFutureAlerts } from "Utils/api";
-import { Alert, InformedEntity } from "Models/alert";
+import { Alert } from "Models/alert";
 import classNames from "classnames";
 import { getAlertEarliestStartLatestEnd } from "../../../util";
-import { Page } from "./types";
 import moment from "moment";
 
 interface AssociateAlertPageProps {
-  associatedAlert: Alert | string | null;
-  endWithEffectPeriod: boolean;
-  onImportMessage: (message: string) => void;
-  onImportLocations: (informedEntities: InformedEntity[]) => void;
-  navigateTo: (page: Page) => void;
-  setAssociatedAlert: Dispatch<SetStateAction<Alert | string | null>>;
-  setEndWithEffectPeriod: Dispatch<SetStateAction<boolean>>;
+  onApply: (
+    alert: Alert,
+    endWithEffectPeriod: boolean,
+    importLocations: boolean,
+    importMessage: boolean,
+  ) => void;
+  onCancel: () => void;
 }
 
-const AssociateAlert = ({
-  associatedAlert,
-  endWithEffectPeriod,
-  onImportMessage,
-  onImportLocations,
-  navigateTo,
-  setAssociatedAlert,
-  setEndWithEffectPeriod,
-}: AssociateAlertPageProps) => {
+const AssociateAlert = ({ onApply, onCancel }: AssociateAlertPageProps) => {
   const [alerts, setAlerts] = useState<Alert[]>([]);
+  const [selectedAlert, setSelectedAlert] = useState<Alert | null>(null);
+  const [endWithEffectPeriod, setEndWithEffectPeriod] = useState<boolean>(true);
   const [importLocations, setImportLocations] = useState<boolean>(true);
   const [importMessage, setImportMessage] = useState<boolean>(true);
 
@@ -53,9 +40,6 @@ const AssociateAlert = ({
   const [selectedMessageState, setSelectedMessageState] =
     useState<string>("active");
   const [selectedServiceType, setSelectedServiceType] = useState<string>("All");
-  const [showAlertModal, setShowAlertModal] = useState<boolean>(
-    associatedAlert != null,
-  );
 
   const serviceTypes = [
     "All",
@@ -76,7 +60,7 @@ const AssociateAlert = ({
             <h1>Select alert to associate with PA/ESS Message</h1>
           </Col>
           <Col className="associate-alert-page-header__cancel">
-            <Button variant="link" onClick={() => navigateTo(Page.MAIN)}>
+            <Button variant="link" onClick={() => onCancel()}>
               Cancel
             </Button>
           </Col>
@@ -132,22 +116,18 @@ const AssociateAlert = ({
           <Col>
             <AssociateAlertsTable
               alerts={alerts}
+              onSelectAlert={setSelectedAlert}
               messageStateFilter={selectedMessageState}
               serviceTypeFilter={selectedServiceType}
-              setAssociatedAlert={setAssociatedAlert}
-              setShowAlertModal={setShowAlertModal}
             />
           </Col>
         </Row>
       </Container>
-      <Modal className="alert-items-modal" show={showAlertModal} centered>
+      <Modal className="alert-items-modal" show={!!selectedAlert} centered>
         <Modal.Header
           closeButton
           closeVariant="white"
-          onHide={() => {
-            setAssociatedAlert({} as Alert);
-            setShowAlertModal(false);
-          }}
+          onHide={() => setSelectedAlert(null)}
         >
           Select items from alert
         </Modal.Header>
@@ -158,14 +138,10 @@ const AssociateAlert = ({
                 Alert ID:{" "}
               </div>
               <div className="alert-description__header-id">
-                {typeof associatedAlert === "string"
-                  ? associatedAlert
-                  : associatedAlert?.id}
+                {selectedAlert?.id}
               </div>
             </div>
-            {typeof associatedAlert === "string"
-              ? null
-              : associatedAlert?.header}
+            {selectedAlert?.header}
           </div>
           <div className="checkbox">
             <Form.Check
@@ -198,10 +174,7 @@ const AssociateAlert = ({
         </Modal.Body>
         <Modal.Footer>
           <Button
-            onClick={() => {
-              setAssociatedAlert({} as Alert);
-              setShowAlertModal(false);
-            }}
+            onClick={() => setSelectedAlert(null)}
             className="cancel-button"
             variant="link"
           >
@@ -209,18 +182,14 @@ const AssociateAlert = ({
           </Button>
           <Button
             onClick={() => {
-              if (
-                associatedAlert == null ||
-                typeof associatedAlert === "string"
-              )
-                return;
-              if (importMessage) {
-                onImportMessage(associatedAlert.header);
-              }
-              if (importLocations) {
-                onImportLocations(associatedAlert.informed_entities);
+              if (selectedAlert) {
+                onApply(
+                  selectedAlert,
+                  endWithEffectPeriod,
+                  importLocations,
+                  importMessage,
+                );
               }
-              navigateTo(Page.MAIN);
             }}
             className="apply-button"
           >
@@ -234,18 +203,16 @@ const AssociateAlert = ({
 
 interface AssociateAlertsTableProps {
   alerts: Alert[];
+  onSelectAlert: (alert: Alert) => void;
   messageStateFilter: string;
   serviceTypeFilter: string;
-  setAssociatedAlert: Dispatch<SetStateAction<Alert | string | null>>;
-  setShowAlertModal: Dispatch<SetStateAction<boolean>>;
 }
 
-const AssociateAlertsTable: ComponentType<AssociateAlertsTableProps> = ({
+const AssociateAlertsTable = ({
   alerts,
+  onSelectAlert,
   messageStateFilter,
   serviceTypeFilter,
-  setAssociatedAlert,
-  setShowAlertModal,
 }: AssociateAlertsTableProps) => {
   const filterByActiveState = (alert: Alert) => {
     const alertStart = new Date(alert.active_period[0].start);
@@ -297,8 +264,7 @@ const AssociateAlertsTable: ComponentType<AssociateAlertsTableProps> = ({
                 <AssociateAlertsTableRow
                   key={alert.id}
                   alert={alert}
-                  setAssociatedAlert={setAssociatedAlert}
-                  setShowAlertModal={setShowAlertModal}
+                  onSelect={() => onSelectAlert(alert)}
                 />
               );
             })
@@ -311,27 +277,19 @@ const AssociateAlertsTable: ComponentType<AssociateAlertsTableProps> = ({
 
 interface AssociateAlertsTableRowProps {
   alert: Alert;
-  setAssociatedAlert: Dispatch<SetStateAction<Alert | string | null>>;
-  setShowAlertModal: Dispatch<SetStateAction<boolean>>;
+  onSelect: () => void;
 }
 
-const AssociateAlertsTableRow: ComponentType<AssociateAlertsTableRowProps> = ({
+const AssociateAlertsTableRow = ({
   alert,
-  setAssociatedAlert,
-  setShowAlertModal,
+  onSelect,
 }: AssociateAlertsTableRowProps) => {
   const [start, end] = getAlertEarliestStartLatestEnd(alert.active_period);
 
   const last_modified = moment(alert.updated_at).format("l LT");
 
   return (
-    <tr
-      className="associate-alert-table__row"
-      onClick={() => {
-        setShowAlertModal(true);
-        setAssociatedAlert(alert);
-      }}
-    >
+    <tr className="associate-alert-table__row" onClick={() => onSelect()}>
       <td>{alert.header}</td>
       <td>{alert.id}</td>
       <td>
@@ -341,13 +299,7 @@ const AssociateAlertsTableRow: ComponentType<AssociateAlertsTableRowProps> = ({
       </td>
       <td>{last_modified}</td>
       <td className="associate-alert-table__select">
-        <Button
-          variant="link"
-          onClick={() => {
-            setShowAlertModal(true);
-            setAssociatedAlert(alert);
-          }}
-        >
+        <Button variant="link" onClick={() => onSelect()}>
           Select
         </Button>
       </td>
diff --git a/assets/js/components/Dashboard/PaMessageForm/PaMessageForm.tsx b/assets/js/components/Dashboard/PaMessageForm/PaMessageForm.tsx
index bb44b31b9..50a744453 100644
--- a/assets/js/components/Dashboard/PaMessageForm/PaMessageForm.tsx
+++ b/assets/js/components/Dashboard/PaMessageForm/PaMessageForm.tsx
@@ -211,13 +211,23 @@ const PaMessageForm = ({
       )}
       {page === Page.ALERTS && (
         <AssociateAlert
-          associatedAlert={associatedAlert}
-          endWithEffectPeriod={endWithEffectPeriod}
-          onImportMessage={onImportMessage}
-          onImportLocations={onImportLocations}
-          navigateTo={setPage}
-          setAssociatedAlert={setAssociatedAlert}
-          setEndWithEffectPeriod={setEndWithEffectPeriod}
+          onApply={(
+            alert,
+            endWithEffectPeriod,
+            importLocations,
+            importMessage,
+          ) => {
+            setAssociatedAlert(alert);
+            setEndWithEffectPeriod(endWithEffectPeriod);
+            if (importLocations) {
+              onImportLocations(alert.informed_entities);
+            }
+            if (importMessage) {
+              onImportMessage(alert.header);
+            }
+            setPage(Page.MAIN);
+          }}
+          onCancel={() => setPage(Page.MAIN)}
         />
       )}
       <Toast