Merge branch 'next' into ob/fix-accessiblity-overlay

public-convenience-ltd · Mar 14, 2022 · 6071ba4 · 6071ba4
2 parents 8fd315b + bb58ef6
commit 6071ba4
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 13 deletions.
diff --git a/src/components/LocationSearch/useNominatimAutocomplete.ts b/src/components/LocationSearch/useNominatimAutocomplete.ts
@@ -49,7 +49,6 @@ const useNominatimAutocomplete = (input: string | any[]) => {
     if (input) {
       return;
     }
-
     setPlaces([]);
   }, [input, setPlaces]);
 

diff --git a/src/components/LooMap/LooMap.tsx b/src/components/LooMap/LooMap.tsx
@@ -185,7 +185,12 @@ const LooMap: React.FC<LooMapProps> = ({
       },
     });
   }, [mapState.map, isActive, setMapState, startLocate, stopLocate]);
-  // end location service initialisation.
+
+  useEffect(() => {
+    if (mapState?.searchLocation && mapState?.map) {
+      mapState.map.setView(mapState.searchLocation);
+    }
+  }, [map, mapState.searchLocation]);
 
   return (
     <Box

diff --git a/src/components/LooMap/Markers.tsx b/src/components/LooMap/Markers.tsx
@@ -122,7 +122,7 @@ const MarkerGroup: React.FC<{
       marker.getElement()?.setAttribute('aria-label', 'Public Toilet');
       return marker;
     },
-    [mapState?.focus?.id, router]
+    [mapState.focus, router]
   );
 
   const [appliedFilterTypes, setAppliedFilterTypes] = useState<
@@ -163,7 +163,7 @@ const MarkerGroup: React.FC<{
     appliedFilterTypes,
     data?.loosByGeohash,
     initialiseMarker,
-    mapState?.focus?.id,
+    mapState.focus,
   ]);
 
   useEffect(() => {

diff --git a/src/components/ToiletDetailsPanel.tsx b/src/components/ToiletDetailsPanel.tsx
@@ -25,7 +25,6 @@ import getISODay from 'date-fns/getISODay';
 import parseISO from 'date-fns/parseISO';
 import add from 'date-fns/add';
 import Link from 'next/link';
-import useComponentSize from '@rehooks/component-size';
 
 import Box from './Box';
 import Button from './Button';
@@ -34,8 +33,10 @@ import Spacer from './Spacer';
 import Icon from './Icon';
 import { Media } from './Media';
 // Suppress Opening Hours Heading during COVID-19
-import { /* getIsOpen, */ WEEKDAYS, isClosed } from '../lib/openingTimes';
+import { getIsOpen, WEEKDAYS, isClosed } from '../lib/openingTimes';
 import { useMapState } from './MapState';
+import type L from 'leaflet';
+import { useRouter } from 'next/router';
 
 const Grid = styled(Box)`
   display: flex;
@@ -82,11 +83,10 @@ 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 metersToLoo = 10000;
+  const toLatLng = L.latLng(to.lat, to.lng);
+  const metersToLoo = fromLatLng.distanceTo(toLatLng);
 
   const distance =
     metersToLoo < 1000
@@ -95,7 +95,7 @@ const DistanceTo = ({ from, to }) => {
 
   return (
     <Text as="span" fontSize="3" fontWeight="bold">
-      FIXME {distance}
+      {distance}
     </Text>
   );
 };
@@ -109,6 +109,7 @@ const ToiletDetailsPanel = ({
 }) => {
   const [isExpanded, setIsExpanded] = React.useState(startExpanded);
 
+  const router = useRouter();
   const submitVerificationReport = async (variables: { id: any }) => {
     alert('Implement me with apollo');
   };
@@ -123,7 +124,7 @@ const ToiletDetailsPanel = ({
     }
   }, [isExpanded]);
 
-  // TODO: use a different method for this as the useComponentSize hook doesn't play well with SSR
+  // TODO (Feb 2022): use a different method for this as the useComponentSize hook doesn't play well with SSR
   // call onDimensionsChange whenever the dimensions of the container change
   const containerRef = React.useRef(null);
   // const size = useComponentSize(containerRef);
@@ -556,6 +557,16 @@ const ToiletDetailsPanel = ({
           >
             Details
           </Button>
+          <Spacer mr={2} />
+          <Button
+            variant="secondary"
+            icon={<Icon icon={faList} />}
+            onClick={() => router.push('/')}
+            aria-expanded="false"
+            data-testid="close-button"
+          >
+            Close
+          </Button>
         </Box>
       </Grid>
     </Box>

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -6,14 +6,18 @@ import { useMapState } from '../components/MapState';
 import config from '../config';
 import { withApollo } from '../api-client/withApollo';
 import LooMap from '../components/LooMap/LooMapLoader';
+import { useEffect } from 'react';
 
 const SIDEBAR_BOTTOM_MARGIN = 32;
 
 const HomePage = () => {
   const [mapState, setMapState] = useMapState();
-
   const pageTitle = config.getTitle('Home');
 
+  useEffect(() => {
+    setMapState({ focus: undefined });
+  }, [setMapState]);
+
   return (
     <>
       <Head>