Fix: Application crash on file upload and implement zoom to orthophoto (

#341) * feat(project-creation-form): form wrapper UI update * feat(project-creation-form): form header update * feat(project-creation-form): form step switcher UI update * feat(project-creation-form): update wrapper of form content and description * feat(project-creation-form): update basic information form information and form content * feat(project-creation-form): update define AOI form information and form content * feat(project-creation-form): update Key parameters form information and form content UI * feat(project-creation-form): update generate task step form information and form content UI * feat(project-creation-form): add animaiton on info text * feat(project-creation-form): update contribution step form information and form content UI * feat(project-creation-form): update style on form wrapper * feat(dashboard): make UI responsive * feat(project-creation-form): clear all state on form component unmount * feat(task-description): prevent click event untill processing starter api and status updation success * feat(project-description): add getLayerOptionsByStatus static function * feat(project-description): refactor dynamic fill color as per task status using `getLayerOptionsByStatus` * feat(project-description): separate the logic of showing `go To Task`/`Lock Task` button by the use of `showPrimaryButton` function * feat: restrict user redirection to complete profile if user profile is loading * feat: add maxBounds `[[-179, -89],[179, 89]]` to restrict map panning * fix(#332): fix crash application on file upload on firefox in firefox `File.lastmodifiedDate` has no longer support fixed replacing `lastModifiedDate` with `lastModified` * feat: add zoomToLayer optional feature on COGOrthophotoViewer component * feat(orthophoto-preview): implement zoom to orthohphoto --------- Co-authored-by: Sujit <[email protected]>
hotosm · Nov 19, 2024 · 1403824 · 1403824
1 parent 6e5ba0f
commit 1403824
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 17 deletions.
diff --git a/src/frontend/src/components/DroneOperatorTask/ModalContent/TaskOrthophotoPreview.tsx b/src/frontend/src/components/DroneOperatorTask/ModalContent/TaskOrthophotoPreview.tsx
@@ -4,18 +4,15 @@ import COGOrthophotoViewer from '@Components/common/MapLibreComponents/COGOrthop
 import MapContainer from '@Components/common/MapLibreComponents/MapContainer';
 import { setSelectedTaskDetailToViewOrthophoto } from '@Store/actions/droneOperatorTask';
 import { useTypedSelector } from '@Store/hooks';
-import { LngLatBoundsLike, RasterSourceSpecification } from 'maplibre-gl';
+import hasErrorBoundary from '@Utils/hasErrorBoundary';
+import { RasterSourceSpecification } from 'maplibre-gl';
 import { useEffect, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 
 const { COG_URL } = process.env;
 
 const TaskOrthophotoPreview = () => {
   const dispatch = useDispatch();
-  const taskOutline = useTypedSelector(
-    state =>
-      state.droneOperatorTask.selectedTaskDetailToViewOrthophoto?.outline,
-  );
   const taskIdFromRedux = useTypedSelector(
     state => state.droneOperatorTask.selectedTaskDetailToViewOrthophoto?.taskId,
   );
@@ -26,7 +23,7 @@ const TaskOrthophotoPreview = () => {
   const { map, isMapLoaded } = useMapLibreGLMap({
     containerId: 'orthophoto-map',
     mapOptions: {
-      zoom: 21,
+      zoom: 5,
       center: [0, 0],
     },
     disableRotation: true,
@@ -42,12 +39,6 @@ const TaskOrthophotoPreview = () => {
     [projectId, taskId],
   );
 
-  useEffect(() => {
-    if (!map || !isMapLoaded || !taskOutline) return;
-    const { bbox } = taskOutline.properties;
-    map?.fitBounds(bbox as LngLatBoundsLike, { padding: 50, duration: 500 });
-  }, [map, isMapLoaded, taskOutline]);
-
   useEffect(() => {
     return () => {
       dispatch(setSelectedTaskDetailToViewOrthophoto(null));
@@ -70,10 +61,11 @@ const TaskOrthophotoPreview = () => {
           id="task-orthophoto"
           source={orthophotoSource}
           visibleOnMap
+          zoomToLayer
         />
       </MapContainer>
     </div>
   );
 };
 
-export default TaskOrthophotoPreview;
+export default hasErrorBoundary(TaskOrthophotoPreview);
diff --git a/src/frontend/src/components/common/MapLibreComponents/COGOrthophotoViewer/index.tsx b/src/frontend/src/components/common/MapLibreComponents/COGOrthophotoViewer/index.tsx
@@ -9,6 +9,7 @@ interface IViewOrthophotoProps {
   id: string;
   source: RasterSourceSpecification;
   visibleOnMap?: Boolean;
+  zoomToLayer?: Boolean;
 }
 
 const COGOrthophotoViewer = ({
@@ -17,6 +18,7 @@ const COGOrthophotoViewer = ({
   id,
   source,
   visibleOnMap,
+  zoomToLayer = false,
 }: IViewOrthophotoProps) => {
   useEffect(() => {
     if (!map || !isMapLoaded || !source || !visibleOnMap) return;
@@ -34,14 +36,21 @@ const COGOrthophotoViewer = ({
       });
     }
 
+    const zoomToSource = setTimeout(() => {
+      if (map?.getSource(id) && zoomToLayer)
+        // @ts-ignore
+        map?.fitBounds(map?.getSource(id)?.bounds, { padding: 50 });
+    }, 1000);
+
     // eslint-disable-next-line consistent-return
     return () => {
       if (map?.getSource(id)) {
         map?.removeSource(id);
         if (map?.getLayer(id)) map?.removeLayer(id);
       }
+      clearTimeout(zoomToSource);
     };
-  }, [map, isMapLoaded, id, source, visibleOnMap]);
+  }, [map, isMapLoaded, id, source, visibleOnMap, zoomToLayer]);
 
   return null;
 };

diff --git a/src/frontend/src/components/common/UploadArea/index.tsx b/src/frontend/src/components/common/UploadArea/index.tsx
@@ -141,14 +141,14 @@ export default function FileUpload({
               key={id}
               className="naxatw-items-center naxatw-justify-between naxatw-rounded-lg naxatw-border naxatw-px-4 naxatw-py-2"
             >
-              <FlexRow gap={4} className="naxatw-items-center">
+              <FlexRow gap={4} className="naxatw-min-h-10 naxatw-items-center">
                 <Image src={previewURL} width={40} alt="" />
                 <FlexColumn>
                   <h5 className="naxatw-text-sm">{file?.name}</h5>
                   {file && file?.lastModified && (
                     <p className="naxatw-text-xs naxatw-text-grey-600">
-                      Uploaded on
-                      {format(new Date(file.lastModifiedDate), 'MMM dd yyyy')}
+                      Uploaded on{' '}
+                      {format(new Date(file.lastModified), 'MMM dd yyyy')}
                     </p>
                   )}
                 </FlexColumn>