Fix center map

Author: constanzauanini

src/components/plants/Dashboard/Map.tsx

@@ -5,7 +5,13 @@ import CreateIcon from '@material-ui/icons/Create';
 import FullscreenIcon from '@material-ui/icons/Fullscreen';
 import 'mapbox-gl/dist/mapbox-gl.css';
 import React from 'react';
-import ReactMapGL, { MapContext, MapEvent, NavigationControl, Popup, Source } from 'react-map-gl';
+import ReactMapGL, {
+  MapContext,
+  MapEvent,
+  NavigationControl,
+  Popup,
+  Source,
+} from 'react-map-gl';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { Feature } from '../../../api/types/feature';
 import snackbarAtom from '../../../state/atoms/snackbar';
@@ -73,8 +79,12 @@ interface MapboxFeaturesProps {
   color: string;
 }
 
-const navControlStyle = { right: 10, bottom: 10, zIndex: 10, };
-const DEFAULT_VIEWPORT: ViewportProps = { zoom: 10, width: 'fit', height: '100%' };
+const navControlStyle = { right: 10, bottom: 10, zIndex: 10 };
+const DEFAULT_VIEWPORT: ViewportProps = {
+  zoom: 10,
+  width: 'fit',
+  height: '100%',
+};
 
 interface Props {
   onFullscreen: () => void;
@@ -86,7 +96,8 @@ function Map({ onFullscreen, isFullscreen }: Props): JSX.Element {
   const [selectedFeature, setSelectedFeature] = React.useState<Feature>();
   const [editPlantModalOpen, setEditPlantModalOpen] = React.useState(false);
   const [viewport, setViewport] = React.useState(DEFAULT_VIEWPORT);
-  const [selectedCoordinates, setSelectedCoordinates] = React.useState<[number, number]>();
+  const [selectedCoordinates, setSelectedCoordinates] =
+    React.useState<[number, number]>();
 
   const features = useRecoilValue(plantsFeaturesWithGeolocationSelector);
   const speciesForChart = useRecoilValue(speciesForChartSelector);
@@ -99,49 +110,65 @@ function Map({ onFullscreen, isFullscreen }: Props): JSX.Element {
     setViewport({ ...DEFAULT_VIEWPORT, height: '60vh' });
   }, [isFullscreen]);
 
-  useCenterMap(center, setViewport);
-  const geojson: GeoJSON.FeatureCollection<GeoJSON.Geometry> = React.useMemo(() => (
-    (plantsByFeatureId && features) ? features : []).reduce((acum, feature) => {
-      const coordinates = getCoordinates(feature);
-      const plant = plantsByFeatureId![feature.id!];
-      if (plant) {
-        const color = (speciesForChart[plant.speciesId ?? 0] ?? { color: 'black' }).color;
-        const properties: MapboxFeaturesProps = { feature: JSON.stringify(feature), color };
+  const geojson: GeoJSON.FeatureCollection<GeoJSON.Geometry> = React.useMemo(
+    () =>
+      (plantsByFeatureId && features ? features : []).reduce(
+        (acum, feature) => {
+          const coordinates = getCoordinates(feature);
+          const plant = plantsByFeatureId![feature.id!];
+          if (plant) {
+            const color = (
+              speciesForChart[plant.speciesId ?? 0] ?? { color: 'black' }
+            ).color;
+            const properties: MapboxFeaturesProps = {
+              feature: JSON.stringify(feature),
+              color,
+            };
 
-        acum.features.push({
-          type: 'Feature',
-          properties,
-          geometry: {
-            type: 'Point',
-            coordinates: [coordinates.longitude, coordinates.latitude]
+            acum.features.push({
+              type: 'Feature',
+              properties,
+              geometry: {
+                type: 'Point',
+                coordinates: [coordinates.longitude, coordinates.latitude],
+              },
+            });
           }
-        });
-      }
 
-      return acum;
-    }, { type: 'FeatureCollection', features: [] } as GeoJSON.FeatureCollection<GeoJSON.Geometry>)
-    , [features, plantsByFeatureId, speciesForChart]);
+          return acum;
+        },
+        {
+          type: 'FeatureCollection',
+          features: [],
+        } as GeoJSON.FeatureCollection<GeoJSON.Geometry>
+      ),
+    [features, plantsByFeatureId, speciesForChart]
+  );
 
-  const selectedPlant = selectedFeature && plantsByFeatureId
-    ? plantsByFeatureId[selectedFeature.id!]
-    : undefined;
+  const selectedPlant =
+    selectedFeature && plantsByFeatureId
+      ? plantsByFeatureId[selectedFeature.id!]
+      : undefined;
 
-  const selectedPlantForTable = selectedPlant && selectedFeature ? {
-    date: selectedPlant.datePlanted,
-    species: speciesForChart[selectedPlant.speciesId!]
-      ? speciesForChart[selectedPlant.speciesId!].speciesName.name
-      : undefined,
-    geolocation:
-      selectedFeature.geom &&
-        Array.isArray(selectedFeature?.geom.coordinates)
-        ? `${selectedFeature.geom.coordinates[1].toFixed(
-          6
-        )}, ${selectedFeature.geom.coordinates[0].toFixed(6)}`
-        : undefined,
-    notes: selectedFeature.notes,
-    featureId: selectedFeature.id,
-    speciesId: selectedPlant.speciesId,
-  } : undefined;
+  const selectedPlantForTable =
+    selectedPlant && selectedFeature
+      ? {
+          date: selectedPlant.datePlanted,
+          species: speciesForChart[selectedPlant.speciesId!]
+            ? speciesForChart[selectedPlant.speciesId!].speciesName.name
+            : undefined,
+          geolocation:
+            selectedFeature.geom &&
+            Array.isArray(selectedFeature?.geom.coordinates)
+              ? `${selectedFeature.geom.coordinates[1].toFixed(
+                  6
+                )}, ${selectedFeature.geom.coordinates[0].toFixed(6)}`
+              : undefined,
+          notes: selectedFeature.notes,
+          featureId: selectedFeature.id,
+          speciesId: selectedPlant.speciesId,
+        }
+      : undefined;
 
   const onCloseEditPlantModal = (snackbarMessage?: string) => {
     setEditPlantModalOpen(false);
@@ -162,7 +189,9 @@ function Map({ onFullscreen, isFullscreen }: Props): JSX.Element {
   };
 
   const onClick = (event: MapEvent) => {
-    if (!event.features) { return; }
+    if (!event.features) {
+      return;
+    }
 
     if (event.features && event.features.length > 0) {
       const eventFeature = event.features[0];
@@ -171,15 +200,13 @@ function Map({ onFullscreen, isFullscreen }: Props): JSX.Element {
       if (layerId === 'unclustered-point') {
         const lngLat = event.lngLat;
 
-
         if (eventFeature.properties) {
           const properties: MapboxFeaturesProps = eventFeature.properties;
           const feature = JSON.parse(properties.feature);
 
           setSelectedCoordinates(lngLat);
           setSelectedFeature(feature);
         }
-
       }
     }
   };
@@ -212,39 +239,63 @@ function Map({ onFullscreen, isFullscreen }: Props): JSX.Element {
           <MapLayers />
         </Source>
         <NavigationControl showCompass={false} style={navControlStyle} />
+        <CenterMap center={center} setViewport={setViewport} />
         <div style={{ position: 'absolute', right: 0, bottom: 80 }}>
-          <IconButton id='full-screen' onClick={onFullscreen} className={classes.fullscreen}>
+          <IconButton
+            id='full-screen'
+            onClick={onFullscreen}
+            className={classes.fullscreen}
+          >
             <FullscreenIcon />
           </IconButton>
         </div>
         {selectedFeature && selectedPlant && selectedCoordinates && (
           <Popup
-            onClose={() => { setSelectedFeature(undefined); setSelectedCoordinates(undefined); }}
+            onClose={() => {
+              setSelectedFeature(undefined);
+              setSelectedCoordinates(undefined);
+            }}
             latitude={selectedCoordinates[1]}
             longitude={selectedCoordinates[0]}
             captureClick={false}
             closeOnClick={false}
             anchor='top'
           >
             <div>
-              <Typography component='p' variant='subtitle2' id='feature-species-name'>
+              <Typography
+                component='p'
+                variant='subtitle2'
+                id='feature-species-name'
+              >
                 {selectedPlant.speciesId
                   ? speciesForChart[selectedPlant.speciesId].speciesName.name
                   : strings.OTHER}
               </Typography>
-              <Typography component='p' variant='body2' className={classes.spacing} >
-                {strings.AS_OF}{' '}
-                {cellDateFormatter(selectedFeature.enteredTime)}
+              <Typography
+                component='p'
+                variant='body2'
+                className={classes.spacing}
+              >
+                {strings.AS_OF} {cellDateFormatter(selectedFeature.enteredTime)}
               </Typography>
-              <Typography component='p' variant='body2' className={classes.spacing} id='feature-coordinates'>
+              <Typography
+                component='p'
+                variant='body2'
+                className={classes.spacing}
+                id='feature-coordinates'
+              >
                 {selectedCoordinates ? selectedCoordinates[1].toFixed(6) : 0},
                 {selectedCoordinates ? selectedCoordinates[0].toFixed(6) : 0}
               </Typography>
               <PlantPhoto featureId={selectedFeature?.id} />
               <Chip
                 id='new-species'
                 size='medium'
-                label={selectedPlant.speciesId ? strings.EDIT_SPECIES : strings.ADD_SPECIES}
+                label={
+                  selectedPlant.speciesId
+                    ? strings.EDIT_SPECIES
+                    : strings.ADD_SPECIES
+                }
                 onClick={onNewSpecies}
                 className={classes.newSpecies}
                 icon={selectedPlant.speciesId ? <CreateIcon /> : <AddIcon />}
@@ -259,13 +310,25 @@ function Map({ onFullscreen, isFullscreen }: Props): JSX.Element {
 
 export default React.memo(Map);
 
-function useCenterMap(center: { latitude: number; longitude: number }, setViewport: (viewport: ViewportProps) => void) {
+interface CenterMapProps {
+  center: { latitude: number; longitude: number };
+  setViewport: React.Dispatch<
+    React.SetStateAction<{
+      zoom: number;
+      width: string;
+      height: string;
+    }>
+  >;
+}
+
+function CenterMap({ center, setViewport }: CenterMapProps) {
   const { map } = React.useContext(MapContext);
   const [lat, setLat] = React.useState(center.latitude);
   const [long, setLong] = React.useState(center.longitude);
 
   React.useEffect(() => {
-    if (map && center && (center.longitude !== long || center.latitude !== lat)) {
+    console.log(map);
+    if (center && (center.longitude !== long || center.latitude !== lat)) {
       map.jumpTo({
         center: [center.longitude, center.latitude],
         essential: true,
@@ -275,4 +338,6 @@ function useCenterMap(center: { latitude: number; longitude: number }, setViewpo
       setLong(center.longitude);
     }
   }, [center, lat, long, map, setViewport]);
+
+  return null;
 }