feat: hooray, filtering works

public-convenience-ltd · Nov 22, 2021 · a12650b · a12650b
1 parent 9684b92
commit a12650b
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 168 deletions.
diff --git a/src/components/LooMap/LooMap.tsx b/src/components/LooMap/LooMap.tsx
@@ -60,29 +60,7 @@ const LooMap: React.FC<Props> = ({
               }
             `
           : undefined,
-        css`
-          .leaflet-noPayment-pane {
-            display: ${filters['noPayment'] ? 'none' : 'block'};
-          }
-          .leaflet-babyChange-pane {
-            display: ${filters['babyChange'] ? 'none' : 'block'};
-          }
-          .leaflet-accessible-pane {
-            display: ${filters['accessible'] ? 'none' : 'block'};
-          }
-          .leaflet-allGender-pane {
-            display: ${filters['allGender'] ? 'none' : 'block'};
-          }
-          .leaflet-radar-pane {
-            display: ${filters['radar'] ? 'none' : 'block'};
-          }
-          .leaflet-automatic-pane {
-            display: ${filters['automatic'] ? 'none' : 'block'};
-          }
-          .leaflet-marker-pane {
-            display: ${filters['noPayment'] ? 'none' : 'block'};
-          }
-        `,
+        css``,
       ]}
     >
       <MapContainer
@@ -148,13 +126,6 @@ const LooMap: React.FC<Props> = ({
           maxZoom={maxZoom}
         />
 
-        <Pane name="noPayment" style={{ zIndex: 400 }}></Pane>
-        <Pane name="babyChange" style={{ zIndex: 400 }}></Pane>
-        <Pane name="accessible" style={{ zIndex: 400 }}></Pane>
-        <Pane name="allGender" style={{ zIndex: 400 }}></Pane>
-        <Pane name="radar" style={{ zIndex: 400 }}></Pane>
-        <Pane name="automatic" style={{ zIndex: 400 }}></Pane>
-
         <Markers focus={focus} loos={loos} flobs={filters} />
 
         <Media greaterThan="md">

diff --git a/src/components/LooMap/Markers.tsx b/src/components/LooMap/Markers.tsx
@@ -1,25 +1,17 @@
-import React, {
-  useMemo,
-  useCallback,
-  useState,
-  useEffect,
-  useRef,
-  forwardRef,
-} from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import { useRouter } from 'next/router';
-import {
-  Loo,
-  useMinimumViableLooResponseQuery,
-} from '../../api-client/graphql';
-import { Marker, useMapEvents, useMap, MarkerProps } from 'react-leaflet';
+import { Loo } from '../../api-client/graphql';
+import { Marker } from 'react-leaflet';
 import ToiletMarkerIcon from './ToiletMarkerIcon';
-import MarkerClusterGroup from 'react-leaflet-markercluster';
-import config from '../../config';
+import * as L from 'leaflet';
+import 'leaflet.markercluster';
+import { useMap } from 'react-leaflet';
 const KEY_ENTER = 13;
 
-// const MarkerCustom: React.FC<MarkerProps> = (props) => {
-//   return <div id={props.<Marker {...props} />;
-// };
+const mcg = L.markerClusterGroup({
+  chunkedLoading: true,
+  showCoverageOnHover: false,
+});
 
 const Markers = ({
   focus,
@@ -32,127 +24,68 @@ const Markers = ({
 }) => {
   const router = useRouter();
 
+  const toiletMarkerIcon = useCallback(
+    (toilet, focusId) =>
+      new ToiletMarkerIcon({
+        isHighlighted: toilet.id === focusId,
+        toiletId: toilet.id,
+        isUseOurLoosCampaign: toilet.campaignUOL,
+      }),
+    []
+  );
+
   const filteredLooGroups = useMemo(() => {
     const filters = [
-      {
-        id: 'noPayment',
-        label: 'Free',
-      },
-      {
-        id: 'babyChange',
-        label: 'Baby Changing',
-      },
-      {
-        id: 'accessible',
-        label: 'Accessible',
-      },
-      {
-        id: 'allGender',
-        label: 'Gender Neutral',
-      },
-      {
-        id: 'radar',
-        label: 'Radar Key',
-      },
-      {
-        id: 'automatic',
-        label: 'Automatic',
-      },
+      'noPayment',
+
+      'babyChange',
+
+      'accessible',
+
+      'allGender',
+
+      'radar',
+
+      'automatic',
     ];
-    const groups = {};
-    filters.forEach((group) => {
-      const filteredRealLooGroup = loos.filter((loo) => !loo[group.id]);
-      groups[group.id] = filteredRealLooGroup.map((toilet) => {
-        return (
-          <Marker
-            pane={group.id}
-            key={toilet.id}
-            position={toilet.location}
-            zIndexOffset={toilet.id === focus?.id ? 1000 : 0}
-            icon={
-              new ToiletMarkerIcon({
-                isHighlighted: toilet.id === focus?.id,
-                toiletId: toilet.id,
-                isUseOurLoosCampaign: toilet.campaignUOL,
-              })
-            }
-            alt={toilet.name || 'Unnamed toilet'}
-            eventHandlers={{
-              click: () => {
-                router.push(`/loos/${toilet.id}`);
-              },
-              keydown: (event: { originalEvent: { keyCode: number } }) => {
-                if (event.originalEvent.keyCode === KEY_ENTER) {
-                  router.push(`/loos/${toilet.id}`);
-                }
-              },
-            }}
-            keyboard={false}
-          />
-        );
-      });
+
+    const totalLoos = loos.filter((loo) => {
+      for (const filter of filters) {
+        if (flobs[filter]) {
+          if (loo[filter] === true) {
+            return false;
+          }
+        }
+      }
+      return true;
     });
 
-    return groups;
-  }, [loos, focus?.id, router]);
-  return (
-    <>
-      <MarkerClusterGroup
-        animateAddingMarkers={false}
-        removeOutsideVisibleBounds
-        chunkedLoading
-        maxClusterRadius={200}
-        clusterPane={'noPayment'}
-      >
-        {filteredLooGroups['noPayment']}
-      </MarkerClusterGroup>
-      <MarkerClusterGroup
-        animateAddingMarkers={false}
-        removeOutsideVisibleBounds
-        chunkedLoading
-        maxClusterRadius={200}
-        clusterPane={'babyChange'}
-      >
-        {filteredLooGroups['babyChange']}
-      </MarkerClusterGroup>
-      <MarkerClusterGroup
-        animateAddingMarkers={false}
-        removeOutsideVisibleBounds
-        chunkedLoading
-        maxClusterRadius={200}
-        clusterPane={'accessible'}
-      >
-        {filteredLooGroups['accessible']}
-      </MarkerClusterGroup>
-      <MarkerClusterGroup
-        animateAddingMarkers={false}
-        removeOutsideVisibleBounds
-        chunkedLoading
-        maxClusterRadius={200}
-        clusterPane={'allGender'}
-      >
-        {filteredLooGroups['allGender']}
-      </MarkerClusterGroup>
-      <MarkerClusterGroup
-        animateAddingMarkers={false}
-        removeOutsideVisibleBounds
-        chunkedLoading
-        maxClusterRadius={200}
-        clusterPane={'radar'}
-      >
-        {filteredLooGroups['radar']}
-      </MarkerClusterGroup>
-      <MarkerClusterGroup
-        animateAddingMarkers={false}
-        removeOutsideVisibleBounds
-        chunkedLoading
-        maxClusterRadius={200}
-        clusterPane={'automatic'}
-      >
-        {filteredLooGroups['automatic']}
-      </MarkerClusterGroup>
-    </>
-  );
+    return totalLoos.map((toilet) =>
+      L.marker(new L.LatLng(toilet.location.lat, toilet.location.lng), {
+        zIndexOffset: toilet.id === focus?.id ? 1000 : 0,
+        icon: toiletMarkerIcon(toilet, focus?.id),
+        alt: toilet.name || 'Unnamed toilet',
+        keyboard: false,
+      })
+        .on('click', () => {
+          router.push(`/loos/${toilet.id}`);
+        })
+        .on('keydown', (event: { originalEvent: { keyCode: number } }) => {
+          if (event.originalEvent.keyCode === KEY_ENTER) {
+            router.push(`/loos/${toilet.id}`);
+          }
+        })
+    );
+  }, [loos, flobs, focus?.id, toiletMarkerIcon, router]);
+
+  const map = useMap();
+  useEffect(() => {
+    mcg.clearLayers();
+    mcg.addLayers(filteredLooGroups);
+    map.addLayer(mcg);
+  }, [map, filteredLooGroups]);
+
+  return null;
 };
 
 export default Markers;
diff --git a/src/hooks/useFilters.tsx b/src/hooks/useFilters.tsx
@@ -4,16 +4,17 @@ import config, { FILTERS_KEY } from '../config';
 
 const useFilters = (toilets) => {
   let initialState = config.getSettings(FILTERS_KEY);
+  console.log(initialState);
   // default any unsaved filters as 'false'
   config.filters.forEach((filter) => {
     initialState[filter.id] = initialState[filter.id] || false;
   });
   const [filters, setFilters] = useState(initialState);
 
-  // // keep local storage and state in sync
-  // useEffect(() => {
-  //   window.localStorage.setItem(FILTERS_KEY, JSON.stringify(filters));
-  // }, [filters]);
+  // keep local storage and state in sync
+  useEffect(() => {
+    window.localStorage.setItem(FILTERS_KEY, JSON.stringify(filters));
+  }, [filters]);
 
   // // get the filter objects from config for the filters applied by the user
   // const applied = config.filters.filter((filter) => filters[filter.id]);