Fit map bounds to just mapped/validated task(s) (hotosm#5141)

* Fit bounds to last mapped/validated tasks * Disable fit bounds if redirected from different project
HelNershingThapa · Jun 6, 2022 · 0248058 · 0248058
1 parent 2c78d1c
commit 0248058
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 6 deletions.
diff --git a/frontend/src/components/taskSelection/actionSidebars.js b/frontend/src/components/taskSelection/actionSidebars.js
@@ -61,9 +61,14 @@ export function CompletionTabForMapping({
         token,
         'POST',
       )
-        .then((r) => {
+        .then((res) => {
           clearLockedTasks();
-          navigate((redirectToPreviousProject && directedFrom) || `../tasks/`);
+          navigate((redirectToPreviousProject && directedFrom) || `../tasks/`, {
+            state: {
+              lastLockedTasksIds: res.tasks.map((task) => task.taskId),
+              lastLockedProjectId: project.projectId,
+            },
+          });
         })
         .catch((e) => {
           setSplitTaskError(true);
@@ -88,6 +93,12 @@ export function CompletionTabForMapping({
         clearLockedTasks();
         navigate(
           (redirectToPreviousProject && directedFrom) || `/projects/${project.projectId}/tasks/`,
+          {
+            state: {
+              lastLockedTasksIds: tasksIds,
+              lastLockedProjectId: project.projectId,
+            },
+          },
         );
       });
     } else {
@@ -118,6 +129,12 @@ export function CompletionTabForMapping({
         fetchLockedTasks();
         navigate(
           (redirectToPreviousProject && directedFrom) || `/projects/${project.projectId}/tasks/`,
+          {
+            state: {
+              lastLockedTasksIds: tasksIds,
+              lastLockedProjectId: project.projectId,
+            },
+          },
         );
       });
     }
@@ -337,7 +354,12 @@ export function CompletionTabForValidation({
         token,
       ).then((r) => {
         clearLockedTasks();
-        navigate((redirectToPreviousProject && directedFrom) || `../tasks/`);
+        navigate((redirectToPreviousProject && directedFrom) || `../tasks/`, {
+          state: {
+            lastLockedTasksIds: tasksIds,
+            lastLockedProjectId: project.projectId,
+          },
+        });
       });
     } else {
       return new Promise((resolve, reject) => {
@@ -360,7 +382,15 @@ export function CompletionTabForValidation({
       };
       return pushToLocalJSONAPI(url, JSON.stringify(payload), token).then((r) => {
         fetchLockedTasks();
-        navigate((redirectToPreviousProject && directedFrom) || `../tasks/?filter=readyToValidate`);
+        navigate(
+          (redirectToPreviousProject && directedFrom) || `../tasks/?filter=readyToValidate`,
+          {
+            state: {
+              lastLockedTasksIds: tasksIds,
+              lastLockedProjectId: project.projectId,
+            },
+          },
+        );
       });
     } else if (disabled) {
       return new Promise((resolve, reject) => {

diff --git a/frontend/src/components/taskSelection/index.js b/frontend/src/components/taskSelection/index.js
@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useRef, useCallback, Suspense } from 'react';
+import { useLocation } from '@reach/router';
 import { useSelector, useDispatch } from 'react-redux';
 import { useQueryParam, StringParam } from 'use-query-params';
 import Popup from 'reactjs-popup';
@@ -43,6 +44,7 @@ const getRandomTaskByAction = (activities, taskAction) => {
 };
 
 export function TaskSelection({ project, type, loading }: Object) {
+  const location = useLocation();
   const user = useSelector((state) => state.auth.get('userDetails'));
   const userOrgs = useSelector((state) => state.auth.get('organisations'));
   const lockedTasks = useGetLockedTasks();
@@ -91,6 +93,14 @@ export function TaskSelection({ project, type, loading }: Object) {
     }
   }, []);
 
+  useEffect(() => {
+    const { lastLockedTasksIds, lastLockedProjectId } = location.state;
+    if (lastLockedTasksIds && lastLockedProjectId === project.projectId) {
+      setZoomedTaskId(lastLockedTasksIds);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [project]);
+
   // fetch activities and contributions when the component is started
   useEffect(() => {
     getActivities(project.projectId);

diff --git a/frontend/src/components/taskSelection/map.js b/frontend/src/components/taskSelection/map.js
@@ -69,7 +69,8 @@ export const TasksMap = ({
   }, []);
 
   useLayoutEffect(() => {
-    if (zoomedTaskId) {
+    // should run only when triggered from tasks list
+    if (typeof zoomedTaskId === 'number') {
       const taskGeom = mapResults.features.filter(
         (task) => task.properties.taskId === zoomedTaskId,
       )[0].geometry;
@@ -97,7 +98,30 @@ export const TasksMap = ({
     ];
 
     const updateTMZoom = () => {
-      if (!taskBordersOnly) {
+      // fit bounds to last mapped/validated task(s), if exists
+      // otherwise fit bounds to all tasks 
+      if (zoomedTaskId?.length > 0) {
+        const lastLockedTasks = mapResults.features.filter((task) =>
+          zoomedTaskId.includes(task.properties.taskId),
+        );
+
+        const lastLockedTasksGeom = lastLockedTasks.reduce(
+          (acc, curr) => {
+            const geom = curr.geometry;
+            return {
+              type: 'MultiPolygon',
+              coordinates: [...acc.coordinates, ...geom.coordinates],
+            };
+          },
+          { type: 'MultiPolygon', coordinates: [] },
+        );
+
+        map.fitBounds(bbox(lastLockedTasksGeom), {
+          padding: 250,
+          maxZoom: 22,
+          animate: false,
+        });
+      } else if (!taskBordersOnly) {
         map.fitBounds(bbox(mapResults), { padding: 40, animate: animateZoom });
       } else {
         map.fitBounds(bbox(mapResults), { padding: 220, maxZoom: 6.5, animate: animateZoom });
@@ -433,6 +457,7 @@ export const TasksMap = ({
     animateZoom,
     authDetails.id,
     showTaskIds,
+    zoomedTaskId,
   ]);
 
   return (