functional stateless components refactoring

Author: rwieruch

src/components/App.js

@@ -1,20 +1,15 @@
-import React, { Component } from 'react';
+import React from 'react';
 import './App.css';
 
 import Stories from './Stories';
 import SearchStories from './SearchStories';
 
-class App extends Component {
-  render() {
-    return (
-      <div className="app">
-        <div className="interactions">
-          <SearchStories />
-        </div>
-        <Stories />
-      </div>
-    );
-  }
-}
+const App = () =>
+  <div className="app">
+    <div className="interactions">
+      <SearchStories />
+    </div>
+    <Stories />
+  </div>
 
 export default App;

src/components/Buttons.js

@@ -30,6 +30,5 @@ const Button = ({
 export default Button;
 
 export {
-  Button,
   ButtonInline,
 };

src/components/SearchStories.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { doFetchStories } from '../actions/story';
-import { Button } from './Buttons';
+import Button from './Buttons';
 
 const applyQueryState = query => () => ({
   query

src/components/Stories.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { connect } from 'react-redux';
 import { getReadableStories } from '../selectors/story';
 import './Stories.css';
@@ -27,25 +27,18 @@ const COLUMNS = {
   },
 };
 
-class Stories extends Component {
-  render() {
-    const { stories } = this.props;
+const Stories = ({ stories }) =>
+  <div className="stories">
+    <StoriesHeader columns={COLUMNS} />
 
-    return (
-      <div className="stories">
-        <StoriesHeader columns={COLUMNS} />
-
-        {(stories || []).map(story =>
-          <Story
-            key={story.objectID}
-            story={story}
-            columns={COLUMNS}
-          />
-        )}
-      </div>
-    );
-  }
-}
+    {(stories || []).map(story =>
+      <Story
+        key={story.objectID}
+        story={story}
+        columns={COLUMNS}
+      />
+    )}
+  </div>
 
 const StoriesHeader = ({ columns }) =>
   <div className="stories-header">

src/components/Story.js

@@ -1,49 +1,41 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { connect } from 'react-redux';
 import { doArchiveStory } from '../actions/archive';
 import './Story.css';
 
 import { ButtonInline } from './Buttons';
 
-class Story extends Component {
-  render() {
-    const {
-      story,
-      columns,
-      onArchive,
-    } = this.props;
+const Story = ({ story, columns, onArchive }) => {
+  const {
+    title,
+    url,
+    author,
+    num_comments,
+    points,
+    objectID,
+  } = story;
 
-    const {
-      title,
-      url,
-      author,
-      num_comments,
-      points,
-      objectID,
-    } = story;
-
-    return (
-      <div className="story">
-        <span style={{ width: columns.title.width }}>
-          <a href={url}>{title}</a>
-        </span>
-        <span style={{ width: columns.author.width }}>
-          {author}
-        </span>
-        <span style={{ width: columns.comments.width }}>
-          {num_comments}
-        </span>
-        <span style={{ width: columns.points.width }}>
-          {points}
-        </span>
-        <span style={{ width: columns.archive.width }}>
-          <ButtonInline onClick={() => onArchive(objectID)}>
-            Archive
-          </ButtonInline>
-        </span>
-      </div>
-    );
-  }
+  return (
+    <div className="story">
+      <span style={{ width: columns.title.width }}>
+        <a href={url}>{title}</a>
+      </span>
+      <span style={{ width: columns.author.width }}>
+        {author}
+      </span>
+      <span style={{ width: columns.comments.width }}>
+        {num_comments}
+      </span>
+      <span style={{ width: columns.points.width }}>
+        {points}
+      </span>
+      <span style={{ width: columns.archive.width }}>
+        <ButtonInline onClick={() => onArchive(objectID)}>
+          Archive
+        </ButtonInline>
+      </span>
+    </div>
+  );
 }
 
 const mapDispatchToProps = dispatch => ({