fix: clean up /map/lat/lng and sidebar

public-convenience-ltd · Nov 24, 2021 · 57808d5 · 57808d5
1 parent 04029cc
commit 57808d5
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 92 deletions.
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import isPropValid from '@emotion/is-prop-valid';
@@ -48,17 +48,11 @@ const StyledNavLink = styled(Link)`
   align-items: center;
 `;
 
-const Sidebar = ({
-  filters,
-  onFilterChange,
-  onSelectedItemChange,
-  onUpdateMapPosition,
-  mapCenter,
-}) => {
+const Sidebar = ({ filters, onFilterChange }) => {
   const [isFilterExpanded, setIsFilterExpanded] = useState(false);
   const [isFiltersExpanded, setIsFiltersExpanded] = useState(false);
   const filterToggleRef = useRef(null);
-  const [, setMapState] = useMapState();
+  const [mapState, setMapState] = useMapState();
 
   return (
     <section aria-labelledby="heading-search">
@@ -68,7 +62,7 @@ const Sidebar = ({
         </VisuallyHidden>
 
         <LocationSearch
-          onSelectedItemChange={(center) => onUpdateMapPosition({ center })}
+          onSelectedItemChange={(center) => setMapState({ center })}
         />
 
         <Box display="flex" justifyContent="center" mt={3}>
@@ -155,7 +149,9 @@ const Sidebar = ({
           </h2>
 
           <Box mt={3}>
-            <LocationSearch onSelectedItemChange={onSelectedItemChange} />
+            <LocationSearch
+              onSelectedItemChange={(center) => setMapState({ center })}
+            />
           </Box>
 
           <Box as="section" my={4} aria-labelledby="heading-filters">
@@ -207,7 +203,7 @@ const Sidebar = ({
               <VisuallyHidden>Add a toilet</VisuallyHidden>
             </h2>
             <StyledNavLink
-              href={`/loos/add?lat=${mapCenter.lat}&lng=${mapCenter.lng}`}
+              href={`/loos/add?lat=${mapState.center.lat}&lng=${mapState.center.lng}`}
             >
               <Box display="flex" alignItems="center" as="button" type="button">
                 <Icon icon={faPlusCircle} fixedWidth size="lg" />
@@ -258,9 +254,7 @@ const Sidebar = ({
 
 Sidebar.propTypes = {
   filters: PropTypes.object.isRequired,
-  onUpdateMapPosition: PropTypes.func.isRequired,
   onFilterChange: PropTypes.func.isRequired,
-  onSelectedItemChange: PropTypes.func.isRequired,
 };
 
 export default Sidebar;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,5 +1,4 @@
 import Head from 'next/head';
-import dynamic from 'next/dynamic';
 import PageLayout from '../components/PageLayout';
 import Box from '../components/Box';
 import Sidebar from '../components/Sidebar';
@@ -43,13 +42,7 @@ const HomePage = () => {
           // center on small viewports
           mx={['auto', 0]}
         >
-          <Sidebar
-            filters={filters}
-            onFilterChange={setFilters}
-            onSelectedItemChange={(center) => setMapState({ center })}
-            onUpdateMapPosition={setMapState}
-            mapCenter={mapState.center}
-          />
+          <Sidebar filters={filters} onFilterChange={setFilters} />
         </Box>
 
         <LooMap

diff --git a/src/pages/loos/[id]/index.tsx b/src/pages/loos/[id]/index.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import Head from 'next/head';
-import dynamic from 'next/dynamic';
 import PageLayout from '../../../components/PageLayout';
 import Box from '../../../components/Box';
 import Sidebar from '../../../components/Sidebar';
@@ -54,13 +53,7 @@ const LooPage: PageFindLooByIdComp = (props) => {
           // center on small viewports
           mx={['auto', 0]}
         >
-          <Sidebar
-            filters={filters}
-            onFilterChange={setFilters}
-            onSelectedItemChange={(center) => setMapState({ center })}
-            onUpdateMapPosition={setMapState}
-            mapCenter={mapState.center}
-          />
+          <Sidebar filters={filters} onFilterChange={setFilters} />
         </Box>
         <LooMap
           center={mapState.center}

diff --git a/src/pages/map/[lng]/[lat].tsx b/src/pages/map/[lng]/[lat].tsx
@@ -1,68 +1,32 @@
-import React, { useState } from 'react';
+import React from 'react';
 import Head from 'next/head';
-import dynamic from 'next/dynamic';
+
 import PageLayout from '../../../components/PageLayout';
 import Box from '../../../components/Box';
 import Sidebar from '../../../components/Sidebar';
 import VisuallyHidden from '../../../components/VisuallyHidden';
 import { useMapState } from '../../../components/MapState';
-import config, { FILTERS_KEY } from '../../../config';
+import config from '../../../config';
 import { useRouter } from 'next/router';
 import { withApollo } from '../../../components/withApollo';
 import { NextPage } from 'next';
-import { useFindLoosNearbyQuery } from '../../../api-client/graphql';
+import LooMap from '../../../components/LooMap/LooMapLoader';
+import useFilters from '../../../hooks/useFilters';
 
 const SIDEBAR_BOTTOM_MARGIN = 32;
-const MapLoader = () => <p>Loading map...</p>;
-const LooMap = dynamic(() => import('../../../components/LooMap'), {
-  loading: MapLoader,
-  ssr: false,
-});
 
-const MapPage = () => {
-  const router = useRouter();
+const MapPage: NextPage = () => {
+  const { query } = useRouter();
   const [mapState, setMapState] = useMapState();
-  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
-  React.useEffect(() => {
-    window.localStorage.setItem(FILTERS_KEY, JSON.stringify(filters));
-  }, [filters]);
-
-  const { data } = useFindLoosNearbyQuery({
-    variables: {
-      lat: mapState.center.lat,
-      lng: mapState.center.lng,
-      radius: Math.ceil(mapState.radius),
-    },
-  });
-
-  // get the filter objects from config for the filters applied by the user
-  const applied = config.filters.filter((filter) => filters[filter.id]);
-
-  const toilets = React.useMemo(() => {
-    if (data?.loosByProximity) {
-      return data.loosByProximity.filter((toilet: { [x: string]: any }) =>
-        applied.every((filter) => {
-          const value = toilet[filter.id];
-
-          if (value === null) {
-            return false;
-          }
-
-          return !!value;
-        })
-      );
-    }
-    return [];
-  }, [data?.loosByProximity, applied]);
+  const { filters, setFilters } = useFilters([]);
+
+  const center = React.useMemo(
+    () => ({
+      lat: parseFloat(query.lat as string),
+      lng: parseFloat(query.lng as string),
+    }),
+    [query]
+  );
 
   const pageTitle = config.getTitle('Area Map');
 
@@ -90,18 +54,11 @@ const MapPage = () => {
           // center on small viewports
           mx={['auto', 0]}
         >
-          <Sidebar
-            filters={filters}
-            onFilterChange={setFilters}
-            onSelectedItemChange={(center) => setMapState({ center })}
-            onUpdateMapPosition={setMapState}
-            mapCenter={mapState.center}
-          />
+          <Sidebar filters={filters} onFilterChange={setFilters} />
         </Box>
 
         <LooMap
-          loos={toilets}
-          center={mapState.center}
+          center={center}
           zoom={mapState.zoom}
           onViewportChanged={setMapState}
           controlsOffset={0}
@@ -111,4 +68,4 @@ const MapPage = () => {
   );
 };
 
-export default withApollo(MapPage as NextPage);
+export default withApollo(MapPage);