From 676b9822ec8416ae46973801da1bd0ef8f4e8fbf Mon Sep 17 00:00:00 2001
From: Robin Wieruch <wrobin@gmx.net>
Date: Fri, 1 Sep 2017 16:41:53 +0200
Subject: [PATCH] part 11

---
 package-lock.json         | 13 +++++++++++++
 package.json              |  1 +
 src/components/App.js     |  7 ++-----
 src/components/Stories.js |  9 +++++----
 src/index.js              | 19 +++++++------------
 5 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 671ac9f..1cc1212 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4474,6 +4474,11 @@
       "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz",
       "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0="
     },
+    "hoist-non-react-statics": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz",
+      "integrity": "sha1-qkSM8JhtVcxAdzsXF0t90GbLfPs="
+    },
     "home-or-tmp": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/home-or-tmp/-/home-or-tmp-2.0.0.tgz",
@@ -6021,6 +6026,14 @@
       "resolved": "https://registry.npmjs.org/mobx/-/mobx-3.2.2.tgz",
       "integrity": "sha1-qmcUWb7e39mIDJSIiaP2K84JJ5w="
     },
+    "mobx-react": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/mobx-react/-/mobx-react-4.2.2.tgz",
+      "integrity": "sha1-25zDyv772DDQWEwRSa9armeCkgE=",
+      "requires": {
+        "hoist-non-react-statics": "1.2.0"
+      }
+    },
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
diff --git a/package.json b/package.json
index d8ca551..988b459 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "html-webpack-plugin": "2.29.0",
     "jest": "20.0.4",
     "mobx": "^3.2.2",
+    "mobx-react": "^4.2.2",
     "object-assign": "4.1.1",
     "postcss-flexbugs-fixes": "3.2.0",
     "postcss-loader": "2.0.6",
diff --git a/src/components/App.js b/src/components/App.js
index 7e379e5..c79b185 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -3,12 +3,9 @@ import './App.css';
 
 import Stories from './Stories';
 
-const App = ({ stories, onArchive }) =>
+const App = () =>
   <div className="app">
-    <Stories
-      stories={stories}
-      onArchive={onArchive}
-    />
+    <Stories />
   </div>
 
 export default App;
\ No newline at end of file
diff --git a/src/components/Stories.js b/src/components/Stories.js
index e14babb..2e77215 100644
--- a/src/components/Stories.js
+++ b/src/components/Stories.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { inject, observer } from 'mobx-react';
 import './Stories.css';
 import Story from './Story';
 
@@ -24,16 +25,16 @@ const COLUMNS = {
   },
 };
 
-const Stories = ({ stories, onArchive }) =>
+const Stories = ({ storyStore, archiveStore }) =>
   <div className="stories">
     <StoriesHeader columns={COLUMNS} />
 
-    {(stories || []).map(story =>
+    {(storyStore.readableStories || []).map(story =>
       <Story
         key={story.objectID}
         story={story}
         columns={COLUMNS}
-        onArchive={onArchive}
+        onArchive={archiveStore.archiveStory}
       />
     )}
   </div>
@@ -50,4 +51,4 @@ const StoriesHeader = ({ columns }) =>
     )}
   </div>
 
-export default Stories;
\ No newline at end of file
+export default inject('storyStore', 'archiveStore')(observer(Stories));
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 2070f04..f2f022c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,21 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { autorun } from 'mobx';
+import { Provider } from 'mobx-react';
 import './index.css';
 import App from './components/App';
 import store from './stores';
 import registerServiceWorker from './registerServiceWorker';
 
-function render() {
-  ReactDOM.render(
-    <App
-      stories={store.storyStore.readableStories}
-      onArchive={(objectID) => store.archiveStore.archiveStory(objectID)}
-    />,
-    document.getElementById('root')
-  );
-}
-
-autorun(render);
+ReactDOM.render(
+  <Provider { ...store }>
+    <App />
+  </Provider>,
+  document.getElementById('root')
+);
 
 registerServiceWorker();