part 08

src/index.js

@@ -2,14 +2,13 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './components/App';
-import storyStore from './stores/storyStore';
-import archiveStore from './stores/archiveStore';
+import store from './stores';
 import registerServiceWorker from './registerServiceWorker';
 
 ReactDOM.render(
   <App
-    stories={storyStore.stories}
-    onArchive={(objectID) => archiveStore.archivedStoryIds.push(objectID)}
+    stories={store.storyStore.readableStories}
+    onArchive={(objectID) => store.archiveStore.archivedStoryIds.push(objectID)}
   />,
   document.getElementById('root')
 );

src/stores/archiveStore.js

@@ -2,8 +2,10 @@ import { observable } from 'mobx';
 
 class ArchiveStore {
   @observable archivedStoryIds = [];
-}
 
-const archiveStore = new ArchiveStore();
+  constructor(rootStore) {
+    this.rootStore = rootStore;
+  }
+}
 
-export default archiveStore;
+export default ArchiveStore;

src/stores/index.js

@@ -0,0 +1,13 @@
+import StoryStore from './storyStore';
+import ArchiveStore from './archiveStore';
+
+class RootStore {
+  constructor() {
+    this.storyStore = new StoryStore(this);
+    this.archiveStore = new ArchiveStore(this);
+  }
+}
+
+const rootStore = new RootStore();
+
+export default rootStore;

src/stores/storyStore.js

@@ -1,4 +1,4 @@
-import { observable } from 'mobx';
+import { observable, computed } from 'mobx';
 
 const INITIAL_STATE = [
   {
@@ -18,10 +18,20 @@ const INITIAL_STATE = [
   },
 ];
 
+const isNotArchived = (archivedStoryIds) => (story) =>
+  archivedStoryIds.indexOf(story.objectID) === -1;
+
 class StoryStore {
   @observable stories = INITIAL_STATE;
-}
 
-const storyStore = new StoryStore();
+  constructor(rootStore) {
+    this.rootStore = rootStore;
+  }
+
+  @computed get readableStories() {
+    const { archivedStoryIds } = this.rootStore.archiveStore;
+    return this.stories.filter(isNotArchived(archivedStoryIds));
+  }
+}
 
-export default storyStore;
+export default StoryStore;