Add confetti on task status change to done

package.json

@@ -10,6 +10,7 @@
     "react-bootstrap": "^0.31.3",
     "react-datepicker": "^0.56.0",
     "react-dom": "^15.6.1",
+    "react-dom-confetti": "0.0.10",
     "react-icons": "^2.2.7",
     "react-markdown": "^2.5.0",
     "react-redux": "^5.0.6",

src/actions/index.js

@@ -369,3 +369,8 @@ export const setTaskListAssignee = taskList => ({
   type: 'TASK_LIST_SET_ASSIGNEE',
   payload: patchTaskListReq(taskList),
 });
+
+export const setTaskCelebrated = taskGid => ({
+  type: 'PATCH_TASK_CELEBRATED',
+  taskGid
+});

src/components/Content/Content.css

@@ -6,6 +6,7 @@
   border-bottom-left-radius: 5px;
   border: 1px solid #6d6d6d;
   border-right: none;
+  overflow-x: hidden;
 }
 
 @media (max-width: 1279px) {

src/components/Content/RightPanel/TaskDetails/TaskDetailsTopbar.js

@@ -9,6 +9,15 @@ import TaskOptions from './TaskOptions/TaskOptions';
 
 import './TaskDetailsTopbar.css';
 
+// task details use the modified horizontal, narrow-spread confetti
+const confettiConfig = {
+  angle: 40,
+  spread: 90,
+  startVelocity: 55,
+  elementCount: 65,
+  decay: 0.84
+};
+
 class TaskDetailsTopbar extends Component {
 
   showAssignee = () => {
@@ -62,6 +71,8 @@ class TaskDetailsTopbar extends Component {
             gid={task.gid}
             status={task.status}
             patchTask={this.props.patchTask}
+            showCelebration={task.celebration === 'show'}
+            confettiConfig={confettiConfig}
           />
           <div className="assigned-to-ctn">
             <TaskAssigner

src/components/Content/TaskHierarchy/Task/Task.js

@@ -23,6 +23,15 @@ import {
   patchTask
 } from '../../../../actions';
 
+// task list uses the default vertical/wide spread confetti
+const confettiConfig = {
+  angle: 80,
+  spread: 148,
+  startVelocity: 77,
+  elementCount: 167,
+  decay: 0.84
+};
+
 class RawTask extends Component {
   constructor(props) {
     super(props);
@@ -230,6 +239,8 @@ class RawTask extends Component {
                 gid={task.gid}
                 status={task.status}
                 patchTask={this.props.patchTask}
+                showCelebration={task.celebration === 'show' && !rightPanel.show}
+                confettiConfig={confettiConfig}
               />
             )}
             <div className="task-assigned-to hide-small">

src/components/Content/TaskStatus/TaskStatus.js

@@ -1,9 +1,11 @@
 import React, { Component } from 'react';
+import { connect } from 'react-redux';
 import { DropdownButton, MenuItem } from 'react-bootstrap';
 import TiPencil from 'react-icons/lib/ti/pencil';
+import Confetti from 'react-dom-confetti';
+import { setTaskCelebrated } from '../../../actions';
 import './TaskStatus.css';
 
-
 const VALID_STATUSES = [
   'New',
   'Started',
@@ -47,10 +49,18 @@ class TaskStatus extends Component {
     patchTask({ gid, status });
   }
 
+  componentDidUpdate = () => {
+    // prevent showing multiple celebrations for single task completion 
+    // (when switching sidebar tasks for example)
+    const { showCelebration, gid } = this.props;
+    if (showCelebration) this.props.setTaskCelebrated(gid);
+  }
+
   render() {
-    const { status } = this.props;
+    const { status, showCelebration, confettiConfig } = this.props;
     return (
       <div className={"task-status-ctn task-status-" + status + " hide-small"}>
+        <Confetti active={showCelebration} config={confettiConfig}/>
         <DropdownButton
           id="task-status-dropdown"
           title={this.getCurrentStatus()}
@@ -66,4 +76,4 @@ class TaskStatus extends Component {
   }
 }
 
-export default TaskStatus;
+export default connect(() => ({}), { setTaskCelebrated })(TaskStatus);

src/reducers/tasksReducer.js

@@ -101,6 +101,14 @@ export default function(state = initialState, action) {
                                        // .subtaskform_id, etc
         ...t
       };
+      const prevTaskState = state.taskMap[patchedTask.gid];
+
+      if (prevTaskState.status !== 'Done' && patchedTask.status === 'Done') {
+        patchedTask.celebration = 'show';
+      } else {
+        patchedTask.celebration = 'hide';
+      }
+
       return Object.assign({}, state, {
         taskMap: Object.assign({}, state.taskMap, {
           [patchedTask.gid]: patchedTask
@@ -176,6 +184,17 @@ export default function(state = initialState, action) {
       });
     }
 
+    case 'PATCH_TASK_CELEBRATED': {
+      const patchedTask = state.taskMap[action.taskGid];
+      patchedTask.celebration = 'hide';
+
+      return Object.assign({}, state, {
+        taskMap: Object.assign({}, state.taskMap, {
+          [patchedTask.gid]: patchedTask
+        })
+      });
+    }
+
     default:
       return state;
   }