fix bundling issues related to created status

src/components/HOCs/WithChallengeTaskClusters/WithChallengeTaskClusters.js

@@ -209,7 +209,9 @@ export const WithChallengeTaskClusters = function(WrappedComponent, storeTasks=f
     onBulkTaskSelection = taskIds => {
       const tasks = this.clustersAsTasks().filter(task => {
         const taskId = task.id || task.taskId
-        return taskIds.includes(taskId) &&
+        const alreadyBundled = task.bundleId && this.props.taskBundle?.bundleId !== task.bundleId
+
+        return taskIds.includes(taskId) && !alreadyBundled &&
           !(
             this.props.task &&
             ![0, 3, 6].includes(task.taskStatus || task.status) &&

src/components/HOCs/WithTaskBundle/WithTaskBundle.js

@@ -25,131 +25,107 @@
       resetSelectedTasks: null
     }
 
-    componentDidMount() {
+    async componentDidMount() {
       const { task } = this.props
-      this.setBundlingConditions()
-      this.setState({ completingTask: null })
-
-      if (_isFinite(_get(task, 'bundleId')) && task?.status === 0) {
-        this.props.deleteTaskBundle(task.bundleId)
-      } else if (_isFinite(_get(task, 'bundleId'))){
-        this.setupBundle(task.bundleId)
+      if (_isFinite(_get(task, 'bundleId'))) {
+        await this.setupBundle(task.bundleId)
+      } else {
+        this.updateBundlingConditions()
       }
 
       window.addEventListener('beforeunload', this.handleBeforeUnload)
     }
 
-    componentDidUpdate(prevProps, prevState) {
-      const { initialBundle } = this.state
+    async componentDidUpdate(prevProps, prevState) {
       const { task } = this.props
+
       if (_get(task, 'id') !== _get(prevProps, 'task.id')) {
-        this.setBundlingConditions()
-        this.setState({ selectedTasks: [], initialBundle: null, taskBundle: null, loading: false, completingTask: null })
+        this.setState({ 
+          selectedTasks: [], 
+          initialBundle: null, 
+          taskBundle: null, 
+          loading: false, 
+          completingTask: null 
+        })
+
         if (_isFinite(_get(task, 'bundleId'))) {
-          this.setupBundle(task.bundleId)
+          await this.setupBundle(task.bundleId)
+        } else {
+          this.updateBundlingConditions()
         }
 
         const prevInitialBundle = prevState.initialBundle
         const prevTaskBundle = prevState.taskBundle
         if ((prevTaskBundle || prevInitialBundle) && prevTaskBundle !== prevInitialBundle && !prevState.completingTask) {
-          if (initialBundle) {
+          if (prevInitialBundle) {
             // Whenever the user redirects, skips a task, or refreshes and there is a 
             // new bundle state, the bundle state needs to reset to its initial value.
             this.props.resetTaskBundle(prevInitialBundle)
           } else {
             // Whenever the user redirects, skips a task, or refreshes and there was 
             // no initial value, the bundle will be destroyed.
-            this.props.deleteTaskBundle(prevTaskBundle.bundleId)
-            this.clearActiveTaskBundle()
+            this.clearActiveTaskBundle(prevTaskBundle.bundleId)
           }
         } else if ((prevTaskBundle && prevInitialBundle) && prevTaskBundle !== prevInitialBundle && prevState.completingTask) {
-          const tasksToUnlock = prevInitialBundle.taskIds.filter(taskId => !prevTaskBundle.taskIds.includes(taskId))
-          tasksToUnlock.map(taskId => {
-            this.props.releaseTask(taskId).then(() => {
-              // wait for lock to be cleared in db and provide some leeway 
-              // time with setTimeout before triggering storage event
-              setTimeout(() => localStorage.removeItem(`lock-${taskId}`), 1500)
-            }).catch(() => null)
-          })
+          await this.unlockTasks(prevTaskBundle, prevTaskBundle)
         }
       }
     }
 
     componentWillUnmount() {
       this.resetBundle()
-
-      this.setState({ selectedTasks: [], initialBundle: null, taskBundle: null, loading: false, completingTask: null })
       window.removeEventListener('beforeunload', this.handleBeforeUnload)
     }
 
-    setBundlingConditions = () => {
+    updateBundlingConditions = () => {
       const { task, taskReadOnly, workspace, user, name } = this.props
-      const isCompletionWorkspace = workspace?.name === "taskCompletion" || name === "taskCompletion"
-      const isReviewWorkspace = workspace?.name === "taskReview" || name === "taskReview"
-
+      const isCompletionWorkspace = ["taskCompletion"].includes(workspace?.name || name)
+      const isReviewWorkspace = ["taskReview"].includes(workspace?.name || name)
       const completionStatus = isCompletionWorkspace && ([2].includes(task?.reviewStatus) || [0, 3, 6].includes(task?.status))
-
       const enableMapperEdits = (!task?.completedBy || user.id === task.completedBy) && completionStatus && !isReviewWorkspace
       const enableSuperUserEdits = user.isSuperUser && (completionStatus || isReviewWorkspace)
-
       const bundleEditsDisabled = taskReadOnly || (!enableMapperEdits && !enableSuperUserEdits)
 
       this.setState({ bundleEditsDisabled })
     }
 
     handleBeforeUnload = () => {
       this.resetBundle()
-
-      this.setState({ selectedTasks: [], initialBundle: null, taskBundle: null, loading: false, completingTask: null })
     }
 
-    resetBundle = () => {
-      const { initialBundle } = this.state
-      if (!this.state.completingTask) {
+    resetBundle = async () => {
+      const { initialBundle, taskBundle, completingTask } = this.state
+      if (!completingTask) {
         this.resetSelectedTasks()
-        if (
-          (this.state.taskBundle || this.state.initialBundle) &&
-          this.state.taskBundle !== this.state.initialBundle &&
-          !this.state.completingTask
-        ) {
+        if (taskBundle || initialBundle && taskBundle !== initialBundle) {
           if (initialBundle) {
-            // Whenever the user redirects, skips a task, or refreshes and there is a 
-            // new bundle state, the bundle state needs to reset to its initial value.
-            this.props.resetTaskBundle(initialBundle)
-          } else {
-            // Whenever the user redirects, skips a task, or refreshes and there was 
-            // no initial value, the bundle will be destroyed.
-            this.props.deleteTaskBundle(this.state.taskBundle.bundleId)
-            this.clearActiveTaskBundle()
+            await this.props.resetTaskBundle(initialBundle).catch(console.error)
+          } else if (taskBundle) {
+            await this.clearActiveTaskBundle(taskBundle.bundleId)
           }
         }
-      } else if (
-        this.state.taskBundle &&
-        this.state.initialBundle &&
-        this.state.taskBundle !== this.state.initialBundle &&
-        this.state.completingTask
-      ) {
-        const tasksToUnlock = this.state.initialBundle.taskIds.filter(
-          (taskId) => !this.state.taskBundle.taskIds.includes(taskId)
-        )
-        tasksToUnlock.map((taskId) => {
-          this.props.releaseTask(taskId).then(() => {
-            // wait for lock to be cleared in db and provide some leeway 
-            // time with setTimeout before triggering storage event
-            setTimeout(
-              () => localStorage.removeItem(`lock-${taskId}`),
-              1500
-            )
-          }).catch(() => null)
-        })
+      } else if (taskBundle || initialBundle &&taskBundle && initialBundle) {
+        await this.unlockTasks(initialBundle, taskBundle)
       }
     }
 
-    setupBundle = bundleId => {
+    unlockTasks = async (initialBundle, taskBundle) => {
+      const tasksToUnlock = initialBundle.taskIds.filter(taskId => !taskBundle.taskIds.includes(taskId))
+      await Promise.all(tasksToUnlock.map(taskId =>
+        this.props.releaseTask(taskId).then(() => {
+          // wait for lock to be cleared in db and provide some leeway 
+          // time with setTimeout before triggering storage event
+          setTimeout(() => localStorage.removeItem(`lock-${taskId}`), 1500)
+        }).catch(console.error)
+      ))
+    }
+
+    setupBundle = async (bundleId) => {
       const { task, workspace, history, fetchTaskBundle } = this.props
-      this.setState({ loading: true })
-      fetchTaskBundle(bundleId, !this.state.bundleEditsDisabled).then(taskBundle => {
-        if(taskBundle) {
+      this.setState({loading: true})
+      try {
+        const taskBundle = await fetchTaskBundle(bundleId, !this.state.bundleEditsDisabled)
+        if (taskBundle) {
           if (!task.isBundlePrimary) {
             const primaryTask = taskBundle.tasks.find(task => task.isBundlePrimary)
             const isMetaReview = history?.location?.pathname?.includes("meta-review")
@@ -161,34 +137,52 @@
             }
           }
         }
-        this.setState({ initialBundle: taskBundle, selectedTasks: taskBundle?.taskIds, taskBundle })
-      })
-      this.setState({ loading: false })
+        this.updateBundlingConditions()
+        this.setState({ 
+          initialBundle: taskBundle, 
+          selectedTasks: taskBundle?.taskIds || [], 
+          taskBundle
+        })
+      } catch (error) {
+        console.error("Error setting up bundle:", error)
+        this.updateBundlingConditions()
+      } finally {
+        this.setState({ loading: false })
+      }
     }
 
-    createTaskBundle = (taskIds, bundleTypeMismatch, name) => {
+    createTaskBundle = async (taskIds, bundleTypeMismatch, name) => {
       this.setState({loading: true})
-      this.props.bundleTasks(this.props.taskId, taskIds, bundleTypeMismatch, name).then(taskBundle => {
-        this.setState({selectedTasks: taskBundle?.taskIds, taskBundle, loading: false})
-      })
+      try {
+        const taskBundle = await this.props.bundleTasks(this.props.taskId, taskIds, bundleTypeMismatch, name)
+        this.setState({
+          selectedTasks: taskBundle?.taskIds || [],
+          taskBundle,
+          loading: false
+        })
+      } catch (error) {
+        console.error("Error creating task bundle:", error)
+        this.setState({loading: false})
+      }
     }
 
-    resetToInitialTaskBundle = (bundleId) => {
+    resetToInitialTaskBundle = async (bundleId) => {
       const { initialBundle, taskBundle } = this.state
-      if(initialBundle && initialBundle !== taskBundle){
+      if (initialBundle && initialBundle !== taskBundle) {
         this.setState({loading: true})
-        this.props.resetTaskBundle(initialBundle).then(taskBundle => {
-          this.setState({selectedTasks: taskBundle?.taskIds, taskBundle, loading: false})
-        })
-      } else if (
-        _isFinite(bundleId) &&
-        _get(this.state, 'taskBundle.bundleId') === bundleId &&
-        (this.props.task.status === 0)
-      ) {
-        // The task id we pass to delete will be left locked, so it needs to be
-        // the current task even if it's not the primary task in the bundle
-        this.props.deleteTaskBundle(bundleId)
-        this.clearActiveTaskBundle()
+        try {
+          const taskBundle = await this.props.resetTaskBundle(initialBundle)
+          this.setState({
+            selectedTasks: taskBundle?.taskIds || [],
+            taskBundle,
+            loading: false
+          })
+        } catch (error) {
+          console.error("Error resetting to initial task bundle:", error)
+          this.setState({loading: false})
+        }
+      } else if (_isFinite(bundleId) && _get(this.state, 'taskBundle.bundleId') === bundleId && this.props.task.status === 0) {
+        await this.clearActiveTaskBundle(bundleId)
       }
     }
 
@@ -199,24 +193,41 @@
     }
 
     removeTaskFromBundle = async (bundleId, taskId) => {
-      const { initialBundle } = this.state
+      const { initialBundle, taskBundle } = this.state
       this.setState({loading: true})
-      if(this.state.taskBundle?.taskIds.length === 2 && !this.state.initialBundle && this.props.task.status === 0) {
-        this.props.deleteTaskBundle(bundleId)
-        this.clearActiveTaskBundle()
+      try {
+        if (taskBundle?.taskIds.length === 2 && !initialBundle && this.props.task.status === 0) {
+          await this.clearActiveTaskBundle(bundleId)
+          this.setState({loading: false})
+          return
+        }
+
+        const updatedTaskBundle = await this.props.removeTaskFromBundle(initialBundle?.taskIds, bundleId, taskId)
+        this.setState({
+          taskBundle: updatedTaskBundle,
+          loading: false
+        })
+      } catch (error) {
+        console.error("Error removing task from bundle:", error)
         this.setState({loading: false})
-        return
       }
-
-      this.props.removeTaskFromBundle(initialBundle?.taskIds, bundleId, taskId).then(taskBundle => {
-        this.setState({taskBundle, loading: false})
-      })
     }
 
-    clearActiveTaskBundle = () => {
-      this.setState({selectedTasks: [], taskBundle: null, loading: false})
-      this.resetSelectedTasks()
-
+    clearActiveTaskBundle = async (bundleId) => {
+      try {
+        const bundleDeleted = await this.props.deleteTaskBundle(bundleId)
+        if (bundleDeleted) {
+          this.setState({
+            selectedTasks: [], 
+            taskBundle: null, 
+            loading: false
+          })
+          this.resetSelectedTasks()
+        }
+      } catch (error) {
+        console.error("Error clearing active task bundle:", error)
+        this.setState({loading: false})
+      }
     }
 
     setCompletingTask = task => {

src/components/HOCs/WithTaskClusterMarkers/WithTaskClusterMarkers.js

@@ -34,14 +34,16 @@
     updateMapMarkers() {
       const markers = _map(this.props.taskClusters, cluster => {
         const cluserStatus = cluster.status ?? cluster.taskStatus
-        const clusterId = cluster.id ?? cluster.taskId
+        const clusterId = cluster.id ?? cluster.taskId 
+        const alreadyBundled = cluster.bundleId && !this.props.taskBundle?.bundleId !== cluster.bundleId
 
         const bundleConflict = Boolean(
-          clusterId &&
+          (clusterId &&
           this.props.task &&
           ![0, 3, 6].includes(cluserStatus) &&
           !this.props.taskBundle?.taskIds?.includes(clusterId) &&
-          !this.props.initialBundle?.taskIds?.includes(clusterId)
+          !this.props.initialBundle?.taskIds?.includes(clusterId)) ||
+          alreadyBundled
         ) 
 
         return AsMappableCluster(cluster).mapMarker(

src/components/InsetMap/InsetMap.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
-import { MapContainer, Marker, AttributionControl } from 'react-leaflet'
+import { MapContainer, Marker, AttributionControl, useMap} from 'react-leaflet'
 import SourcedTileLayer from '../EnhancedMap/SourcedTileLayer/SourcedTileLayer'
 import { layerSourceWithId,
          defaultLayerSource } from '../../services/VisibleLayer/LayerSources'
@@ -13,6 +13,12 @@
     const layerSource =
       layerSourceWithId(this.props.layerSourceId) || defaultLayerSource()
 
+    const ResizeMap = () => {
+      const map = useMap();
+      map.invalidateSize();
+      return null;
+    };
+
     return (
       <div className={classNames("inset-map", this.props.className)}>
         <MapContainer
@@ -25,6 +31,7 @@
           attributionControl={false}
           maxBounds={[[-90, -180], [90, 180]]} 
         >
+          <ResizeMap />
           <AttributionControl position="bottomleft" prefix={false} />
           <SourcedTileLayer source={layerSource} skipAttribution={true} />
           <Marker

src/components/SupplementalMap/SupplementalMap.js

@@ -90,6 +90,12 @@
   )
 }
 
+const ResizeMap = () => {
+  const map = useMap();
+  map.invalidateSize();
+  return null;
+};
+
 const SupplementalMap = (props) => {
   const zoom = _get(props, "task.parent.defaultZoom", DEFAULT_ZOOM)
   const minZoom = _get(props, "task.parent.minZoom", MIN_ZOOM)
@@ -108,6 +114,7 @@
         attributionControl={false}
         maxBounds={[[-90, -180], [90, 180]]} 
       >
+        <ResizeMap />
         <AttributionControl position="bottomleft" prefix={false} />
         <SupplementalMapContent {...props} />
       </MapContainer>