fix gps location map flickering (#853)

src/components/molecules/Header.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useState } from 'react';
+import { FC, useCallback, useEffect, useState } from 'react';
 import { observer } from 'mobx-react-lite';
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from '@material-ui/core/styles';
@@ -35,24 +35,21 @@ const Header: FC = () => {
   const store: RootStore = useStore();
 
   const [open, setOpen] = useState(false);
-  const [location, setLocation] = useState<IPoint | null>(null);
 
   const isUserDetailsRequired: boolean = !store.userInfo?.meta.isCompleteRegistration;
   const roadSegmentLocation = store.gpsLocationData;
 
-  const onLocationChange = (location: IPoint) => {
+  const onLocationChange = useCallback((location: IPoint) => {
     store.fetchGpsLocation(location);
-    setLocation(location);
-  };
+  },[store]);
 
   const onLocationSearch = () => {
     if (roadSegmentLocation) {
       history.push(`${store.currentLanguageRouteString}/location/${roadSegmentLocation?.road_segment_id}`);
       setOpen(false);
       store.setGpsLocationData(null);
-      setLocation(null);
-    }
-  }
+    };
+  };
 
   useEffect(() => {
     store.getUserLoginDetails();
@@ -92,12 +89,10 @@ const Header: FC = () => {
       </Box>
       <MapDialog
         open={open}
-        location={location}
         section={roadSegmentLocation?.road_segment_name}
         onLocationChange={onLocationChange}
         onClose={() => {
           setOpen(false);
-          setLocation(null);
           store.setGpsLocationData(null);
         }}
         onSearch={onLocationSearch}

src/components/molecules/LocationSelect.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, memo, useState } from 'react';
 import { useMapEvents } from 'react-leaflet';
 import { IPoint } from 'models/Point';
 import { Marker } from 'components/atoms';
@@ -9,27 +9,29 @@ interface ILocation {
 }
 
 const LocationPicker: FC<ILocation> = ({ onLocationChange }) => {
+  const [position, setPosition] = useState<IPoint | null>(null);
+
   useMapEvents({
     click: (event) => {
       const {latlng: { lng, lat }} = event;
-      onLocationChange({ longitude: lng,latitude: lat });
+      setPosition({ longitude: lng, latitude: lat });
+      onLocationChange({ longitude: lng, latitude: lat });
     },
   });
-  return null;
+
+  return position === null ? null : <Marker markerdata={position}/>
 };
 
 interface IProps {
-  location: IPoint | null;
   onLocationChange: (location: IPoint) => void;
 }
 
-const LocationSelect: FC<IProps> = ({ location, onLocationChange }) => {
+const LocationSelect: FC<IProps> = ({ onLocationChange }) => {
   return (
     <Map>
       <LocationPicker onLocationChange={onLocationChange} />
-      {location && <Marker markerdata={location} />}
     </Map>
   );
 };
 
-export default LocationSelect;
+export default memo(LocationSelect);

src/components/molecules/MapDialog.tsx

@@ -9,7 +9,6 @@ import { IPoint } from 'models/Point';
 interface IProps {
   section?: string;
   open: boolean;
-  location: IPoint | null;
   onClose: () => void;
   onLocationChange: (location: IPoint) => void;
   onSearch: () => void;
@@ -38,7 +37,7 @@ const useStyles = makeStyles((theme: Theme) =>
   }),
 );
 
-const MapDialog: FC<IProps> = ({ section, open, onClose, location, onLocationChange, onSearch }) => {
+const MapDialog: FC<IProps> = ({ section, open, onClose, onLocationChange, onSearch }) => {
   const classes = useStyles();
   const { t } = useTranslation();
 
@@ -50,7 +49,7 @@ const MapDialog: FC<IProps> = ({ section, open, onClose, location, onLocationCha
         </Box>
         <Box display='flex' flexDirection='column' height='75vh'>
           <Box display='contents'>
-            <LocationSelect location={location} onLocationChange={onLocationChange} />
+            <LocationSelect onLocationChange={onLocationChange} />
           </Box>
           <div className={classes.chosenSection}>
             <Typography.Body1 bold>{t('mapDialog.chosenSegment')}</Typography.Body1>

src/components/molecules/map/Map.tsx

@@ -33,8 +33,8 @@ const Map: FC<IProps> = ({ zoom = INITIAL_ZOOM, center=INITIAL_CENTER, data, chi
   const bounds = getBounds(data);
 
   return (
-    <MapContainer zoom={zoom} className={classes.root}>
-      <MapViewControl bounds={bounds} center={center} zoom={INITIAL_ZOOM} />
+    <MapContainer zoom={zoom} center={center} className={classes.root}>
+      <MapViewControl bounds={bounds} />
       <GoogleMapsLayer />
       {children}
     </MapContainer>

src/pages/HomePage.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect } from 'react';
+import { FC, useEffect } from 'react';
 import WidgetsTemplate from '../components/organisms/WidgetsTemplate';
 import { Box } from '@material-ui/core';
 import SideBar from 'components/organisms/SideBar';

src/services/MapViewControl.tsx

@@ -1,19 +1,13 @@
 import React from 'react';
 import { useMap } from 'react-leaflet';
-import { LatLngLiteral } from 'leaflet';
 
 interface IProps {
-  zoom?: number;
-  center?: LatLngLiteral;
   bounds: any;
 }
 
-const MapViewControl: React.FC<IProps> = ({ zoom, center, bounds }) => {
+const MapViewControl: React.FC<IProps> = ({ bounds }) => {
   const map = useMap();
   map.invalidateSize();
-  if (zoom && center) {
-    map.setView(center, zoom);
-  }
   map.fitBounds(bounds);
   return null;
 };