From 9c07119e6d9e3e39ce9a7f65cb6759b8d1fb452b Mon Sep 17 00:00:00 2001
From: Mateusz Konieczny <matkoniecz@gmail.com>
Date: Tue, 10 Jan 2023 21:40:16 +0100
Subject: [PATCH] add button to reset overlay state

---
 .../frontend/displayPreferences-context.tsx   | 78 +++++++++++++++++--
 app/src/frontend/map/map-button.css           |  8 ++
 app/src/frontend/map/map.tsx                  |  2 +
 app/src/frontend/map/reset-switcher.tsx       | 20 +++++
 4 files changed, 100 insertions(+), 8 deletions(-)
 create mode 100644 app/src/frontend/map/reset-switcher.tsx

diff --git a/app/src/frontend/displayPreferences-context.tsx b/app/src/frontend/displayPreferences-context.tsx
index bde2d89d..67c0f69a 100644
--- a/app/src/frontend/displayPreferences-context.tsx
+++ b/app/src/frontend/displayPreferences-context.tsx
@@ -3,6 +3,9 @@ import React, { createContext, useCallback, useContext, useEffect, useState } fr
 import { LayerEnablementState, MapTheme } from './config/map-config';
 
 interface DisplayPreferencesContextState {
+    resetLayers: (e: React.FormEvent<HTMLFormElement>) => void;
+    anyLayerModifiedState: () => boolean;
+
     vista: LayerEnablementState;
     vistaSwitch: (e: React.FormEvent<HTMLFormElement>) => void;
     vistaSwitchOnClick: React.MouseEventHandler<HTMLButtonElement>;
@@ -45,6 +48,9 @@ const stub = (): never => {
 };
 
 export const DisplayPreferencesContext = createContext<DisplayPreferencesContextState>({
+    resetLayers: stub,
+    anyLayerModifiedState: stub,
+
     vista: undefined,
     vistaSwitch: stub,
     vistaSwitchOnClick: undefined,
@@ -85,16 +91,69 @@ export const DisplayPreferencesContext = createContext<DisplayPreferencesContext
 const noop = () => {};
 
 export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => {
-    const [vista, setVista] = useState<LayerEnablementState>('disabled');
-    const [flood, setFlood] = useState<LayerEnablementState>('disabled');
-    const [creative, setCreative] = useState<LayerEnablementState>('disabled');
-    const [housing, setHousing] = useState<LayerEnablementState>('disabled');
-    const [borough, setBorough] = useState<LayerEnablementState>('enabled');
-    const [parcel, setParcel] = useState<LayerEnablementState>('disabled');
-    const [conservation, setConservation] = useState<LayerEnablementState>('disabled');
-    const [historicData, setHistoricData] = useState<LayerEnablementState>('disabled');
+    const defaultVista = 'disabled'
+    const defaultFlood = 'disabled'
+    const defaultCreative = 'disabled'
+    const defaultHousing = 'disabled'
+    const defaultBorough = 'enabled'
+    const defaultParcel = 'disabled'
+    const defaultConservation = 'disabled'
+    const defaultHistoricData = 'disabled'
+    const [vista, setVista] = useState<LayerEnablementState>(defaultVista);
+    const [flood, setFlood] = useState<LayerEnablementState>(defaultFlood);
+    const [creative, setCreative] = useState<LayerEnablementState>(defaultCreative);
+    const [housing, setHousing] = useState<LayerEnablementState>(defaultHousing);
+    const [borough, setBorough] = useState<LayerEnablementState>(defaultBorough);
+    const [parcel, setParcel] = useState<LayerEnablementState>(defaultParcel);
+    const [conservation, setConservation] = useState<LayerEnablementState>(defaultConservation);
+    const [historicData, setHistoricData] = useState<LayerEnablementState>(defaultHistoricData);
     const [darkLightTheme, setDarkLightTheme] = useState<MapTheme>('night');
 
+    const resetLayers = useCallback(
+        (e) => {
+            e.preventDefault();
+            setVista(defaultVista);
+            setFlood(defaultFlood);
+            setCreative(defaultCreative);
+            setHousing(defaultHousing);
+            setBorough(defaultBorough)
+            setParcel(defaultParcel);
+            setConservation(defaultConservation);
+            setHistoricData(defaultHistoricData);
+            //setDarkLightTheme('night'); // reset only layers
+        },
+        []
+    )
+
+    function anyLayerModifiedState() {
+        if(vista != defaultVista) {
+            return true;
+        }
+        if(flood != defaultFlood) {
+            return true;
+        }
+        if(creative != defaultCreative) {
+            return true;
+        }
+        if(housing != defaultHousing) {
+            return true;
+        }
+        if(borough != defaultBorough) {
+            return true;
+        }
+        if(parcel != defaultParcel) {
+            return true;
+        }
+        if(conservation != defaultConservation) {
+            return true;
+        }
+        if(historicData != defaultHistoricData) {
+            return true;
+        }
+        //darkLightTheme not handled here
+        return false;
+    }
+
     const vistaSwitch = useCallback(
         (e) => {
             e.preventDefault();
@@ -233,6 +292,9 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => {
 
     return (
         <DisplayPreferencesContext.Provider value={{
+            resetLayers,
+            anyLayerModifiedState,
+
             vista,
             vistaSwitch,
             vistaSwitchOnClick,
diff --git a/app/src/frontend/map/map-button.css b/app/src/frontend/map/map-button.css
index 8b94524e..0b7773ae 100644
--- a/app/src/frontend/map/map-button.css
+++ b/app/src/frontend/map/map-button.css
@@ -35,6 +35,14 @@
     }
 }
 
+.reset-switcher {
+    top: 37px;
+    margin-right: 60px;
+}
+.reset-switcher .btn {
+    min-width: 280px;
+}
+
 .theme-switcher {
     top: 77px;
 }
diff --git a/app/src/frontend/map/map.tsx b/app/src/frontend/map/map.tsx
index aff47572..a23f2d17 100644
--- a/app/src/frontend/map/map.tsx
+++ b/app/src/frontend/map/map.tsx
@@ -31,6 +31,7 @@ import { Legend } from './legend';
 import SearchBox from './search-box';
 import ThemeSwitcher from './theme-switcher';
 import DataLayerSwitcher from './data-switcher';
+import { ResetSwitcher } from './reset-switcher';
 import { BoroughSwitcher } from './borough-switcher';
 import { ParcelSwitcher } from './parcel-switcher';
 import { FloodSwitcher } from './flood-switcher';
@@ -173,6 +174,7 @@ export const ColouringMap : FC<ColouringMapProps> = ({
                 mode !== 'basic' &&
                 <>
                     <Legend mapColourScaleDefinitions={categoryMapDefinitions} mapColourScale={mapColourScale} onMapColourScale={onMapColourScale}/>
+                    <ResetSwitcher/>
                     <ThemeSwitcher onSubmit={darkLightThemeSwitch} currentTheme={darkLightTheme} />
                     <DataLayerSwitcher onSubmit={layerSwitch} currentDisplay={dataLayers} />
                     {
diff --git a/app/src/frontend/map/reset-switcher.tsx b/app/src/frontend/map/reset-switcher.tsx
new file mode 100644
index 00000000..d8c06845
--- /dev/null
+++ b/app/src/frontend/map/reset-switcher.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+import './map-button.css';
+import { useDisplayPreferences } from '../displayPreferences-context';
+
+export const ResetSwitcher: React.FC<{}> = () => {
+    const { resetLayers, darkLightTheme, anyLayerModifiedState } = useDisplayPreferences();
+    if(anyLayerModifiedState()) {
+        return (
+            <form className={`reset-switcher map-button ${darkLightTheme}`} onSubmit={resetLayers}>
+                <button className="btn btn-outline btn-outline-dark"
+                    type="submit">
+                    {"Reset layers"}
+                </button>
+            </form>
+            );
+    } else {
+        return <></>
+    }
+}