fix: Make lane and card dragging work for multiple boards scenarios

#87

Author: rcdexta

src/components/Board.js

@@ -4,14 +4,15 @@ import {Provider} from 'react-redux'
 import {createStore, applyMiddleware} from 'redux'
 import boardReducer from '../reducers/BoardReducer'
 import logger from 'redux-logger'
+import uuidv1 from "uuid/v1"
 
 const middlewares = process.env.NODE_ENV === 'development' ? [logger] : []
 
 export default class Board extends Component {
   constructor() {
     super()
-
     this.store = this.getStore();
+    this.id = uuidv1()
   }
 
   getStore = () => {
@@ -22,7 +23,7 @@ export default class Board extends Component {
   render() {
     return (
       <Provider store={this.store}>
-        <BoardContainer {...this.props} />
+        <BoardContainer {...this.props} id={this.id}/>
       </Provider>
     )
   }

src/components/BoardContainer.js

@@ -78,7 +78,7 @@ class BoardContainer extends Component {
   }
 
   render() {
-    const {reducerData, draggable, laneDraggable, laneDragClass, style, ...otherProps} = this.props
+    const {id, reducerData, draggable, laneDraggable, laneDragClass, style, ...otherProps} = this.props
     // Stick to whitelisting attributes to segregate board and lane props
     const passthroughProps = pick(this.props, [
       'onLaneScroll',
@@ -112,7 +112,7 @@ class BoardContainer extends Component {
           onDrop={this.onLaneDrop}
           lockAxis={'x'}
           getChildPayload={index => this.getLaneDetails(index)}
-          groupName="TrelloBoard">
+          groupName={`TrelloBoard${id}`}>
           {reducerData.lanes.map((lane, index) => {
             const {id, droppable, ...otherProps} = lane
             const laneToRender = (
@@ -139,6 +139,7 @@ class BoardContainer extends Component {
 }
 
 BoardContainer.propTypes = {
+  id: PropTypes.string,
   actions: PropTypes.object,
   data: PropTypes.object.isRequired,
   reducerData: PropTypes.object,

stories/MultipleBoards.story.js

@@ -18,10 +18,10 @@ storiesOf('Multiple Boards', module).add(
     return (
       <div style={{display: 'flex', flexDirection: 'column'}}>
         <div style={containerStyles}>
-          <Board data={data1} />
+          <Board data={data1} draggable />
         </div>
         <div style={containerStyles}>
-          <Board data={data2} />
+          <Board data={data2} draggable />
         </div>
       </div>
     )