fix(): Using immutability helper to manage state for within BoardCont…

…ainer
rcdexta · Jul 10, 2017 · c4865f8 · c4865f8
1 parent 23111e9
commit c4865f8
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 34 deletions.
diff --git a/package.json b/package.json
@@ -82,6 +82,7 @@
   },
   "dependencies": {
     "@kadira/storybook-deployer": "^1.0.0",
+    "immutability-helper": "^2.2.3",
     "invariant": "^2.0.0",
     "lodash.flow": "^3.5.0",
     "react": "^15.4.2",

diff --git a/src/components/BoardContainer.js b/src/components/BoardContainer.js
@@ -1,27 +1,27 @@
-import React, {Component, PropTypes} from 'react'
-import {BoardDiv} from '../styles/Base'
-import {bindActionCreators} from 'redux'
-import {connect} from 'react-redux'
-import {DragDropContext} from 'react-dnd'
+import React, { Component, PropTypes } from 'react'
+import { BoardDiv } from '../styles/Base'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { DragDropContext } from 'react-dnd'
 import MultiBackend from 'react-dnd-multi-backend'
+import update from 'immutability-helper'
 import HTML5toTouch from 'react-dnd-multi-backend/lib/HTML5toTouch'
 import Lane from './Lane'
 
 const boardActions = require('../actions/BoardActions')
 const laneActions = require('../actions/LaneActions')
 
 class BoardContainer extends Component {
-
-  state = {data: this.props.data}
+  state = { data: this.props.data }
 
   wireEventBus = () => {
     let eventBus = {
-      publish: (event) => {
+      publish: event => {
         switch (event.type) {
           case 'ADD_CARD':
-            return this.props.actions.addCard({laneId: event.laneId, card: event.card})
+            return this.props.actions.addCard({ laneId: event.laneId, card: event.card })
           case 'REMOVE_CARD':
-            return this.props.actions.removeCard({laneId: event.laneId, cardId: event.cardId})
+            return this.props.actions.removeCard({ laneId: event.laneId, cardId: event.cardId })
           case 'REFRESH_BOARD':
             return this.props.actions.loadBoard(event.data)
         }
@@ -30,36 +30,40 @@ class BoardContainer extends Component {
     this.props.eventBusHandle(eventBus)
   }
 
-  componentWillMount () {
+  componentWillMount() {
     this.props.actions.loadBoard(this.props.data)
     if (this.props.eventBusHandle) {
       this.wireEventBus()
     }
   }
 
-  componentWillReceiveProps (nextProps) {
-    if (nextProps.data.lanes) {
-      const dataToUpdate = this.state.data
-      dataToUpdate.lanes = nextProps.data.lanes
-      this.setState({data: dataToUpdate})
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.lanes) {
+      const newData = update(this.state.data, { lanes: { $set: nextProps.lanes } })
+
+      this.setState({ data: newData })
       this.props.onDataChange && this.props.onDataChange(nextProps.data)
     }
   }
 
-  render () {
-    const {data} = this.state
-    return <BoardDiv>
-      {
-        data.lanes.map((lane) => {
-          const {id, ...otherProps} = lane
-          const {tagStyle, draggable, handleDragStart, handleDragEnd, onCardClick, onLaneScroll, laneSortFunction} = this.props
-          return <Lane key={`${id}`}
-            id={id}
-            {...otherProps}
-            {...{tagStyle, draggable, handleDragStart, handleDragEnd, onCardClick, onLaneScroll, laneSortFunction}}
-          />
+  render() {
+    const { data } = this.state
+    return (
+      <BoardDiv>
+        {data.lanes.map(lane => {
+          const { id, ...otherProps } = lane
+          const { tagStyle, draggable, handleDragStart, handleDragEnd, onCardClick, onLaneScroll, laneSortFunction } = this.props
+          return (
+            <Lane
+              key={`${id}`}
+              id={id}
+              {...otherProps}
+              {...{ tagStyle, draggable, handleDragStart, handleDragEnd, onCardClick, onLaneScroll, laneSortFunction }}
+            />
+          )
         })}
-    </BoardDiv>
+      </BoardDiv>
+    )
   }
 }
 
@@ -75,10 +79,10 @@ BoardContainer.propTypes = {
   onDataChange: PropTypes.func
 }
 
-const mapStateToProps = (state) => {
-  return state.lanes ? {data: state} : {}
+const mapStateToProps = state => {
+  return state.lanes ? { lanes: state.lanes } : {}
 }
 
-const mapDispatchToProps = (dispatch) => ({actions: bindActionCreators({...boardActions, ...laneActions}, dispatch)})
+const mapDispatchToProps = dispatch => ({ actions: bindActionCreators({ ...boardActions, ...laneActions }, dispatch) })
 
 export default connect(mapStateToProps, mapDispatchToProps)(DragDropContext(MultiBackend(HTML5toTouch))(BoardContainer))
diff --git a/yarn.lock b/yarn.lock
@@ -2786,7 +2786,7 @@ fb-watchman@^1.8.0, fb-watchman@^1.9.0:
   dependencies:
     bser "1.0.2"
 
-fbjs@^0.8.1, fbjs@^0.8.4, fbjs@^0.8.5, fbjs@^0.8.7, fbjs@^0.8.8:
+fbjs@^0.8.1, fbjs@^0.8.4, fbjs@^0.8.7:
   version "0.8.8"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.8.tgz#02f1b6e0ea0d46c24e0b51a2d24df069563a5ad6"
   dependencies:
@@ -2798,7 +2798,7 @@ fbjs@^0.8.1, fbjs@^0.8.4, fbjs@^0.8.5, fbjs@^0.8.7, fbjs@^0.8.8:
     setimmediate "^1.0.5"
     ua-parser-js "^0.7.9"
 
-fbjs@^0.8.9:
+fbjs@^0.8.5, fbjs@^0.8.8, fbjs@^0.8.9:
   version "0.8.12"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.12.tgz#10b5d92f76d45575fd63a217d4ea02bea2f8ed04"
   dependencies:
@@ -3437,6 +3437,12 @@ ignore@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.2.0.tgz#8d88f03c3002a0ac52114db25d2c673b0bf1e435"
 
+immutability-helper@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/immutability-helper/-/immutability-helper-2.2.3.tgz#681a0ec9ba2a243b9898564e39623c83d9ce1985"
+  dependencies:
+    invariant "^2.2.0"
+
 immutable@^3.8.1:
   version "3.8.1"
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.1.tgz#200807f11ab0f72710ea485542de088075f68cd2"