From b2b71f3883b94b442f54629e209467ce410e6b08 Mon Sep 17 00:00:00 2001
From: Cory Gibbons <hello@corygibbons.com>
Date: Sat, 29 Sep 2018 22:52:20 -0400
Subject: [PATCH] use functional component if methods or lifecycle hooks not
 needed

---
 src/components/About.js      | 75 ++++++++++++++++++++++++------------
 src/components/ListHeader.js | 18 ++++-----
 src/components/Menu.js       | 36 +++++++++--------
 src/components/NowPlaying.js | 29 ++++++--------
 src/containers/App.js        | 24 ++++--------
 5 files changed, 95 insertions(+), 87 deletions(-)

diff --git a/src/components/About.js b/src/components/About.js
index 65534e1..6d5a3d9 100644
--- a/src/components/About.js
+++ b/src/components/About.js
@@ -1,27 +1,41 @@
 import React from 'react';
 import CSSTranstionGroup from 'react-addons-css-transition-group';
 
-class AboutModal extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    return (
-      <div className="about" onClick={this.props.onBgClick}>
-        <div className="about-inner" onClick={evt => {evt.stopPropagation()}}>
-          <p>I'm using <a href="http://www.last.fm/">Last.fm</a>'s API to pull in my music listening history, where I've been tracking song plays since October 2007.</p>
-          <p>If any of the totals are looking weird, it's because Last.fm's API is occasionally a piece of crap.</p>
-          <p>Really though, the site is an opportunity for me to experiment and learn more about <a href="https://facebook.github.io/react/">React</a> and especially <a href="http://redux.js.org/">Redux</a>. It was developed and compiled with webpack, and styled with help from <a href="http://cssnext.io/">cssnext</a> and <a href="https://github.com/peterramsing/lost">Lost</a>.</p>
-          <p className="lower">
-            A <a href="http://smahr.net">smahr.net</a> project / <a href="https://github.com/essmahr/listening">Github</a>
-          </p>
-        </div>
-        <div className="about-close"><span>Close</span></div>
-      </div>
-    );
-  }
-}
+const AboutModal = ({ onBgClick }) => (
+  <div className="about" onClick={onBgClick}>
+    <div
+      className="about-inner"
+      onClick={evt => {
+        evt.stopPropagation();
+      }}
+    >
+      <p>
+        I'm using <a href="http://www.last.fm/">Last.fm</a>
+        's API to pull in my music listening history, where I've been tracking
+        song plays since October 2007.
+      </p>
+      <p>
+        If any of the totals are looking weird, it's because Last.fm's API is
+        occasionally a piece of crap.
+      </p>
+      <p>
+        Really though, the site is an opportunity for me to experiment and learn
+        more about <a href="https://facebook.github.io/react/">React</a> and
+        especially <a href="http://redux.js.org/">Redux</a>. It was developed
+        and compiled with webpack, and styled with help from{' '}
+        <a href="http://cssnext.io/">cssnext</a> and{' '}
+        <a href="https://github.com/peterramsing/lost">Lost</a>.
+      </p>
+      <p className="lower">
+        A <a href="http://smahr.net">smahr.net</a> project /{' '}
+        <a href="https://github.com/essmahr/listening">Github</a>
+      </p>
+    </div>
+    <div className="about-close">
+      <span>Close</span>
+    </div>
+  </div>
+);
 
 export default class About extends React.Component {
   constructor(props) {
@@ -29,7 +43,7 @@ export default class About extends React.Component {
 
     this.state = {
       modalOpen: false,
-    }
+    };
   }
 
   toggleModal() {
@@ -60,10 +74,21 @@ export default class About extends React.Component {
     return (
       <div>
         <div className="button-container">
-          <button className="about-launch" onClick={this.toggleModal.bind(this)}>?</button>
+          <button
+            className="about-launch"
+            onClick={this.toggleModal.bind(this)}
+          >
+            ?
+          </button>
         </div>
-        <CSSTranstionGroup transitionName="modal" transitionEnterTimeout={300} transitionLeaveTimeout={300}>
-          {this.state.modalOpen ? <AboutModal onBgClick={this.closeModal.bind(this)}/> : null}
+        <CSSTranstionGroup
+          transitionName="modal"
+          transitionEnterTimeout={300}
+          transitionLeaveTimeout={300}
+        >
+          {this.state.modalOpen ? (
+            <AboutModal onBgClick={this.closeModal.bind(this)} />
+          ) : null}
         </CSSTranstionGroup>
       </div>
     );
diff --git a/src/components/ListHeader.js b/src/components/ListHeader.js
index 54634d0..2453683 100644
--- a/src/components/ListHeader.js
+++ b/src/components/ListHeader.js
@@ -1,19 +1,15 @@
 import React from 'react';
 import TimeSpanMenu from './TimeSpanMenu';
 
-class ListHeader extends React.Component {
-  render() {
-    return (
-      <header className="section-header">
-        <h1 className="section-title">{this.props.title}</h1>
-        <TimeSpanMenu />
-      </header>
-    );
-  }
-}
+const ListHeader = ({ title }) => (
+  <header className="section-header">
+    <h1 className="section-title">{title}</h1>
+    <TimeSpanMenu />
+  </header>
+);
 
 ListHeader.propTypes = {
   title: React.PropTypes.string.isRequired,
-}
+};
 
 export default ListHeader;
diff --git a/src/components/Menu.js b/src/components/Menu.js
index 7fec136..64978f0 100644
--- a/src/components/Menu.js
+++ b/src/components/Menu.js
@@ -1,21 +1,23 @@
 import React from 'react';
 import { Link, IndexLink } from 'react-router';
 
-export default class Explore extends React.Component {
-  constructor(props) {
-    super(props);
-  }
+const Menu = () => (
+  <nav className="menu-outer">
+    <div className="menu">
+      <IndexLink className="menu-link" activeClassName="active" to="/">
+        Recent
+      </IndexLink>
+      <Link className="menu-link" activeClassName="active" to="/artists">
+        Artists
+      </Link>
+      <Link className="menu-link" activeClassName="active" to="/albums">
+        Albums
+      </Link>
+      <Link className="menu-link" activeClassName="active" to="/tracks">
+        Tracks
+      </Link>
+    </div>
+  </nav>
+);
 
-  render() {
-    return (
-      <nav className="menu-outer">
-        <div className="menu">
-          <IndexLink className="menu-link" activeClassName="active" to="/">Recent</IndexLink>
-          <Link className="menu-link" activeClassName="active" to="/artists">Artists</Link>
-          <Link className="menu-link" activeClassName="active" to="/albums">Albums</Link>
-          <Link className="menu-link" activeClassName="active" to="/tracks">Tracks</Link>
-        </div>
-      </nav>
-    );
-  }
-}
+export default Menu;
diff --git a/src/components/NowPlaying.js b/src/components/NowPlaying.js
index 48dbc59..e0cf0af 100644
--- a/src/components/NowPlaying.js
+++ b/src/components/NowPlaying.js
@@ -1,22 +1,15 @@
 import React from 'react';
-import { Link } from 'react-router';
 import SineWave from './SineWave';
 
-export default class NowPlaying extends React.Component {
-  constructor(props) {
-    super(props);
-  }
+export default ({ track }) => {
+  const { name, artist } = track;
 
-  render() {
-    const {name, artist} = this.props.track;
-
-    return (
-      <div className="now-playing">
-        <h5 className="now-playing-label">Listening:</h5>
-        <h1 className="now-playing-title">{name}</h1>
-        <h2 className="now-playing-artist">{artist.name}</h2>
-        <SineWave/>
-      </div>
-    );
-  }
-}
+  return (
+    <div className="now-playing">
+      <h5 className="now-playing-label">Listening:</h5>
+      <h1 className="now-playing-title">{name}</h1>
+      <h2 className="now-playing-artist">{artist.name}</h2>
+      <SineWave />
+    </div>
+  );
+};
diff --git a/src/containers/App.js b/src/containers/App.js
index 9fc2dcc..b435d13 100644
--- a/src/containers/App.js
+++ b/src/containers/App.js
@@ -3,24 +3,16 @@ import Header from '../containers/Header';
 import About from '../components/About';
 import LoaderWrapper from '../components/LoaderWrapper';
 
-class App extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    return (
-      <LoaderWrapper>
-        <Header/>
-        {this.props.children}
-        <About/>
-      </LoaderWrapper>
-    );
-  }
-}
+const App = props => (
+  <LoaderWrapper>
+    <Header />
+    {props.children}
+    <About />
+  </LoaderWrapper>
+);
 
 App.propTypes = {
-  children: React.PropTypes.node
+  children: React.PropTypes.node,
 };
 
 export default App;