Removing alerts from state on disconnect (#25)

* Removing alerts from state on disconnect
UrbanOS-Examples · Jan 6, 2022 · beccb0b · beccb0b
1 parent a87dee5
commit beccb0b
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git a/src/App.css b/src/App.css
@@ -61,3 +61,11 @@
     width: 100%;
     height: 100%;
 }
+
+.mapboxgl-marker {
+    background: none;
+    border: none;
+    cursor: pointer;
+    width: 20px;
+    height: 20px;
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -66,20 +66,30 @@ export default function App() {
             if (stringMessage !== 'Connected') {
                 console.log(stringMessage);
                 const alert = JSON.parse(stringMessage) as Alert;
-                setAlerts((alerts) => [alert, ...alerts]);
+                if (!alerts.includes(alert)) {
+                    setAlerts((alerts) => [alert, ...alerts]);
+                }
+                setViewport({
+                    latitude: 39.98654998139231, 
+                    longitude: -83.00250910125781,
+                    width: '100vw',
+                    height: '100vh',
+                    zoom: 10})
             }
         });
         websocket.addEventListener('open', () => {
             console.log('Connected to Alerting Engine');
         });
         websocket.addEventListener('close', () => {
             console.log('Disconnected');
+            setAlerts((alerts) => [])
         });
         websocket.addEventListener('error', () => {
             console.log('Error received from server');
         });
         websocketRef.current = websocket;
         return () => websocket.close();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
     return (
@@ -89,6 +99,7 @@ export default function App() {
                 {...viewport} 
                 mapboxApiAccessToken={MAPBOX_PUBLIC_KEY}
                 mapStyle="mapbox://styles/mapbox/light-v10"
+                minZoom={8}
                 onViewportChange={(viewport: React.SetStateAction<{ latitude: number; longitude: number; width: string; height: string; zoom: number; }>) => {
                     setViewport(viewport);
                 }}
@@ -128,4 +139,4 @@ export default function App() {
             </ReactMapGL>
         </div>
     );
-}
+}