Always allow commenting on tasks. Closes #113.

A comment field is now offered to users regardless of the task status, whereas before it was only offered if the task was able to progress to a new status.
maproulette · Feb 26, 2018 · 9d609a5 · 9d609a5
1 parent cecadce
commit 9d609a5
Show file tree

Hide file tree

Showing 10 changed files with 552 additions and 34 deletions.
diff --git a/src/components/HOCs/WithCurrentTask/WithCurrentTask.js b/src/components/HOCs/WithCurrentTask/WithCurrentTask.js
@@ -128,15 +128,20 @@ export const mapDispatchToProps = (dispatch, ownProps) => {
      * Move to the next task without setting any completion status,
      * useful for when a user visits a task that is already complete.
      */
-    nextTask: (challengeId, taskId, taskLoadBy) =>
+    nextTask: (challengeId, taskId, taskLoadBy, comment) => {
+      if (_isString(comment) && comment.length > 0) {
+        dispatch(addTaskComment(taskId, comment))
+      }
+
       dispatch(
         loadRandomTaskFromChallenge(
           challengeId,
           taskLoadBy === TaskLoadMethod.proximity ? taskId : undefined
         )
       ).then(newTask =>
         visitNewTask(challengeId, taskId, newTask, ownProps.history)
-      ),
+      )
+    },
   }
 }
 

diff --git a/src/components/TaskPane/ActiveTaskDetails/ActiveTaskControls/ActiveTaskControls.js b/src/components/TaskPane/ActiveTaskDetails/ActiveTaskControls/ActiveTaskControls.js
@@ -53,6 +53,10 @@ export class ActiveTaskControls extends Component {
                             taskStatus, this.state.comment, this.props.taskLoadBy)
   }
 
+  next = (challengeId, taskId) => {
+    this.props.nextTask(challengeId, taskId, this.props.taskLoadBy, this.state.comment)
+  }
+
   render() {
     // If the user is not logged in, show a sign-in button instead of controls.
     if (!_get(this.props, 'user.isLoggedIn')) {
@@ -84,8 +88,6 @@ export class ActiveTaskControls extends Component {
       const allowedProgressions =
         allowedStatusProgressions(this.props.task.status)
 
-      const canProgress = allowedProgressions.size > 0
-
       const hasExistingStatus = _isNumber(this.props.task.status) &&
                                 this.props.task.status !== TaskStatus.created
 
@@ -95,22 +97,22 @@ export class ActiveTaskControls extends Component {
           <TaskTrackControls className="active-task-controls__track-task"
                              {..._omit(this.props, 'className')} />
 
-          {canProgress &&
-           <TaskCommentInput className="active-task-controls__task-comment"
-                             value={this.state.comment}
-                             commentChanged={this.setComment}
-                             {..._omit(this.props, 'className')} />
-          }
+          <TaskCommentInput className="active-task-controls__task-comment"
+                            value={this.state.comment}
+                            commentChanged={this.setComment}
+                            {..._omit(this.props, 'className')} />
 
           {!isEditingTask &&
            <TaskCompletionStep1 allowedProgressions={allowedProgressions}
                                 pickEditor={this.pickEditor}
                                 complete={this.complete}
-                                {...this.props} />
+                                nextTask={this.next}
+                                {..._omit(this.props, 'nextTask')} />
           }
 
           {!isEditingTask && hasExistingStatus &&
-           <TaskNextControl {...this.props} />
+           <TaskNextControl nextTask={this.next}
+                            {..._omit(this.props, 'nextTask')} />
           }
 
           {isEditingTask &&

diff --git a/src/components/TaskPane/ActiveTaskDetails/ActiveTaskControls/ActiveTaskControls.scss b/src/components/TaskPane/ActiveTaskDetails/ActiveTaskControls/ActiveTaskControls.scss
@@ -5,6 +5,9 @@
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
+    margin-top: 10px;
+    margin-bottom: 10px;
+
 
     button.button.large-and-wide {
       margin-bottom: 10px;
@@ -32,7 +35,6 @@
 
   &__task-comment {
     width: 100%;
-    margin-bottom: 20px;
 
     input {
       width: 100%;

diff --git a/src/components/TaskPane/ActiveTaskDetails/ActiveTaskControls/ActiveTaskControls.test.js b/src/components/TaskPane/ActiveTaskDetails/ActiveTaskControls/ActiveTaskControls.test.js
@@ -86,35 +86,35 @@ test("shows track/untrack controls", () => {
   expect(wrapper).toMatchSnapshot()
 })
 
-test("shows a completion comment field if status is appropriate", () => {
+test("shows a completion comment field", () => {
   const wrapper = shallow(
     <ActiveTaskControls {...basicProps} />
   )
 
   expect(wrapper.find('TaskCommentInput').exists()).toBe(true)
 })
 
-test("the comment field contains the current comment", () => {
+test("shows a comment field even for tasks that cannot progress further", () => {
+  basicProps.task.status = TaskStatus.fixed
+
   const wrapper = shallow(
     <ActiveTaskControls {...basicProps} />
   )
 
-  wrapper.instance().setComment("Foo")
-  wrapper.update()
+  expect(wrapper.find('TaskCommentInput').exists()).toBe(true)
 
-  expect(wrapper.find('TaskCommentInput[value="Foo"]').exists()).toBe(true)
+  expect(wrapper).toMatchSnapshot()
 })
 
-test("does not show comment field if task cannot progress to new status", () => {
-  basicProps.task.status = TaskStatus.fixed
-
+test("the comment field contains the current comment", () => {
   const wrapper = shallow(
     <ActiveTaskControls {...basicProps} />
   )
 
-  expect(wrapper.find('TaskCommentInput').exists()).toBe(false)
+  wrapper.instance().setComment("Foo")
+  wrapper.update()
 
-  expect(wrapper).toMatchSnapshot()
+  expect(wrapper.find('TaskCommentInput[value="Foo"]').exists()).toBe(true)
 })
 
 test("shows completion controls if the user has begun editing the task", () => {

diff --git a/...ents/TaskPane/ActiveTaskDetails/ActiveTaskControls/TaskCommentInput/TaskCommentInput.scss b/...ents/TaskPane/ActiveTaskDetails/ActiveTaskControls/TaskCommentInput/TaskCommentInput.scss
@@ -2,7 +2,6 @@
 
 .task-completion-comment {
   width: 100%;
-  margin-bottom: 10px;
 
   input {
     width: 100%;

diff --git a/...onents/TaskPane/ActiveTaskDetails/ActiveTaskControls/TaskNextControl/TaskNextControl.scss b/...onents/TaskPane/ActiveTaskDetails/ActiveTaskControls/TaskNextControl/TaskNextControl.scss
@@ -1,8 +1,8 @@
 @import '../../../../../variables.scss';
 
 .active-task-details .next-control {
-  margin-top: 15px;
-  margin-bottom: 0px;
+  margin-top: 5px;
+  margin-bottom: 10px;
 
   svg {
     height: 18px;

diff --git a/...ents/TaskPane/ActiveTaskDetails/ActiveTaskControls/TaskTrackControls/TaskTrackControls.js b/...ents/TaskPane/ActiveTaskDetails/ActiveTaskControls/TaskTrackControls/TaskTrackControls.js
@@ -64,6 +64,7 @@ export default class TaskTrackControls extends Component {
       control = (
         <div className="field" onClick={this.toggleSaved}>
           <input type="checkbox" className="switch is-thin"
+                 onChange={() => {}}
                  checked={this.taskIsTracked()} />
           <label>
             <FormattedMessage {...messages.trackLabel } />

diff --git a/...Details/ActiveTaskControls/TaskTrackControls/__snapshots__/TaskTrackControls.test.js.snap b/...Details/ActiveTaskControls/TaskTrackControls/__snapshots__/TaskTrackControls.test.js.snap
@@ -52,6 +52,7 @@ ShallowWrapper {
         <input
                 checked={true}
                 className="switch is-thin"
+                onChange={[Function]}
                 type="checkbox"
         />
         <label>
@@ -74,6 +75,7 @@ ShallowWrapper {
           <input
             checked={true}
             className="switch is-thin"
+            onChange={[Function]}
             type="checkbox"
 />,
           <label>
@@ -96,6 +98,7 @@ ShallowWrapper {
           "props": Object {
             "checked": true,
             "className": "switch is-thin",
+            "onChange": [Function],
             "type": "checkbox",
           },
           "ref": null,
@@ -147,6 +150,7 @@ ShallowWrapper {
           <input
                     checked={true}
                     className="switch is-thin"
+                    onChange={[Function]}
                     type="checkbox"
           />
           <label>
@@ -169,6 +173,7 @@ ShallowWrapper {
             <input
               checked={true}
               className="switch is-thin"
+              onChange={[Function]}
               type="checkbox"
 />,
             <label>
@@ -191,6 +196,7 @@ ShallowWrapper {
             "props": Object {
               "checked": true,
               "className": "switch is-thin",
+              "onChange": [Function],
               "type": "checkbox",
             },
             "ref": null,
@@ -288,6 +294,7 @@ ShallowWrapper {
         <input
                 checked={false}
                 className="switch is-thin"
+                onChange={[Function]}
                 type="checkbox"
         />
         <label>
@@ -310,6 +317,7 @@ ShallowWrapper {
           <input
             checked={false}
             className="switch is-thin"
+            onChange={[Function]}
             type="checkbox"
 />,
           <label>
@@ -332,6 +340,7 @@ ShallowWrapper {
           "props": Object {
             "checked": false,
             "className": "switch is-thin",
+            "onChange": [Function],
             "type": "checkbox",
           },
           "ref": null,
@@ -383,6 +392,7 @@ ShallowWrapper {
           <input
                     checked={false}
                     className="switch is-thin"
+                    onChange={[Function]}
                     type="checkbox"
           />
           <label>
@@ -405,6 +415,7 @@ ShallowWrapper {
             <input
               checked={false}
               className="switch is-thin"
+              onChange={[Function]}
               type="checkbox"
 />,
             <label>
@@ -427,6 +438,7 @@ ShallowWrapper {
             "props": Object {
               "checked": false,
               "className": "switch is-thin",
+              "onChange": [Function],
               "type": "checkbox",
             },
             "ref": null,