Merge pull request #381 from kblazelek/master

Add ability to update single card through event bus

Author: rcdexta

README.md

@@ -271,6 +271,9 @@ const setEventBus = (handle) => {
 //To add a card
 eventBus.publish({type: 'ADD_CARD', laneId: 'COMPLETED', card: {id: "M1", title: "Buy Milk", label: "15 mins", description: "Also set reminder"}})
 
+//To update a card
+eventBus.publish({type: 'UPDATE_CARD', laneId: 'COMPLETED', card: {id: "M1", title: "Buy Milk (Updated)", label: "20 mins", description: "Also set reminder (Updated)"}})
+
 //To remove a card
 eventBus.publish({type: 'REMOVE_CARD', laneId: 'PLANNED', cardId: "M1"})
 

src/actions/LaneActions.js

@@ -1,6 +1,7 @@
 import {createAction} from 'redux-actions'
 
 export const addCard = createAction('ADD_CARD')
+export const updateCard = createAction('UPDATE_CARD')
 export const removeCard = createAction('REMOVE_CARD')
 export const moveCardAcrossLanes = createAction('MOVE_CARD')
 export const updateCards = createAction('UPDATE_CARDS')

src/controllers/BoardContainer.js

@@ -63,6 +63,8 @@ class BoardContainer extends Component {
         switch (event.type) {
           case 'ADD_CARD':
             return actions.addCard({laneId: event.laneId, card: event.card})
+          case 'UPDATE_CARD':
+            return actions.updateCard({laneId: event.laneId, card: event.card})
           case 'REMOVE_CARD':
             return actions.removeCard({laneId: event.laneId, cardId: event.cardId})
           case 'REFRESH_BOARD':

src/helpers/LaneHelper.js

@@ -69,6 +69,28 @@ const LaneHelper = {
     return update(state, {lanes: {$set: lanes}})
   },
 
+  updateCardFromLane: (state, {laneId, card}) => {
+    const laneIndex = state.lanes.findIndex(x => x.id === laneId)
+    if (laneIndex < 0) {
+      return state
+    }
+    const cardIndex = state.lanes[laneIndex].cards.findIndex(x => x.id === card.id)
+    if (cardIndex < 0) {
+      return state
+    }
+    return update(state, {
+      lanes: {
+        [laneIndex]: {
+          cards: {
+            [cardIndex]: {
+              $set: card
+            }
+          }
+        }
+      }
+    })
+  },
+
   moveCardAcrossLanes: (state, {fromLaneId, toLaneId, cardId, index}) => {
     let cardToMove = null
     const interimLanes = state.lanes.map(lane => {

src/reducers/BoardReducer.js

@@ -7,6 +7,8 @@ const boardReducer = (state = {lanes: []}, action) => {
       return Lh.initialiseLanes(state, payload)
     case 'ADD_CARD':
       return Lh.appendCardToLane(state, payload)
+    case 'UPDATE_CARD':
+      return Lh.updateCardFromLane(state, payload)
     case 'REMOVE_CARD':
       return Lh.removeCardFromLane(state, payload)
     case 'MOVE_CARD':

stories/Realtime.story.js

@@ -43,6 +43,14 @@ class RealtimeBoard extends Component {
     this.setState({boardData: newData})
   }
 
+  updateCard = () => {
+    this.state.eventBus.publish({
+      type: 'UPDATE_CARD',
+      laneId: 'PLANNED',
+      card: {id: 'Plan2', title: 'UPDATED Dispose Garbage', label: '45 mins', description: 'UPDATED Sort out recyclable and waste as needed'}
+    })
+  }
+
   prioritizeWriteBlog = () => {
     this.state.eventBus.publish({
       type: 'MOVE_CARD',
@@ -76,6 +84,9 @@ class RealtimeBoard extends Component {
         <button onClick={this.prioritizeWriteBlog} style={{margin: 5}}>
           Prioritize Write Blog
         </button>
+        <button onClick={this.updateCard} style={{margin: 5}}>
+          Update Dispose Garbage
+        </button>
         <Board data={this.state.boardData} onDataChange={this.shouldReceiveNewData} eventBusHandle={this.setEventBus} />
       </div>
     )

tests/__snapshots__/Storyshots.test.js.snap

@@ -3781,6 +3781,16 @@ exports[`Storyshots Advanced Features Realtime Events 1`] = `
       >
         Prioritize Write Blog
       </button>
+      <button
+        onClick={[Function]}
+        style={
+          Object {
+            "margin": 5,
+          }
+        }
+      >
+        Update Dispose Garbage
+      </button>
       <div
         className="react-trello-board c0"
         data={