fix: map responsive crash because context is not present (#776)

graasp · Jan 29, 2025 · 66c4754 · 66c4754
1 parent 5b53d72
commit 66c4754
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 94 deletions.
diff --git a/src/modules/builder/map/components/map/InitialSetup.tsx b/src/modules/builder/map/components/map/InitialSetup.tsx
diff --git a/src/modules/builder/map/components/map/ItemsMarkers.tsx b/src/modules/builder/map/components/map/ItemsMarkers.tsx
@@ -1,4 +1,4 @@
-import { type JSX, useRef } from 'react';
+import { type JSX } from 'react';
 import { FeatureGroup } from 'react-leaflet';
 import MarkerClusterGroup from 'react-leaflet-cluster';
 
@@ -19,36 +19,12 @@ const ItemsMarkers = ({
     lng2: number;
   };
 }): JSX.Element | JSX.Element[] | undefined => {
-  const groupRef = useRef<any>(null);
-  // const map = useMap();
   const { useItemsInMap, item } = useQueryClientContext();
   const { data: itemGeolocations, isFetching } = useItemsInMap({
     ...bounds,
     parentItemId: item?.id,
     keywords: tags,
   });
-  // const [prevState, setPrevState] = useState(itemGeolocations);
-
-  // todo: fix this code.
-  // this use effect causes the storybook tests to hang forever
-  // useEffect(() => {
-  //   if (!isFetching) {
-  //     if (JSON.stringify(itemGeolocations) !== JSON.stringify(prevState)) {
-  //       // on positive search, focus on items
-  //       if (
-  //         itemGeolocations?.length &&
-  //         itemGeolocations.length !== prevState?.length &&
-  //         tags.length
-  //       ) {
-  //         map.fitBounds(groupRef.current.getBounds());
-  //       }
-
-  //       // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
-  //       setPrevState(itemGeolocations);
-  //     }
-  //   }
-  //   // eslint-disable-next-line react-hooks/exhaustive-deps
-  // }, [tags, itemGeolocations, isFetching]);
 
   if (isFetching) {
     return (
@@ -68,7 +44,7 @@ const ItemsMarkers = ({
   }
   // color of clusters is defined by number of markers grouped together
   return (
-    <FeatureGroup ref={groupRef}>
+    <FeatureGroup>
       <MarkerClusterGroup chunkedLoading showCoverageOnHover={false}>
         {itemGeolocations?.map((geoloc) => (
           <ItemMarker key={geoloc.id} geolocation={geoloc} />

diff --git a/src/modules/builder/map/components/topbar/MobileTopBar.tsx b/src/modules/builder/map/components/topbar/MobileTopBar.tsx
@@ -1,6 +1,5 @@
 import { type JSX, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useMap } from 'react-leaflet';
 
 import Button from '@mui/material/Button';
 import Dialog from '@mui/material/Dialog';
@@ -19,10 +18,17 @@ import GeolocationPicker, {
 import { useQueryClientContext } from '../context/QueryClientContext';
 import Search from './Search';
 
-type Props = { onChange: (tags: string[]) => void; tags: string[] };
+type Props = {
+  onChange: (tags: string[]) => void;
+  tags: string[];
+  onChangeOption: GeolocationPickerProps['onChangeOption'];
+};
 
-const MobileTopBar = ({ onChange, tags }: Props): JSX.Element => {
-  const map = useMap();
+const MobileTopBar = ({
+  onChange,
+  tags,
+  onChangeOption,
+}: Props): JSX.Element => {
   const { useSuggestionsForAddress, currentMember } = useQueryClientContext();
   const { t } = useTranslation(NS.Map);
   const { t: commonT } = useTranslation(NS.Common);
@@ -36,14 +42,6 @@ const MobileTopBar = ({ onChange, tags }: Props): JSX.Element => {
     setOpen(false);
   };
 
-  const onChangeOption: GeolocationPickerProps['onChangeOption'] = ({
-    lat,
-    lng,
-  }) => {
-    map.flyTo({ lat, lng }, 10);
-    setOpen(false);
-  };
-
   return (
     <>
       <Fab
@@ -63,7 +61,10 @@ const MobileTopBar = ({ onChange, tags }: Props): JSX.Element => {
               <br />
               <GeolocationPicker
                 useSuggestionsForAddress={useSuggestionsForAddress}
-                onChangeOption={onChangeOption}
+                onChangeOption={(v) => {
+                  onChangeOption?.(v);
+                  setOpen(false);
+                }}
               />
               <br />
             </>

diff --git a/src/modules/builder/map/components/topbar/TopBar.tsx b/src/modules/builder/map/components/topbar/TopBar.tsx
@@ -25,7 +25,13 @@ const TopBar = ({
   const { isMobile } = useMobileView();
 
   if (isMobile) {
-    return <MobileTopBar tags={tags} onChange={onChange} />;
+    return (
+      <MobileTopBar
+        tags={tags}
+        onChange={onChange}
+        onChangeOption={onChangeOption}
+      />
+    );
   }
 
   return (