feat: remove dep on react marker cluster and ship working cluster sys…

…tem with filtering
public-convenience-ltd · Nov 22, 2021 · eecf5c0 · eecf5c0
1 parent a12650b
commit eecf5c0
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 229 deletions.
diff --git a/package.json b/package.json
@@ -55,6 +55,7 @@
     "jsonwebtoken": "8.5.1",
     "jwks-rsa": "2.0.4",
     "leaflet": "1.7.1",
+    "leaflet.markercluster": "1.5.3",
     "lodash": "4.17.21",
     "micro": "9.3.4",
     "mongoose": "6.0.10",
@@ -67,7 +68,6 @@
     "react-hook-form": "6.15.8",
     "react-leaflet": "3.2.2",
     "react-leaflet-control": "2.1.2",
-    "react-leaflet-markercluster": "3.0.0-rc1",
     "react-tooltip": "4.2.21",
     "resize-observer-polyfill": "1.5.1",
     "styled-system": "5.1.5"
@@ -85,6 +85,7 @@
     "@mapbox/geojson-rewind": "0.5.1",
     "@types/jest": "27.0.2",
     "@types/leaflet": "1.7.5",
+    "@types/leaflet.markercluster": "1.4.5",
     "@types/lodash": "4.14.175",
     "@types/node": "16.10.9",
     "@types/react": "17.0.30",

diff --git a/src/api-client/operations/minimumViableLooResponse.graphql b/src/api-client/operations/minimumViableLooResponse.graphql
@@ -15,5 +15,4 @@ query minimumViableLooResponse($limit: Int!) {
       radar
       campaignUOL
     }
-  }
 }
diff --git a/src/components/LooMap/LooMap.tsx b/src/components/LooMap/LooMap.tsx
@@ -1,15 +1,11 @@
 import { useRouter } from 'next/router';
 import { MapContainer, Pane, TileLayer, ZoomControl } from 'react-leaflet';
 import 'leaflet/dist/leaflet.css';
-import 'react-leaflet-markercluster/dist/styles.min.css';
 import { css } from '@emotion/react';
 import Box from '../Box';
 import { Media } from '../Media';
 import Markers from './Markers';
-import {
-  Loo,
-  MinimumViableLooResponseQueryResult,
-} from '../../api-client/graphql';
+import { Loo } from '../../api-client/graphql';
 interface Props {
   focus?: Loo;
   center: { lat: number; lng: number };
@@ -21,7 +17,6 @@ interface Props {
   controlsOffset?: number;
   showCrosshair?: boolean;
   withAccessibilityOverlays?: boolean;
-
   loos: Array<Loo>;
   filters: any;
 }
@@ -38,8 +33,6 @@ const LooMap: React.FC<Props> = ({
   loos,
   filters,
 }) => {
-  const router = useRouter();
-
   return (
     <Box
       position="relative"
@@ -126,7 +119,7 @@ const LooMap: React.FC<Props> = ({
           maxZoom={maxZoom}
         />
 
-        <Markers focus={focus} loos={loos} flobs={filters} />
+        <Markers focus={focus} loos={loos} />
 
         <Media greaterThan="md">
           <ZoomControl position="bottomright" />

diff --git a/src/components/LooMap/Markers.tsx b/src/components/LooMap/Markers.tsx
@@ -1,27 +1,34 @@
 import { useCallback, useEffect, useMemo } from 'react';
 import { useRouter } from 'next/router';
 import { Loo } from '../../api-client/graphql';
-import { Marker } from 'react-leaflet';
 import ToiletMarkerIcon from './ToiletMarkerIcon';
 import * as L from 'leaflet';
 import 'leaflet.markercluster';
+import 'leaflet.markercluster/dist/MarkerCluster.css';
+import 'leaflet.markercluster/dist/MarkerCluster.Default.css';
 import { useMap } from 'react-leaflet';
 const KEY_ENTER = 13;
 
+const FILTERS = [
+  'noPayment',
+
+  'babyChange',
+
+  'accessible',
+
+  'allGender',
+
+  'radar',
+
+  'automatic',
+] as const;
+
 const mcg = L.markerClusterGroup({
   chunkedLoading: true,
   showCoverageOnHover: false,
 });
 
-const Markers = ({
-  focus,
-  loos,
-  flobs,
-}: {
-  loos: Array<Loo>;
-  focus: Loo;
-  flobs: any;
-}) => {
+const Markers = ({ focus, loos }: { loos: Array<Loo>; focus: Loo }) => {
   const router = useRouter();
 
   const toiletMarkerIcon = useCallback(
@@ -35,32 +42,7 @@ const Markers = ({
   );
 
   const filteredLooGroups = useMemo(() => {
-    const filters = [
-      'noPayment',
-
-      'babyChange',
-
-      'accessible',
-
-      'allGender',
-
-      'radar',
-
-      'automatic',
-    ];
-
-    const totalLoos = loos.filter((loo) => {
-      for (const filter of filters) {
-        if (flobs[filter]) {
-          if (loo[filter] === true) {
-            return false;
-          }
-        }
-      }
-      return true;
-    });
-
-    return totalLoos.map((toilet) =>
+    return loos.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),
@@ -76,7 +58,7 @@ const Markers = ({
           }
         })
     );
-  }, [loos, flobs, focus?.id, toiletMarkerIcon, router]);
+  }, [loos, focus?.id, toiletMarkerIcon, router]);
 
   const map = useMap();
   useEffect(() => {

diff --git a/src/hooks/useFilters.tsx b/src/hooks/useFilters.tsx
@@ -1,10 +1,8 @@
 import { useEffect, useState, useMemo } from 'react';
-import { Loo } from '../api-client/graphql';
 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;
@@ -16,32 +14,28 @@ const useFilters = (toilets) => {
     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]);
-
-  // const filtered = useMemo(() => {
-  //   if (toilets) {
-  //     const filteredList: Array<Loo> = toilets.filter(
-  //       (toilet: { [x: string]: any }) =>
-  //         applied.every((filter) => {
-  //           const value = toilet[filter.id];
-
-  //           if (value === null) {
-  //             return false;
-  //           }
-
-  //           return !!value;
-  //         })
-  //     );
-  //     return filteredList.reduce<Set<string>>((acc, toilet) => {
-  //       acc.add(toilet.id);
-  //       return acc;
-  //     }, new Set<string>());
-  //   }
-  //   return new Set<string>();
-  // }, [toilets, applied]);
+  // get the filter objects from config for the filters applied by the user
+  const applied = config.filters.filter((filter) => filters[filter.id]);
+
+  const filtered = useMemo(() => {
+    if (toilets) {
+      return toilets.filter((toilet: { [x: string]: any }) =>
+        applied.every((filter) => {
+          const value = toilet[filter.id];
+
+          if (value === null) {
+            return false;
+          }
+
+          return !!value;
+        })
+      );
+    }
+    return [];
+  }, [toilets, applied]);
 
   return {
+    filtered,
     filters,
     setFilters,
   };

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -12,7 +12,6 @@ import { useRouter } from 'next/router';
 import { withApollo } from '../components/withApollo';
 import { GetServerSideProps, GetStaticPaths, NextPage } from 'next';
 import useFilters from '../hooks/useFilters';
-import { ssrFindLoosNearby } from '../api-client/page';
 import { getServerPageMinimumViableLooResponse } from '../api-client/staticPage';
 import { useMinimumViableLooResponseQuery } from '../api-client/graphql';
 
@@ -32,7 +31,7 @@ const HomePage = () => {
     variables: { limit: 1000000 },
   });
 
-  const { filters, setFilters } = useFilters([]);
+  const { filters, setFilters, filtered } = useFilters(data?.loos.loos);
 
   const pageTitle = config.getTitle('Home');
 
@@ -74,7 +73,7 @@ const HomePage = () => {
           zoom={mapState.zoom}
           onViewportChanged={setMapState}
           controlsOffset={0}
-          loos={data?.loos.loos}
+          loos={filtered}
           filters={filters}
         />
       </Box>