part 12

Author: rwieruch

src/components/Stories.js

@@ -25,7 +25,7 @@ const COLUMNS = {
   },
 };
 
-const Stories = ({ storyStore, archiveStore }) =>
+const Stories = ({ storyStore }) =>
   <div className="stories">
     <StoriesHeader columns={COLUMNS} />
 
@@ -34,7 +34,6 @@ const Stories = ({ storyStore, archiveStore }) =>
         key={story.objectID}
         story={story}
         columns={COLUMNS}
-        onArchive={archiveStore.archiveStory}
       />
     )}
   </div>
@@ -51,4 +50,4 @@ const StoriesHeader = ({ columns }) =>
     )}
   </div>
 
-export default inject('storyStore', 'archiveStore')(observer(Stories));
+export default inject('storyStore')(observer(Stories));

src/components/Story.js

@@ -1,8 +1,9 @@
 import React from 'react';
+import { inject, observer } from 'mobx-react';
 import { ButtonInline } from './Button';
 import './Story.css';
 
-const Story = ({ story, columns, onArchive }) => {
+const Story = ({ story, columns, archiveStore }) => {
   const {
     title,
     url,
@@ -27,12 +28,12 @@ const Story = ({ story, columns, onArchive }) => {
         {points}
       </span>
       <span style={{ width: columns.archive.width }}>
-        <ButtonInline onClick={() => onArchive(objectID)}>
+        <ButtonInline onClick={() => archiveStore.archiveStory(objectID)}>
           Archive
         </ButtonInline>
       </span>
     </div>
   );
 }
 
-export default Story;
+export default inject('archiveStore')(observer(Story));