From cf19f63ed8c51b749e49f662d4fae7aff2c79609 Mon Sep 17 00:00:00 2001
From: RC <rc.chandru@gmail.com>
Date: Mon, 19 Mar 2018 05:34:24 -0700
Subject: [PATCH] feat: Allow creating multiple boards

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

https://github.com/rcdexta/react-trello/issues/65
---
 src/components/Board.js         |  9 ++++--
 stories/MultipleBoards.story.js | 29 +++++++++++++++++
 stories/data/other-board.json   | 55 +++++++++++++++++++++++++++++++++
 stories/index.js                |  1 +
 4 files changed, 92 insertions(+), 2 deletions(-)
 create mode 100644 stories/MultipleBoards.story.js
 create mode 100644 stories/data/other-board.json

diff --git a/src/components/Board.js b/src/components/Board.js
index 119f9b7b4..0000273a1 100644
--- a/src/components/Board.js
+++ b/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>
     )
diff --git a/stories/MultipleBoards.story.js b/stories/MultipleBoards.story.js
new file mode 100644
index 000000000..e4c2651d9
--- /dev/null
+++ b/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>
+    )
+  })
+)
diff --git a/stories/data/other-board.json b/stories/data/other-board.json
new file mode 100644
index 000000000..566c9fefa
--- /dev/null
+++ b/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": []
+    }
+  ]
+}
\ No newline at end of file
diff --git a/stories/index.js b/stories/index.js
index e5abd93c2..22e3c8d29 100644
--- a/stories/index.js
+++ b/stories/index.js
@@ -13,3 +13,4 @@ import './BoardStyling.story'
 import './AsyncLoad.story'
 import './RestrictedLanes.story'
 import './EditableBoard.story'
+import './MultipleBoards.story'