feat: allow users to once again click on individual loo markers

.gitignore

@@ -25,3 +25,4 @@ build
 
 # nextjs
 .next
+.loos

next.config.js

@@ -9,5 +9,10 @@ module.exports = {
   experimental: {
     nftTracing: true,
   },
+  exportPathMap: function () {
+    return {
+      '/': { page: '/loos/none' },
+    };
+  },
   // swcMinify: true, .. emotion transform is not working with swc yet
 };

src/components/LooMap/Markers.tsx

@@ -9,23 +9,10 @@ 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,
+  chunkInterval: 500,
 });
 
 const Markers = ({ focus, loos }: { loos: Array<Loo>; focus: Loo }) => {
@@ -42,22 +29,26 @@ const Markers = ({ focus, loos }: { loos: Array<Loo>; focus: Loo }) => {
   );
 
   const filteredLooGroups = useMemo(() => {
-    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),
-        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}`);
-          }
+    return loos
+      .filter((loo) => !!loo?.location)
+      .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}`, undefined, {
+              shallow: true,
+            });
+          })
+          .on('keydown', (event: { originalEvent: { keyCode: number } }) => {
+            if (event.originalEvent.keyCode === KEY_ENTER) {
+              router.push(`/loos/${toilet.id}`, undefined, { shallow: true });
+            }
+          })
+      );
   }, [loos, focus?.id, toiletMarkerIcon, router]);
 
   const map = useMap();

src/components/MapState.tsx

@@ -10,14 +10,14 @@ const reducer = (state, newState) => {
   };
 };
 
-export const MapStateProvider = ({ children }) => {
+export const MapStateProvider = ({ children, loos = [] }) => {
   const [state, setState] = React.useReducer(reducer, {
     center: config.fallbackLocation,
     zoom: 16,
     radius: 1000,
     geolocation: null,
+    loos: loos,
   });
-
   return (
     <MapStateContext.Provider value={[state, setState]}>
       {children}

src/components/withApollo.tsx

@@ -10,16 +10,13 @@ import {
 export const withApollo = (Comp: NextPage) =>
   function WithApollo(props: any) {
     return (
-      <ApolloProvider client={getApolloClient(null, props.data)}>
-        <Comp />
+      <ApolloProvider client={getApolloClient(props.data)}>
+        <Comp {...props} />
       </ApolloProvider>
     );
   };
 
-export const getApolloClient = (
-  ctx?: any,
-  initialState?: NormalizedCacheObject
-) => {
+export const getApolloClient = (initialState?: NormalizedCacheObject) => {
   const url =
     process.env.NODE_ENV === 'development'
       ? process.env.AUTH0_BASE_URL
@@ -28,7 +25,7 @@ export const getApolloClient = (
     uri: typeof window === 'undefined' ? url + '/api' : '/api',
     fetch,
   });
-  const cache = new InMemoryCache().restore(initialState);
+  const cache = new InMemoryCache().restore(initialState || {});
   return new ApolloClient({
     link: httpLink,
     cache,

src/components/withStaticApollo.tsx

@@ -4,21 +4,20 @@ import {
   NormalizedCacheObject,
   InMemoryCache,
   ApolloProvider,
-  createHttpLink,
 } from '@apollo/client';
 import { SchemaLink } from '@apollo/client/link/schema';
 import { schema } from '../pages/api';
 
 export const withApollo = (Comp: NextPage) =>
-  function WithApollo(props: any) {
+  function WithApollo() {
     return (
       <ApolloProvider client={getApolloClient()}>
         <Comp />
       </ApolloProvider>
     );
   };
 
-export function getApolloClient(ctx: any): ApolloClient<NormalizedCacheObject> {
+export function getApolloClient(): ApolloClient<NormalizedCacheObject> {
   return new ApolloClient({
     ssrMode: true,
     link: new SchemaLink({ schema }),

src/config.ts

@@ -1,6 +1,27 @@
 export const FILTERS_KEY = 'filters';
 
-const filters = [
+type Filters =
+  | 'noPayment'
+  | 'babyChange'
+  | 'accessible'
+  | 'allGender'
+  | 'radar'
+  | 'automatic';
+
+type FilterLabels =
+  | 'Free'
+  | 'Baby Changing'
+  | 'Accessible'
+  | 'Gender Neutral'
+  | 'Radar Key'
+  | 'Automatic';
+
+type Filter = {
+  id: Filters;
+  label: FilterLabels;
+};
+
+const filters: Array<Filter> = [
   {
     id: 'noPayment',
     label: 'Free',

src/hooks/useFilters.tsx

@@ -32,7 +32,7 @@ const useFilters = (toilets) => {
       );
     }
     return [];
-  }, [toilets, applied]);
+  }, [applied, toilets]);
 
   return {
     filtered,

src/looCache.ts

@@ -0,0 +1,44 @@
+import fs from 'fs';
+import path from 'path';
+import { getServerPageMinimumViableLooResponse } from './api-client/staticPage';
+
+const LOO_CACHE_PATH = path.resolve('.loos');
+
+export default async function getStaticPropsAllLoos() {
+  let cachedData;
+
+  try {
+    cachedData = JSON.parse(fs.readFileSync(LOO_CACHE_PATH, 'utf8'));
+  } catch (error) {
+    console.log('Member cache not initialized');
+  }
+
+  if (!cachedData) {
+    const { dbConnect } = require('./api/db');
+    await dbConnect();
+
+    const res = await getServerPageMinimumViableLooResponse({
+      variables: { limit: 1000000 },
+    });
+
+    if (res.props.error || !res.props.data) {
+      return {
+        notFound: true,
+      };
+    }
+
+    const data = res.props.apolloState;
+
+    try {
+      fs.writeFileSync(LOO_CACHE_PATH, JSON.stringify(data), 'utf8');
+      console.log('Wrote to loos cache');
+    } catch (error) {
+      console.log('ERROR WRITING LOOS CACHE TO FILE');
+      console.log(error);
+    }
+
+    cachedData = data;
+  }
+
+  return cachedData;
+}

src/pages/_app.tsx

@@ -1,7 +1,6 @@
 // Polyfills
 import 'resize-observer-polyfill';
 
-import React from 'react';
 import { UserProvider } from '@auth0/nextjs-auth0';
 import { MapStateProvider } from '../components/MapState';