part 4

Author: rwieruch

src/components/App.js

@@ -3,9 +3,12 @@ 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

@@ -25,7 +25,7 @@ const COLUMNS = {
   },
 };
 
-const Stories = ({ stories }) =>
+const Stories = ({ stories, onArchive }) =>
   <div className="stories">
     <StoriesHeader columns={COLUMNS} />
 
@@ -34,6 +34,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.css

@@ -1,5 +1,60 @@
 body {
+  color: #222;
+  background: #f4f4f4;
+  font: 400 14px CoreSans, Arial,sans-serif;
+}
+
+a {
+  color: #222;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+ul, li {
+  list-style: none;
+  padding: 0;
   margin: 0;
+}
+
+input {
+  padding: 10px;
+  border-radius: 5px;
+  outline: none;
+  margin-right: 10px;
+  border: 1px solid #dddddd;
+}
+
+button {
+  padding: 10px;
+  border-radius: 5px;
+  border: 1px solid #dddddd;
+  background: transparent;
+  color: #808080;
+  cursor: pointer;
+}
+
+button:hover {
+  color: #222;
+}
+
+.button-inline {
+  border-width: 0;
+  background: transparent;
+  color: inherit;
+  text-align: inherit;
+  -webkit-font-smoothing: inherit;
   padding: 0;
-  font-family: sans-serif;
+  font-size: inherit;
+  cursor: pointer;
+}
+
+.button-active {
+  border-radius: 0;
+  border-bottom: 1px solid #38BB6C;
 }
+
+*:focus {
+  outline: none;
+}

src/index.js

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