fix: modals sometimes not close after the route changes

Author: geekdada

src/AppContainer.tsx

@@ -11,7 +11,6 @@ import {
   HashRouterProps,
 } from 'react-router-dom'
 
-import App from './App'
 import { ProfileProvider } from './models/profile'
 
 const ReactRouter: React.FC<BrowserRouterProps | HashRouterProps> = (args) => {
@@ -27,16 +26,14 @@ const styleCache = createCache({
   key: 'yasd',
 })
 
-const AppContainer: React.FC = () => {
+const AppContainer: React.FC = ({ children }) => {
   return (
-    <Suspense fallback={<div></div>}>
+    <Suspense fallback={<div />}>
       <CacheProvider value={styleCache}>
         <ReactRouter>
           <ProfileProvider>
             <ThemeProvider theme={light}>
-              <ModalProvider>
-                <App />
-              </ModalProvider>
+              <ModalProvider>{children}</ModalProvider>
             </ThemeProvider>
           </ProfileProvider>
         </ReactRouter>

src/components/ScrollToTop/index.tsx

@@ -1,13 +1,25 @@
+import { useModal } from '@sumup/circuit-ui'
 import React, { useEffect } from 'react'
 import { useLocation } from 'react-router-dom'
 
 const ScrollToTop: React.FC = () => {
   const { pathname } = useLocation()
+  const { isModalOpen, removeModal } = useModal()
 
   useEffect(() => {
     window.scrollTo(0, 0)
   }, [pathname])
 
+  useEffect(
+    () => {
+      if (isModalOpen) {
+        removeModal()
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [pathname],
+  )
+
   return <></>
 }
 

src/pages/Devices/components/DeviceItem.tsx

@@ -25,6 +25,22 @@ const DeviceItem = ({ device }: { device: DeviceInfo }): JSX.Element => {
   const surgeHost = useSurgeHost()
   const history = useHistory()
 
+  const onDeviceSettingsClick = useCallback(() => {
+    setModal({
+      children({ onClose }) {
+        return onClose && device.dhcpDevice ? (
+          <DeviceSettingsModal
+            title={device.dhcpDevice.displayName || device.name}
+            dhcpDevice={device.dhcpDevice}
+            onClose={onClose}
+          />
+        ) : (
+          <React.Fragment />
+        )
+      },
+    })
+  }, [device.dhcpDevice, device.name, setModal])
+
   const onClick = useCallback(() => {
     const actions = [
       {
@@ -40,21 +56,7 @@ const DeviceItem = ({ device }: { device: DeviceInfo }): JSX.Element => {
       actions.push({
         id: 'device_settings',
         title: 'devices.device_settings',
-        onClick: () => {
-          setModal({
-            children({ onClose }) {
-              return onClose && device.dhcpDevice ? (
-                <DeviceSettingsModal
-                  title={device.dhcpDevice.displayName || device.name}
-                  dhcpDevice={device.dhcpDevice}
-                  onClose={onClose}
-                />
-              ) : (
-                <React.Fragment />
-              )
-            },
-          })
-        },
+        onClick: onDeviceSettingsClick,
       })
     }
 
@@ -71,7 +73,14 @@ const DeviceItem = ({ device }: { device: DeviceInfo }): JSX.Element => {
         )
       },
     })
-  }, [device, setModal])
+  }, [
+    device.dhcpDevice,
+    device.displayIPAddress,
+    device.name,
+    onDeviceSettingsClick,
+    setModal,
+    history,
+  ])
 
   const gateway = useMemo<boolean>(() => {
     const { hasTCPConnection } = device