Merge pull request #287 from technologiestiftung/refactor/legend-states

.vscode/settings.json

@@ -1,21 +1,22 @@
 {
-    "workbench.colorCustomizations": {
-        "activityBar.background": "#8a2ca2",
-        "activityBar.activeBackground": "#8a2ca2",
-        "activityBar.activeBorder": "#af9530",
-        "activityBar.foreground": "#e7e7e7",
-        "activityBar.inactiveForeground": "#e7e7e799",
-        "activityBarBadge.background": "#af9530",
-        "activityBarBadge.foreground": "#15202b",
-        "titleBar.activeBackground": "#68217a",
-        "titleBar.inactiveBackground": "#68217a99",
-        "titleBar.activeForeground": "#e7e7e7",
-        "titleBar.inactiveForeground": "#e7e7e799",
-        "statusBar.background": "#68217a",
-        "statusBarItem.hoverBackground": "#8a2ca2",
-        "statusBar.foreground": "#e7e7e7"
-    },
-    "peacock.color": "#68217A",
-    "typescript.tsdk": "node_modules/typescript/lib",
-    "eslint.enable": true
-}
+  "workbench.colorCustomizations": {
+    "activityBar.background": "#8a2ca2",
+    "activityBar.activeBackground": "#8a2ca2",
+    "activityBar.activeBorder": "#af9530",
+    "activityBar.foreground": "#e7e7e7",
+    "activityBar.inactiveForeground": "#e7e7e799",
+    "activityBarBadge.background": "#af9530",
+    "activityBarBadge.foreground": "#15202b",
+    "titleBar.activeBackground": "#68217a",
+    "titleBar.inactiveBackground": "#68217a99",
+    "titleBar.activeForeground": "#e7e7e7",
+    "titleBar.inactiveForeground": "#e7e7e799",
+    "statusBar.background": "#68217a",
+    "statusBarItem.hoverBackground": "#8a2ca2",
+    "statusBar.foreground": "#e7e7e7"
+  },
+  "peacock.color": "#68217A",
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "prettier.singleQuote": true,
+  "prettier.jsxSingleQuote": true
+}

package.json

@@ -28,6 +28,7 @@
     "@babel/preset-react": "7.12.13",
     "@babel/preset-typescript": "7.12.16",
     "@danmarshall/deckgl-typings": "4.5.1",
+    "@hot-loader/react-dom": "17.0.1",
     "@inpyjamas/scripts": "0.1.6-alpha",
     "@storybook/addon-actions": "6.1.18",
     "@storybook/addon-essentials": "6.1.18",

src/common/interfaces.ts

@@ -54,9 +54,7 @@ export interface StoreProps {
   wateredTrees: string[];
   adoptedTrees: Pick<Tree, 'id'>[];
 
-  treesVisible: boolean;
-  pumpsVisible: boolean;
-  rainVisible: boolean;
+  visibleMapLayer: 'rain' | 'trees' | 'pumps';
 
   isNavOpen: boolean;
   user?: UserDataType;

src/components/AppWrapper/index.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import DeckGlMap from '../map';
 import Sidebar from '../Sidebar';
 import Nav from '../Nav';
-import Legend from '../Legend/Legend';
+import MapLayerLegend from '../Legend/MapLayersLegend';
 import Cookie from '../Cookie';
 import Loading from '../Loading';
 import Overlay from '../Overlay';
@@ -55,9 +55,7 @@ const Map: FC<{
 }> = ({ showOverlay, isNavOpened }) => {
   const data = useStoreState('data');
   const rainGeojson = useStoreState('rainGeojson');
-  const treesVisible = useStoreState('treesVisible');
-  const pumpsVisible = useStoreState('pumpsVisible');
-  const rainVisible = useStoreState('rainVisible');
+  const visibleMapLayer = useStoreState('visibleMapLayer');
   const pumps = useStoreState('pumps');
   const ageRange = useStoreState('ageRange');
   const dataView = useStoreState('dataView');
@@ -77,9 +75,7 @@ const Map: FC<{
       }}
       data={data || null}
       rainGeojson={rainGeojson || null}
-      treesVisible={!!treesVisible}
-      pumpsVisible={!!pumpsVisible}
-      rainVisible={!!rainVisible}
+      visibleMapLayer={visibleMapLayer}
       isTreeDataLoading={!!isTreeDataLoading}
       isNavOpen={!!isNavOpened}
       showControls={showOverlay}
@@ -125,7 +121,7 @@ const AppWrapper: FC = () => {
       <CookieContainer>
         <Cookie />
       </CookieContainer>
-      {showMapUI && <Legend />}
+      {showMapUI && <MapLayerLegend />}
       <ImprintAndPrivacyContainer></ImprintAndPrivacyContainer>
     </AppWrapperDiv>
   );