Merge branch 'feature/project-listing-updates' into feature/project-listing-updates#1268

Author: Sachin Maheshwari

npm-shrinkwrap.json

@@ -86,6 +86,7 @@
     "react-datetime": "2.7.1",
     "react-dom": "^15.6.1",
     "react-dotdotdot": "^1.0.4",
+    "react-infinite-scroller": "^1.1.1",
     "react-layout-pane": "^0.1.16",
     "react-modal": "^1.9.7",
     "react-redux": "^4.4.5",

package.json

@@ -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/ProjectStatus.jsx

@@ -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/components/ProjectStatus/editableProjectStatus.js

@@ -148,7 +148,7 @@ class ProjectsToolBar extends Component {
         target: '_blank'
       }
     ]
-    const menuBar = !isPowerUser && <MenuBar mobileBreakPoint={767} items={primaryNavigationItems} orientation="horizontal" forReactRouter />
+    const menuBar = !!isLoggedIn && !isPowerUser && <MenuBar mobileBreakPoint={767} items={primaryNavigationItems} orientation="horizontal" forReactRouter />
 
     return (
       <div className="ProjectsToolBar">