part 04

Author: rwieruch

src/components/App.js

@@ -1,10 +1,14 @@
 import React from 'react';
 import './App.css';
+
 import Stories from './Stories';
 
-const App = ({ stories }) =>
+const App = ({ stories, onArchive }) =>
   <div className="app">
-    <Stories stories={stories} />
+    <Stories
+      stories={stories}
+      onArchive={onArchive}
+    />
   </div>
 
 export default App;

src/components/Button.js

@@ -0,0 +1,34 @@
+import React from 'react';
+
+const ButtonInline = ({
+  onClick,
+  type = 'button',
+  children
+}) =>
+  <Button
+    type={type}
+    className="button-inline"
+    onClick={onClick}
+  >
+    {children}
+  </Button>
+
+const Button = ({
+  onClick,
+  className,
+  type = 'button',
+  children
+}) =>
+  <button
+    type={type}
+    className={className}
+    onClick={onClick}
+  >
+    {children}
+  </button>
+
+export default Button;
+
+export {
+  ButtonInline
+};

src/components/Stories.js

@@ -24,7 +24,7 @@ const COLUMNS = {
   },
 };
 
-const Stories = ({ stories }) =>
+const Stories = ({ stories, onArchive }) =>
   <div className="stories">
     <StoriesHeader columns={COLUMNS} />
 
@@ -33,6 +33,7 @@ const Stories = ({ stories }) =>
         key={story.objectID}
         story={story}
         columns={COLUMNS}
+        onArchive={onArchive}
       />
     )}
   </div>

src/components/Story.js

@@ -1,13 +1,15 @@
 import React from 'react';
+import { ButtonInline } from './Button';
 import './Story.css';
 
-const Story = ({ story, columns }) => {
+const Story = ({ story, columns, onArchive }) => {
   const {
     title,
     url,
     author,
     num_comments,
     points,
+    objectID,
   } = story;
 
   return (
@@ -25,6 +27,9 @@ const Story = ({ story, columns }) => {
         {points}
       </span>
       <span style={{ width: columns.archive.width }}>
+        <ButtonInline onClick={() => onArchive(objectID)}>
+          Archive
+        </ButtonInline>
       </span>
     </div>
   );

src/index.js

@@ -23,7 +23,7 @@ const stories = [
 ];
 
 ReactDOM.render(
-  <App stories={stories} />,
+  <App stories={stories} onArchive={(objectID) => { console.log(objectID); }} />,
   document.getElementById('root')
 );
 registerServiceWorker();