feat: Allow creating multiple boards

Each board gets its own redux store for isolation and performance reasons

#65

Author: rcdexta

src/components/Board.js

@@ -6,12 +6,17 @@ import boardReducer from '../reducers/BoardReducer'
 import logger from 'redux-logger'
 
 const middlewares = process.env.NODE_ENV === 'development' ? [logger] : []
-const store = createStore(boardReducer, applyMiddleware(...middlewares))
 
 export default class Board extends Component {
+
+  getStore = () => {
+    //When you create multiple boards, unique stores are created for isolation
+    return createStore(boardReducer, applyMiddleware(...middlewares))
+  }
+
   render() {
     return (
-      <Provider store={store}>
+      <Provider store={this.getStore()}>
         <BoardContainer {...this.props} />
       </Provider>
     )

stories/MultipleBoards.story.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import {withInfo} from '@storybook/addon-info'
+import {storiesOf} from '@storybook/react'
+
+import Board from '../src'
+
+const data1 = require('./data/base.json')
+const data2 = require('./data/other-board')
+
+const containerStyles = {
+  height: 500,
+  padding: 20
+}
+
+storiesOf('Multiple Boards', module).add(
+  'Two Boards',
+  withInfo('Have two boards rendering their own data')(() => {
+    return (
+      <div style={{display: 'flex', flexDirection: 'column'}}>
+        <div style={containerStyles}>
+          <Board data={data1} />
+        </div>
+        <div style={containerStyles}>
+          <Board data={data2} />
+        </div>
+      </div>
+    )
+  })
+)

stories/data/other-board.json

@@ -0,0 +1,55 @@
+{
+  "lanes": [
+    {
+      "id": "yesterday",
+      "title": "Yesterday",
+      "label": "20/70",
+      "cards": [
+        {
+          "id": "Wip1",
+          "title": "Clean House",
+          "label": "30 mins",
+          "description": "Soap wash and polish floor. Polish windows and doors. Scrap all broken glasses"
+        }
+      ]
+    },
+    {
+      "id": "today",
+      "title": "Today",
+      "label": "10/20",
+      "droppable": false,
+      "cards": [
+        {
+          "id": "Milk",
+          "title": "Buy milk",
+          "label": "15 mins",
+          "description": "2 Gallons of milk at the Deli store"
+        },
+        {
+          "id": "Plan2",
+          "title": "Dispose Garbage",
+          "label": "10 mins",
+          "description": "Sort out recyclable and waste as needed"
+        },
+        {
+          "id": "Plan3",
+          "title": "Write Blog",
+          "label": "30 mins",
+          "description": "Can AI make memes?"
+        },
+        {
+          "id": "Plan4",
+          "title": "Pay Rent",
+          "label": "5 mins",
+          "description": "Transfer to bank account"
+        }
+      ]
+    },
+    {
+      "id": "tomorrow",
+      "title": "Tomorrow",
+      "label": "0/0",
+      "cards": []
+    }
+  ]
+}

stories/index.js

@@ -13,3 +13,4 @@ import './BoardStyling.story'
 import './AsyncLoad.story'
 import './RestrictedLanes.story'
 import './EditableBoard.story'
+import './MultipleBoards.story'