prevent double bundle modification

maproulette · Feb 19, 2025 · 7103906 · 7103906
1 parent 8671669
commit 7103906
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 14 deletions.
diff --git a/src/components/TaskClusterMap/MapMarkers.jsx b/src/components/TaskClusterMap/MapMarkers.jsx
@@ -93,16 +93,26 @@ const Markers = (props) => {
   }, []);
 
   useEffect(() => {
+    const isInitialLoad = props.taskMarkers && mapMarkers.length === 0;
+    const isMapLoadDelayed = props.delayMapLoad;
+    const hasBundleFilterChanged = props.bundledOnly !== prevProps.current.bundledOnly;
+    const haveTaskMarkersChanged = !_isEqual(props.taskMarkers, prevProps.current.taskMarkers);
+    const hasTaskBundleChanged = !_isEqual(props.taskBundle, prevProps.current.taskBundle);
+    const haveSelectedClustersChanged =
+      props.selectedClusters !== prevProps.current.selectedClusters;
+    const hasSpideredStateChanged = !_isEqual(spidered, prevProps.current.spidered);
+
     if (
-      (props.taskMarkers && mapMarkers.length === 0) ||
-      props.delayMapLoad ||
-      props.bundledOnly !== prevProps.current.bundledOnly ||
-      !_isEqual(props.taskMarkers, prevProps.current.taskMarkers) ||
-      props.selectedClusters !== prevProps.current.selectedClusters
+      isInitialLoad ||
+      isMapLoadDelayed ||
+      hasBundleFilterChanged ||
+      haveTaskMarkersChanged ||
+      hasTaskBundleChanged ||
+      haveSelectedClustersChanged
     ) {
       refreshSpidered();
       generateMarkers();
-    } else if (!_isEqual(spidered, prevProps.current.spidered)) {
+    } else if (hasSpideredStateChanged) {
       generateMarkers();
     }
     prevProps.current = { ...props, spidered: spidered };

diff --git a/src/components/Widgets/TaskBundleWidget/TaskMarkerContent.jsx b/src/components/Widgets/TaskBundleWidget/TaskMarkerContent.jsx
@@ -10,10 +10,26 @@ import messages from "./Messages";
  * The content to show in the popup when a task marker is clicked.
  */
 class TaskMarkerContent extends Component {
+  state = {
+    isProcessing: false,
+  };
+
   toggleSelection = () => {
     this.props.toggleTaskSelection(this.props.marker.options);
   };
 
+  handleBundleTask = async () => {
+    this.setState({ isProcessing: true });
+    await this.props.bundleTask(this.props.marker.options);
+    this.setState({ isProcessing: false });
+  };
+
+  handleUnbundleTask = async () => {
+    this.setState({ isProcessing: true });
+    await this.props.unbundleTask(this.props.marker.options);
+    this.setState({ isProcessing: false });
+  };
+
   render() {
     const selected = this.props.isTaskSelected(this.props.marker.options.taskId);
     const taskId = this.props.marker.options.taskId ?? this.props.marker.options.id;
@@ -133,25 +149,33 @@ class TaskMarkerContent extends Component {
                     <FormattedMessage {...messages.cannotEditPrimaryTask} />
                   ) : this.props.bundling && bundle.includes(taskId) ? (
                     <button
-                      disabled={this.props.bundleEditsDisabled}
-                      onClick={() => this.props.unbundleTask(this.props.marker.options)}
+                      disabled={this.props.bundleEditsDisabled || this.state.isProcessing}
+                      onClick={this.handleUnbundleTask}
                       className="mr-text-red mr-border-solid mr-border mr-border-red mr-px-2 mr-mb-1"
                       style={{
-                        cursor: this.props.bundleEditsDisabled ? "default" : "pointer",
-                        opacity: this.props.bundleEditsDisabled ? 0.3 : 1,
+                        cursor:
+                          this.props.bundleEditsDisabled || this.state.isProcessing
+                            ? "default"
+                            : "pointer",
+                        opacity:
+                          this.props.bundleEditsDisabled || this.state.isProcessing ? 0.3 : 1,
                       }}
                     >
                       <FormattedMessage {...messages.removeFromBundle} />
                     </button>
                   ) : (
                     !alreadyBundled && (
                       <button
-                        disabled={this.props.bundleEditsDisabled}
-                        onClick={() => this.props.bundleTask(this.props.marker.options)}
+                        disabled={this.props.bundleEditsDisabled || this.state.isProcessing}
+                        onClick={this.handleBundleTask}
                         className="mr-text-green mr-border-solid mr-border mr-border-green mr-px-2 mr-mb-1"
                         style={{
-                          cursor: this.props.bundleEditsDisabled ? "default" : "pointer",
-                          opacity: this.props.bundleEditsDisabled ? 0.3 : 1,
+                          cursor:
+                            this.props.bundleEditsDisabled || this.state.isProcessing
+                              ? "default"
+                              : "pointer",
+                          opacity:
+                            this.props.bundleEditsDisabled || this.state.isProcessing ? 0.3 : 1,
                         }}
                       >
                         <FormattedMessage {...messages.addToBundle} />