feat(): Make component reactive to external events. Api has changed

src/actions/lane_actions.js

@@ -1,3 +1,5 @@
 import {createAction} from 'redux-actions'
 
 export const updateLane = createAction('UPDATE_LANE')
+export const addCard = createAction('ADD_CARD')
+export const removeCard = createAction('REMOVE_CARD')

src/components/BoardContainer.js

@@ -5,6 +5,8 @@ import {connect} from 'react-redux'
 import Lane from './Lane'
 
 const boardActions = require('../actions/board_actions')
+const laneActions = require('../actions/lane_actions')
+
 
 class BoardContainer extends Component {
 
@@ -17,14 +19,27 @@ class BoardContainer extends Component {
     //     .on('dragend', (el) => el.classList.remove('is-moving'))
     // }
     this.props.actions.loadBoard(this.props.data)
+    if (this.props.callbackHandle) {
+      let handle = {
+        publishHook: (event) => {
+          switch(event.type) {
+            case 'ADD_CARD':
+              this.props.actions.addCard({laneId: event.laneId, card: event.card})
+            case 'REMOVE_CARD':
+              this.props.actions.removeCard({laneId: event.laneId, cardId: event.cardId})
+          }
+        }
+      }
+      this.props.callbackHandle(handle)
+    }
   }
 
   componentWillReceiveProps(nextProps) {
-    console.log('board received new props')
-    this.setState({data: nextProps.newData})
+    if (nextProps.newData) {
+      this.setState({data: nextProps.newData})
+    }
   }
 
-
   render() {
     const {data} = this.state
     return <BoardDiv>
@@ -47,6 +62,7 @@ BoardContainer.propTypes = {
   data: React.PropTypes.object.isRequired,
   onLaneScroll: React.PropTypes.func,
   onCardClick: React.PropTypes.func,
+  callbackHandle: React.PropTypes.func,
   laneSortFunction: React.PropTypes.func,
   draggable: React.PropTypes.bool,
   onDragStart: React.PropTypes.func,
@@ -57,6 +73,6 @@ const mapStateToProps = (state) => {
   return {newData: state}
 }
 
-const mapDispatchToProps = (dispatch) => ({actions: bindActionCreators(boardActions, dispatch)})
+const mapDispatchToProps = (dispatch) => ({actions: bindActionCreators({...boardActions, ...laneActions}, dispatch)})
 
 export default connect(mapStateToProps, mapDispatchToProps)(BoardContainer)

src/reducers/board_reducer.js

@@ -8,13 +8,31 @@ const appendCardsToLane = (state, {laneId, newCards}) => {
   return {...state, ...lanes}
 }
 
+const appendCardToLane = (state, {laneId, card}) => {
+  return appendCardsToLane(state, {laneId: laneId, newCards: [card]})
+}
+
+const removeCardFromLane = (state, {laneId, cardId}) => {
+  const lanes = state.lanes.map((lane) => {
+    if (lane.id === laneId) {
+      lane.cards = lane.cards.filter((card) => card.id !== cardId)
+      return lane
+    }
+  })
+  return {...state, ...lanes}
+}
+
 const boardReducer = (state = {lanes: []}, action) => {
 
   switch (action.type) {
     case 'LOAD_BOARD':
       return action.payload
     case 'UPDATE_LANE':
       return appendCardsToLane(state, action.payload)
+    case 'ADD_CARD':
+      return appendCardToLane(state, action.payload)
+    case 'REMOVE_CARD':
+      return removeCardFromLane(state, action.payload)
     default:
       return state
   }

stories/Realtime.story.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import {storiesOf} from '@kadira/storybook';
+
+import {Board} from '../src';
+
+const data = require('./data.json');
+
+let publish = undefined
+
+let setHandle = (handle) => {
+  publish = handle.publishHook
+}
+
+const completeMilkEvent = () => {
+  publish({type: 'ADD_CARD', laneId: 'COMPLETED', card: {id: "Milk", title: "Buy Milk", label: "15 mins", description: "Use Headspace app"}})
+  publish({type: 'REMOVE_CARD', laneId: 'PLANNED', cardId: "Milk"})
+}
+
+const addBlockedEvent = () => {
+  publish({type: 'ADD_CARD', laneId: 'BLOCKED', card: {id: "Ec2Error", title: "EC2 Instance Down", label: "30 mins", description: "Main Ec2 instance down"}})
+}
+
+storiesOf('react-trello', module)
+
+  .addWithInfo('Realtime Events',
+    'This is an illustration of external events that modify the cards in the board',
+    () => (
+      <div>
+        <button onClick={completeMilkEvent} style={{margin: 5}}>Complete Buy Milk</button>
+        <button onClick={addBlockedEvent} style={{margin: 5}}>Add Blocked</button>
+        <Board data={data}
+               callbackHandle={setHandle}/>
+      </div>
+    ));

stories/data.json

@@ -6,7 +6,7 @@
       "label": "20/70",
       "cards": [
         {
-          "id": "Plan1",
+          "id": "Milk",
           "title": "Buy milk",
           "label": "15 mins",
           "description": "2 Gallons of milk at the Deli store"

stories/index.js

@@ -2,3 +2,4 @@ import './Base.story'
 import './Pagination.story'
 import './Interactions.story'
 import './Sort.story'
+import './Realtime.story'