fix: Add MOVE_CARD to event bus. Fix the bug in appendCardsToLane helper when index is specified

Author: rcdexta

README.md

@@ -111,8 +111,10 @@ eventBus.publish({type: 'ADD_CARD', laneId: 'COMPLETED', card: {id: "M1", title:
 //To remove a card
 eventBus.publish({type: 'REMOVE_CARD', laneId: 'PLANNED', cardId: "M1"})
 
-<Board data={data}
-       eventBusHandle={setEventBus}/>
+//To move a card from one lane to another
+eventBus.publish({type: 'MOVE_CARD', fromLaneId: 'PLANNED', toLaneId: 'WIP', cardId: 'Plan3', index: 0})
+
+<Board data={data} eventBusHandle={setEventBus}/>
 ```
 
 The code will move the card `Buy Milk` from the planned lane to completed lane. We expect that this library can be wired to a backend push api that can alter the state of the board in realtime.

src/components/BoardContainer.js

@@ -24,7 +24,7 @@ class BoardContainer extends Component {
           case 'REFRESH_BOARD':
             return actions.loadBoard(event.data)
           case 'MOVE_CARD':
-            return actions.moveCardAcrossLanes({fromLaneId: event.fromLaneId, toLaneId: event.toLaneID, cardId: event.cardId, index: event.index})
+            return actions.moveCardAcrossLanes({fromLaneId: event.fromLaneId, toLaneId: event.toLaneId, cardId: event.cardId, index: event.index})
         }
       }
     }
@@ -98,7 +98,7 @@ class BoardContainer extends Component {
             const {id, droppable, ...otherProps} = lane
             return (
               <Lane
-                key={`${id}`}
+                key={id}
                 id={id}
                 index={index}
                 droppable={droppable === undefined ? true : droppable}

src/components/Lane.js

@@ -83,15 +83,6 @@ class Lane extends Component {
     }
   }
 
-  moveCardAcrossLanes = (fromLaneId, toLaneId, cardId) => {
-    toLaneId &&
-      this.props.actions.moveCardAcrossLanes({
-        fromLaneId: fromLaneId,
-        toLaneId: toLaneId,
-        cardId: cardId
-      })
-  }
-
   removeCard = (laneId, cardId) => {
     this.props.actions.removeCard({laneId: laneId, cardId: cardId})
   }
@@ -158,7 +149,6 @@ class Lane extends Component {
         tagStyle={tagStyle}
         cardStyle={cardStyle}
         moveCard={this.moveCard}
-        moveCardAcrossLanes={this.moveCardAcrossLanes}
         removeCard={this.removeCard}
         onClick={e => this.handleCardClick(e, card)}
         onDelete={this.props.onCardDelete}

src/helpers/DragType.js

@@ -20,14 +20,12 @@ const LaneHelper = {
     newCards = newCards.map(c => update(c, {laneId: {$set: laneId}}))
     return state.lanes.map(lane => {
       if (lane.id === laneId) {
-        let cards = null
         if (index !== undefined) {
-          cards = lane.cards
-          cards.splice(index, 0, ...newCards)
+          return update(lane, {cards: {$splice: [[index, 0, ...newCards]]}})
         } else {
-          cards = [...lane.cards, ...newCards]
+					const cardsToUpdate = [...lane.cards, ...newCards]
+					return update(lane, {cards: {$set: cardsToUpdate}})
         }
-        return update(lane, {cards: {$set: cards}})
       } else {
         return lane
       }

src/helpers/LaneHelper.js

@@ -15,12 +15,12 @@ class RealtimeBoard extends Component {
     }
 
     completeMilkEvent = () => {
+			this.state.eventBus.publish({type: 'REMOVE_CARD', laneId: 'PLANNED', cardId: 'Milk'})
         this.state.eventBus.publish({
             type: 'ADD_CARD',
             laneId: 'COMPLETED',
             card: {id: 'Milk', title: 'Buy Milk', label: '15 mins', description: 'Use Headspace app'}
         })
-        this.state.eventBus.publish({type: 'REMOVE_CARD', laneId: 'PLANNED', cardId: 'Milk'})
     }
 
     addBlockedEvent = () => {
@@ -49,12 +49,21 @@ class RealtimeBoard extends Component {
         this.setState({boardData: newData})
     }
 
+	  prioritizeWriteBlog = () => {
+			this.state.eventBus.publish({
+				type: 'MOVE_CARD',
+				fromLaneId: 'PLANNED',
+			  toLaneId: 'WIP',
+        cardId: 'Plan3',
+        index: 0
+			})
+    }
+
     shouldReceiveNewData = nextData => {
         console.log('data has changed')
         console.log(nextData)
     }
 
-
     render() {
       return <div>
         <button onClick={this.completeMilkEvent} style={{margin: 5}}>
@@ -68,7 +77,10 @@ class RealtimeBoard extends Component {
           </button>
         <button onClick={this.modifyCardTitle} style={{margin: 5}}>
               Modify Card Title
-          </button>
+        </button>
+				<button onClick={this.prioritizeWriteBlog} style={{margin: 5}}>
+					Prioritize Write Blog
+				</button>
         <Board data={this.state.boardData} onDataChange={this.shouldReceiveNewData}
           eventBusHandle={this.setEventBus} />
       </div>