Improve PassengerInformationMessagesDialog opening and closing

viliket · Sep 16, 2023 · 37e2ad7 · 37e2ad7
1 parent bc6660a
commit 37e2ad7
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 13 deletions.
diff --git a/src/components/PassengerInformationMessagesDialog.tsx b/src/components/PassengerInformationMessagesDialog.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { Alert, DialogActions, DialogContent } from '@mui/material';
 import Dialog from '@mui/material/Dialog';
@@ -9,13 +9,17 @@ import { PassengerInformationMessage } from '../utils/passengerInformationMessag
 
 type PassengerInformationMessagesDialogProps = {
   onClose: () => void;
-  passengerInformationMessages: PassengerInformationMessage[] | null;
+  open: boolean;
+  passengerInformationMessages:
+    | PassengerInformationMessage[]
+    | null
+    | undefined;
 };
 
 const PassengerInformationMessagesDialog = (
   props: PassengerInformationMessagesDialogProps
 ) => {
-  const { onClose, passengerInformationMessages } = props;
+  const { onClose, open, passengerInformationMessages } = props;
   const { i18n } = useTranslation();
   const { t } = useTranslation();
 
@@ -34,7 +38,7 @@ const PassengerInformationMessagesDialog = (
   };
 
   return (
-    <Dialog onClose={handleClose} open={!!passengerInformationMessages}>
+    <Dialog onClose={handleClose} open={open}>
       <DialogTitle>{t('alerts')}</DialogTitle>
       <DialogContent>
         {passengerInformationMessages?.map((m) => (

diff --git a/src/components/TrainInfoContainer.tsx b/src/components/TrainInfoContainer.tsx
@@ -26,6 +26,7 @@ function TrainInfoContainer({ train }: TrainInfoContainerProps) {
   const [wagonDialogOpen, setWagonDialogOpen] = useState(false);
   const [selectedWagon, setSelectedWagon] = useState<Wagon | null>(null);
   const [selectedStation, setSelectedStation] = useState<string | null>(null);
+  const [stationAlertDialogOpen, setStationAlertDialogOpen] = useState(false);
   const departureDate = train ? getTrainScheduledDepartureTime(train) : null;
   const {
     error,
@@ -67,6 +68,15 @@ function TrainInfoContainer({ train }: TrainInfoContainerProps) {
     setWagonDialogOpen(true);
   };
 
+  const handleStationAlertDialogClose = () => {
+    setStationAlertDialogOpen(false);
+  };
+
+  const handleStationAlertClick = (stationCode: string) => {
+    setSelectedStation(stationCode);
+    setStationAlertDialogOpen(true);
+  };
+
   return (
     <>
       <Box
@@ -105,7 +115,7 @@ function TrainInfoContainer({ train }: TrainInfoContainerProps) {
         train={train}
         realTimeTrain={realTimeTrain}
         onWagonClick={handleWagonClick}
-        onStationAlertClick={(stationCode) => setSelectedStation(stationCode)}
+        onStationAlertClick={handleStationAlertClick}
         stationMessages={stationMessages}
       />
       {train && (
@@ -117,12 +127,13 @@ function TrainInfoContainer({ train }: TrainInfoContainerProps) {
         />
       )}
       <PassengerInformationMessagesDialog
+        open={stationAlertDialogOpen}
         passengerInformationMessages={
           selectedStation && stationMessages?.[selectedStation]
             ? stationMessages[selectedStation]
             : null
         }
-        onClose={() => setSelectedStation(null)}
+        onClose={handleStationAlertDialogClose}
       />
     </>
   );

diff --git a/src/pages/[station].tsx b/src/pages/[station].tsx
@@ -43,8 +43,7 @@ const Station: NextPageWithLayout = () => {
     null
   );
   const [selectedTrainNo, setSelectedTrainNo] = useState<number | null>(null);
-  const [stationAlertDialogOpen, setStationAlertDialogOpen] =
-    useState<boolean>();
+  const [stationAlertDialogOpen, setStationAlertDialogOpen] = useState(false);
   const [executeRouteSearch, { data: routeData }] = useRoutesForRailLazyQuery();
   const station = stationName
     ? trainStations.find(
@@ -214,11 +213,8 @@ const Station: NextPageWithLayout = () => {
         <Box sx={{ width: '100%', textAlign: 'center' }}>{error.message}</Box>
       )}
       <PassengerInformationMessagesDialog
-        passengerInformationMessages={
-          passengerInformationMessages && stationAlertDialogOpen
-            ? passengerInformationMessages
-            : null
-        }
+        open={stationAlertDialogOpen}
+        passengerInformationMessages={passengerInformationMessages}
         onClose={() => setStationAlertDialogOpen(false)}
       />
     </div>