Optimized ProjectStatus component and its usage so that:

1. It does not load ProjectStatus in dropdown enhanced mode which prevent attaching unnecessary dropdown events
2. it does not fire onClickOutside method always even if ProjecStatus is editable and rendered as dropdown. Now it fires only when dropdown is open.

Author: Vikas Agarwal

src/components/ProjectStatus/ProjectStatus.jsx

@@ -11,6 +11,17 @@ export const enhanceDropdown = (CompositeComponent) => class extends Component {
     this.onSelect = this.onSelect.bind(this)
     this.onClickOutside = this.onClickOutside.bind(this)
     this.onClickOtherDropdown = this.onClickOtherDropdown.bind(this)
+    this.refreshEventHandlers = this.refreshEventHandlers.bind(this)
+  }
+
+  refreshEventHandlers() {
+    if (this.state.isOpen) {
+      document.addEventListener('click', this.onClickOutside)
+      document.addEventListener('dropdownClicked', this.onClickOtherDropdown)
+    } else {
+      document.removeEventListener('click', this.onClickOutside)
+      document.removeEventListener('dropdownClicked', this.onClickOtherDropdown)
+    }
   }
 
   handleClick() {
@@ -19,7 +30,9 @@ export const enhanceDropdown = (CompositeComponent) => class extends Component {
 
     document.dispatchEvent(dropdownClicked)
 
-    this.setState({ isOpen: !this.state.isOpen })
+    this.setState({ isOpen: !this.state.isOpen }, ()=> {
+      this.refreshEventHandlers()
+    })
   }
 
   onSelect(value) {
@@ -47,20 +60,26 @@ export const enhanceDropdown = (CompositeComponent) => class extends Component {
     } while (currNode.tagName)
 
     if (!isDropdown) {
-      this.setState({ isOpen: false })
+      this.setState({ isOpen: false }, () => {
+        this.refreshEventHandlers()
+      })
     }
   }
 
   onClickOtherDropdown() {
-    this.setState({ isOpen: false })
+    this.setState({ isOpen: false }, () => {
+      this.refreshEventHandlers()
+    })
   }
 
   componentDidMount() {
     document.removeEventListener('click', this.onClickOutside)
     document.removeEventListener('dropdownClicked', this.onClickOtherDropdown)
 
-    document.addEventListener('click', this.onClickOutside)
-    document.addEventListener('dropdownClicked', this.onClickOtherDropdown)
+    if (this.state.isOpen) {
+      document.addEventListener('click', this.onClickOutside)
+      document.addEventListener('dropdownClicked', this.onClickOtherDropdown)
+    }
   }
 
   componentWillUnmount() {
@@ -126,5 +145,5 @@ ProjectStatus.propTypes = {
 ProjectStatus.defaultProps = {
 }
 
-export default enhanceDropdown(ProjectStatus)
+export default ProjectStatus
 

src/components/ProjectStatus/editableProjectStatus.js

@@ -2,6 +2,7 @@ import React, { Component} from 'react'
 import ProjectStatusChangeConfirmation from './ProjectStatusChangeConfirmation'
 import cn from 'classnames'
 import _ from 'lodash'
+import { enhanceDropdown} from './ProjectStatus'
 import {
   PROJECT_STATUS_COMPLETED,
   PROJECT_STATUS_CANCELLED
@@ -51,10 +52,11 @@ const editableProjectStatus = (CompositeComponent) => class extends Component {
 
   render() {
     const { showStatusChangeDialog, newStatus, statusChangeReason } = this.state
+    const EnhancedProjectStatus = enhanceDropdown(CompositeComponent)
     return (
       <div className={cn('panel', {'modal-active': showStatusChangeDialog})}>
         <div className="modal-overlay"></div>
-        <CompositeComponent
+        <EnhancedProjectStatus
           { ...this.props }
           onSelect={ this.showStatusChangeDialog }
         />

src/projects/list/components/Projects/ProjectCardBody.jsx

@@ -8,8 +8,6 @@ import { PROJECT_STATUS_ACTIVE, PROJECT_ROLE_COPILOT } from '../../../../config/
 import './ProjectCardBody.scss'
 import _ from 'lodash'
 
-const EnhancedProjectStatus = editableProjectStatus(ProjectStatus)
-
 function ProjectCardBody({ project, duration, currentMemberRole, descLinesCount = 8,
   onChangeStatus, isManager }) {
   if (!project) return null
@@ -19,6 +17,8 @@ function ProjectCardBody({ project, duration, currentMemberRole, descLinesCount
 
   const progress = _.get(process, 'percent', 0)
 
+  const EnhancedProjectStatus = canEdit ? editableProjectStatus(ProjectStatus) : ProjectStatus
+
   return (
     <div className="project-card-body">
       <TextTruncate

src/projects/list/components/Projects/ProjectCardBody.scss

@@ -21,6 +21,11 @@
     display: flex;
     justify-content: center;
     margin-top: 20px;
+    padding: 10px 0;
+
+    .panel { // avoid double padding for editable project status
+      padding: 0;
+    }
 
     .status-header {
       .status-label {