add disable button changes

Author: CollinBeczak

src/components/Button/Button.jsx

@@ -1,20 +1,26 @@
+import React from "react";
 import classNames from "classnames";
 import PropTypes from "prop-types";
-import { Component } from "react";
 
-class Button extends Component {
-  render() {
-    return (
-      <button {...this.props} className={classNames("mr-button", this.props.className)}>
-        {this.props.children}
-      </button>
-    );
-  }
+/**
+ * Basic button component that includes proper styling for disabled state
+ */
+export default function Button({ className, disabled = false, children, ...otherProps }) {
+  return (
+    <button
+      className={classNames("mr-button", className, {
+        "mr-opacity-50 mr-cursor-not-allowed": disabled,
+      })}
+      disabled={disabled}
+      {...otherProps}
+    >
+      {children}
+    </button>
+  );
 }
 
 Button.propTypes = {
   className: PropTypes.string,
   children: PropTypes.node.isRequired,
+  disabled: PropTypes.bool,
 };
-
-export default Button;

src/components/HOCs/WithChallengeTaskClusters/WithChallengeTaskClusters.jsx

@@ -79,7 +79,8 @@ export const WithChallengeTaskClusters = function (
       const showAsClusters =
         ((this.props.criteria?.zoom ?? 0) < MAX_ZOOM &&
           (wantToShowAsClusters || this.state.taskCount > UNCLUSTER_THRESHOLD)) ||
-        !this.props.criteria.boundingBox;
+        !this.props.criteria.boundingBox ||
+        (!this.props.createTaskBundle && this.state.taskCount > UNCLUSTER_THRESHOLD);
 
       const currentFetchId = _uniqueId();
 

src/components/HOCs/WithCurrentTask/WithCurrentTask.jsx

@@ -39,6 +39,7 @@ import { TaskLoadMethod } from "../../../services/Task/TaskLoadMethod/TaskLoadMe
 import { fetchTaskForReview } from "../../../services/Task/TaskReview/TaskReview";
 import { fetchUser } from "../../../services/User/User";
 import { renewVirtualChallenge } from "../../../services/VirtualChallenge/VirtualChallenge";
+import { waitFor } from "@testing-library/react";
 
 const CHALLENGE_STALE = 300000; // 5 minutes
 const PROJECT_STALE = 300000; // 5 minutes
@@ -165,7 +166,7 @@ export const mapDispatchToProps = (dispatch, ownProps) => {
     /**
      * Invoke to mark a task as complete with the given status
      */
-    completeTask: (
+    completeTask: async (
       task,
       challengeId,
       taskStatus,
@@ -183,77 +184,79 @@ export const mapDispatchToProps = (dispatch, ownProps) => {
       const taskId = task.id;
 
       // Work to be done after the status is set
-      const doAfter = () => {
-        if (_isString(comment) && comment.length > 0) {
-          if (taskBundle) {
-            dispatch(
-              addTaskBundleComment(
-                taskBundle.bundleId,
-                AsMappableBundle(taskBundle).primaryTaskId() || taskId,
-                comment,
-                taskStatus,
-              ),
-            );
-          } else {
-            dispatch(addTaskComment(taskId, comment, taskStatus));
+      const doAfter = () =>
+        new Promise(async (resolve) => {
+          if (_isString(comment) && comment.length > 0) {
+            if (taskBundle) {
+              await dispatch(
+                addTaskBundleComment(
+                  taskBundle.bundleId,
+                  AsMappableBundle(taskBundle).primaryTaskId() || taskId,
+                  comment,
+                  taskStatus,
+                ),
+              );
+            } else {
+              await dispatch(addTaskComment(taskId, comment, taskStatus));
+            }
           }
-        }
 
-        // Update the user in the background to get their latest score
-        setTimeout(() => dispatch(fetchUser(userId)), 100);
+          // Update the user in the background to get their latest score
+          await dispatch(fetchUser(userId));
 
-        // Updating the challenge actions will allow us to show more accurate
-        // completion progress, but this can be done in the background
-        setTimeout(() => dispatch(fetchChallengeActions(challengeId)), 500);
+          // Updating the challenge actions will allow us to show more accurate
+          // completion progress
+          await dispatch(fetchChallengeActions(challengeId));
 
-        // If working on a virtual challenge, renew it (extend its expiration)
-        // since we've seen some activity, but this can be done in the
-        // background
-        if (_isFinite(ownProps.virtualChallengeId)) {
-          setTimeout(() => dispatch(renewVirtualChallenge(ownProps.virtualChallengeId)), 1000);
-        }
+          // If working on a virtual challenge, renew it (extend its expiration)
+          if (_isFinite(ownProps.virtualChallengeId)) {
+            await dispatch(renewVirtualChallenge(ownProps.virtualChallengeId));
+          }
 
-        if (taskLoadBy) {
-          // Start loading the next task from the challenge.
-          const loadNextTask = _isFinite(requestedNextTask)
-            ? nextRequestedTask(dispatch, ownProps, requestedNextTask)
-            : nextRandomTask(dispatch, ownProps, taskId, taskLoadBy);
+          if (taskLoadBy) {
+            // Start loading the next task from the challenge.
+            const loadNextTask = _isFinite(requestedNextTask)
+              ? await nextRequestedTask(dispatch, ownProps, requestedNextTask)
+              : await nextRandomTask(dispatch, ownProps, taskId, taskLoadBy);
 
-          return loadNextTask
-            .then((newTask) => visitNewTask(dispatch, ownProps, taskId, newTask))
-            .catch(() => {
+            try {
+              await visitNewTask(dispatch, ownProps, taskId, loadNextTask);
+            } catch (error) {
               ownProps.history.push(`/browse/challenges/${challengeId}`);
-            });
-        }
-      };
+            }
+          }
+          resolve();
+        });
 
       let cooperativeWorkSummary = null;
       if (AsCooperativeWork(task).isTagType()) {
         cooperativeWorkSummary = AsCooperativeWork(task).tagChangeSummary(tagEdits);
       }
 
-      return dispatch(
-        taskBundle
-          ? completeTaskBundle(
-              taskBundle.bundleId,
-              AsMappableBundle(taskBundle).primaryTaskId() || taskId,
-              taskStatus,
-              needsReview,
-              tags,
-              cooperativeWorkSummary,
-              osmComment,
-              completionResponses,
-            )
-          : completeTask(
-              taskId,
-              taskStatus,
-              needsReview,
-              tags,
-              cooperativeWorkSummary,
-              osmComment,
-              completionResponses,
-            ),
-      ).then(() => doAfter());
+      const completeAction = taskBundle
+        ? await completeTaskBundle(
+            taskBundle.bundleId,
+            AsMappableBundle(taskBundle).primaryTaskId() || taskId,
+            taskStatus,
+            needsReview,
+            tags,
+            cooperativeWorkSummary,
+            osmComment,
+            completionResponses,
+          )
+        : await completeTask(
+            taskId,
+            taskStatus,
+            needsReview,
+            tags,
+            cooperativeWorkSummary,
+            osmComment,
+            completionResponses,
+          );
+
+      await dispatch(completeAction);
+      const afterResult = await doAfter();
+      return afterResult;
     },
 
     /**
@@ -393,16 +396,25 @@ export const visitNewTask = function (dispatch, props, currentTaskId, newTask) {
     // If challenge is complete, redirect home with note to congratulate user
     if (_isFinite(props.virtualChallengeId)) {
       // We don't get a status for virtual challenges, so just assume we're done
-      props.history.push("/browse/challenges", { congratulate: true, warn: false });
+      props.history.push("/browse/challenges", {
+        congratulate: true,
+        warn: false,
+      });
       return Promise.resolve();
     } else {
       const challengeId = challengeIdFromRoute(props, props.challengeId);
       return dispatch(fetchChallenge(challengeId)).then((normalizedResults) => {
         const challenge = normalizedResults.entities.challenges[normalizedResults.result];
         if (challenge.status === CHALLENGE_STATUS_FINISHED) {
-          props.history.push("/browse/challenges", { congratulate: true, warn: false });
+          props.history.push("/browse/challenges", {
+            congratulate: true,
+            warn: false,
+          });
         } else {
-          props.history.push("/browse/challenges", { warn: true, congratulate: false });
+          props.history.push("/browse/challenges", {
+            warn: true,
+            congratulate: false,
+          });
         }
       });
     }

src/components/TaskClusterMap/TaskClusterMap.jsx

@@ -62,66 +62,6 @@ export const TaskClusterMap = (props) => {
   const [currentBounds, setCurrentBounds] = useState(null);
   const [searchOpen, setSearchOpen] = useState(false);
   const [currentZoom, setCurrentZoom] = useState();
-  const prevProps = useRef({
-    showAsClusters: props.showAsClusters,
-    loading: props.loading,
-  });
-  const timerHandle = useRef(null);
-  const [displayTaskCount, setDisplayTaskCount] = useState(false);
-
-  useEffect(() => {
-    // Check condition for toggling showAsClusters
-    if (
-      !props.showAsClusters &&
-      props.totalTaskCount > UNCLUSTER_THRESHOLD &&
-      !props.createTaskBundle
-    ) {
-      props.toggleShowAsClusters();
-    } else if (
-      props.showAsClusters &&
-      props.totalTaskCount <= UNCLUSTER_THRESHOLD &&
-      props.createTaskBundle
-    ) {
-      props.toggleShowAsClusters();
-    }
-
-    // Handle loading state changes
-    if (!props.loading && prevProps.current.loading) {
-      // No longer loading. Kick off timer to hide task count message
-      if (timerHandle.current) {
-        clearTimeout(timerHandle.current);
-      }
-      timerHandle.current = setTimeout(() => {
-        setDisplayTaskCount(false);
-      }, 3000);
-      setDisplayTaskCount(true);
-    } else if (props.loading && displayTaskCount) {
-      setDisplayTaskCount(false);
-      if (timerHandle.current) {
-        clearTimeout(timerHandle.current);
-        timerHandle.current = null;
-      }
-    }
-
-    // Update previous props
-    prevProps.current = {
-      showAsClusters: props.showAsClusters,
-      loading: props.loading,
-    };
-
-    // Clean up timer on component unmount
-    return () => {
-      if (timerHandle.current) {
-        clearTimeout(timerHandle.current);
-      }
-    };
-  }, [
-    props.showAsClusters,
-    props.totalTaskCount,
-    props.toggleShowAsClusters,
-    props.loading,
-    displayTaskCount,
-  ]);
 
   let overlayLayers = buildLayerSources(
     props.visibleOverlays,
@@ -343,7 +283,7 @@ export const TaskClusterMap = (props) => {
             </div>
           </div>
         )}
-      {displayTaskCount && !props.mapZoomedOut && (
+      {props.displayTaskCount && !props.mapZoomedOut && (
         <div className="mr-absolute mr-top-0 mr-mt-3 mr-z-5 mr-w-full mr-flex mr-justify-center">
           <div className="mr-flex-col mr-items-center mr-bg-black-40 mr-text-white mr-rounded">
             <div className="mr-py-2 mr-px-3 mr-text-center">