fix: clean up map pages

public-convenience-ltd · Sep 13, 2021 · 56c401f · 56c401f
1 parent a9620d5
commit 56c401f
Show file tree

Hide file tree

Showing 8 changed files with 359 additions and 269 deletions.
diff --git a/src/components/ToiletDetailsPanel.tsx b/src/components/ToiletDetailsPanel.tsx
@@ -26,7 +26,6 @@ import parseISO from 'date-fns/parseISO';
 import add from 'date-fns/add';
 import Link from 'next/link';
 import useComponentSize from '@rehooks/component-size';
-import L from 'leaflet';
 
 import Box from './Box';
 import Button from './Button';
@@ -105,10 +104,11 @@ function round(value: number, precision = 0) {
 }
 
 const DistanceTo = ({ from, to }) => {
-  const fromLatLng = L.latLng(from.lat, from.lng);
+  // const fromLatLng = L.latLng(from.lat, from.lng);
 
-  const toLatLng = L.latLng(to.lat, to.lng);
-  const metersToLoo = fromLatLng.distanceTo(toLatLng);
+  // const toLatLng = L.latLng(to.lat, to.lng);
+  // const metersToLoo = fromLatLng.distanceTo(toLatLng);
+  const metersToLoo = 10000;
 
   const distance =
     metersToLoo < 1000
@@ -117,7 +117,7 @@ const DistanceTo = ({ from, to }) => {
 
   return (
     <Text as="span" fontSize="3" fontWeight="bold">
-      {distance}
+      FIXME {distance}
     </Text>
   );
 };

diff --git a/src/components/useFilters.tsx b/src/components/useFilters.tsx
@@ -0,0 +1,44 @@
+import { useEffect, useState, useMemo } from 'react';
+import config, { FILTERS_KEY } from '../config';
+
+const useFilters = (toilets) => {
+  let initialState = config.getSettings(FILTERS_KEY);
+  // 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]);
+
+  // 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,
+  };
+};
+
+export default useFilters;
diff --git a/src/pages/MapPage.tsx b/src/pages/MapPage.tsx
diff --git a/src/pages/explorer/voyager.tsx b/src/pages/explorer/voyager.tsx
@@ -6,31 +6,31 @@ import config from '../../config';
 import 'graphql-voyager/dist/voyager.css';
 
 const VoyagerComponent = dynamic(
-    () => import('graphql-voyager').then((mod) => mod.Voyager),
-    { ssr: false }
+  () => import('graphql-voyager').then((mod) => mod.Voyager),
+  { ssr: false }
 );
 
 function introspectionProvider(query) {
-    return fetch('/api', {
-      method: 'post',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ query: query }),
-    }).then((response) => response.json());
-  }
+  return fetch('/api', {
+    method: 'post',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ query: query }),
+  }).then((response) => response.json());
+}
 
-  const Voyager = () => (
-    <PageLayout layoutMode="blog">
-      <Head>
-        <title>{config.getTitle('Schema Visualisation')}</title>
-      </Head>
+const Voyager = () => (
+  <PageLayout layoutMode="blog">
+    <Head>
+      <title>{config.getTitle('Schema Visualisation')}</title>
+    </Head>
 
-      <Container>
-        <VoyagerComponent
-            introspection={introspectionProvider}
-            workerURI={'/voyager.worker.js'}
-            />
-      </Container>
-    </PageLayout>
-  );
+    <Container>
+      <VoyagerComponent
+        introspection={introspectionProvider}
+        workerURI={'/voyager.worker.js'}
+      />
+    </Container>
+  </PageLayout>
+);
 
-  export default Voyager;
+export default Voyager;