Update npm modules; fix ESLint warnings; prefer functional stateless components

Author: koistya

CHANGELOG.md

@@ -4,6 +4,7 @@ All notable changes to this project will be documented in this file.
 
 ### [Unreleased][unreleased]
 
+- Convert `Feedback`, `Footer`, `Header`, and `Navigation` to functional stateless components
 - Move page / screen components into the `src/routes` folder along with the routing information for them [BREAKING CHANGE]. [6553936](https://github.com/kriasoft/react-starter-kit/commit/6553936e693e24a8ac6178f4962af15e0ea87dfd)
 
 ### [v0.5.1] - 2016-03-02

package.json

@@ -20,8 +20,8 @@
     "front-matter": "2.0.6",
     "graphiql": "0.5.0",
     "graphql": "0.4.18",
-    "history": "2.0.0",
-    "isomorphic-style-loader": "0.0.10",
+    "history": "2.0.1",
+    "isomorphic-style-loader": "0.0.12",
     "jade": "1.11.0",
     "jsonwebtoken": "5.7.0",
     "markdown-it": "6.0.0",
@@ -40,11 +40,11 @@
   "devDependencies": {
     "assets-webpack-plugin": "^3.3.0",
     "autoprefixer": "^6.3.3",
-    "babel-cli": "^6.6.0",
+    "babel-cli": "^6.6.5",
     "babel-eslint": "^5.0.0",
-    "babel-jest": "^9.0.0",
+    "babel-jest": "^9.0.1",
     "babel-loader": "^6.2.4",
-    "babel-plugin-react-transform": "^2.0.0",
+    "babel-plugin-react-transform": "^2.0.2",
     "babel-plugin-transform-runtime": "^6.6.0",
     "babel-preset-es2015": "^6.6.0",
     "babel-preset-react": "^6.5.0",
@@ -55,16 +55,16 @@
     "csscomb": "^3.1.8",
     "del": "^2.2.0",
     "enzyme": "^2.0.0",
-    "eslint": "^2.2.0",
-    "eslint-config-airbnb": "^6.0.2",
+    "eslint": "^2.3.0",
+    "eslint-config-airbnb": "^6.1.0",
     "eslint-loader": "^1.3.0",
-    "eslint-plugin-react": "^4.1.0",
+    "eslint-plugin-react": "^4.2.0",
     "estraverse-fb": "^1.3.1",
     "extend": "^3.0.0",
     "file-loader": "^0.8.5",
     "gaze": "^0.5.2",
     "git-repository": "^0.1.1",
-    "glob": "^7.0.0",
+    "glob": "^7.0.3",
     "jade-loader": "^0.8.0",
     "jest-cli": "^0.9.0",
     "jscs": "^2.11.0",
@@ -74,17 +74,17 @@
     "postcss": "^5.0.19",
     "postcss-import": "^8.0.2",
     "postcss-loader": "^0.8.1",
-    "postcss-scss": "^0.1.6",
+    "postcss-scss": "^0.1.7",
     "precss": "^1.4.0",
     "raw-loader": "^0.5.1",
     "react-addons-test-utils": "^0.14.7",
     "react-transform-catch-errors": "^1.0.2",
-    "react-transform-hmr": "^1.0.2",
+    "react-transform-hmr": "^1.0.4",
     "redbox-react": "^1.2.2",
     "replace": "^0.3.0",
     "url-loader": "^0.5.7",
     "webpack": "^1.12.14",
-    "webpack-hot-middleware": "^2.9.0",
+    "webpack-hot-middleware": "^2.9.1",
     "webpack-middleware": "^1.5.1"
   },
   "jest": {

src/components/ContentPage/ContentPage.js

@@ -23,8 +23,11 @@ class ContentPage extends Component {
     onSetTitle: PropTypes.func.isRequired,
   };
 
-  render() {
+  componentWillMount() {
     this.context.onSetTitle(this.props.title);
+  }
+
+  render() {
     return (
       <div className={s.root}>
         <div className={s.container}>

src/components/Feedback/Feedback.js

@@ -7,30 +7,26 @@
  * LICENSE.txt file in the root directory of this source tree.
  */
 
-import React, { Component } from 'react';
+import React from 'react';
 import withStyles from 'isomorphic-style-loader/lib/withStyles';
 import s from './Feedback.scss';
 
-class Feedback extends Component {
-
-  render() {
-    return (
-      <div className={s.root}>
-        <div className={s.container}>
-          <a
-            className={s.link}
-            href="https://gitter.im/kriasoft/react-starter-kit"
-          >Ask a question</a>
-          <span className={s.spacer}>|</span>
-          <a
-            className={s.link}
-            href="https://github.com/kriasoft/react-starter-kit/issues/new"
-          >Report an issue</a>
-        </div>
+function Feedback() {
+  return (
+    <div className={s.root}>
+      <div className={s.container}>
+        <a
+          className={s.link}
+          href="https://gitter.im/kriasoft/react-starter-kit"
+        >Ask a question</a>
+        <span className={s.spacer}>|</span>
+        <a
+          className={s.link}
+          href="https://github.com/kriasoft/react-starter-kit/issues/new"
+        >Report an issue</a>
       </div>
-    );
-  }
-
+    </div>
+  );
 }
 
 export default withStyles(Feedback, s);

src/components/Footer/Footer.js

@@ -7,29 +7,25 @@
  * LICENSE.txt file in the root directory of this source tree.
  */
 
-import React, { Component } from 'react';
+import React from 'react';
 import withStyles from 'isomorphic-style-loader/lib/withStyles';
 import s from './Footer.scss';
 import Link from '../Link';
 
-class Footer extends Component {
-
-  render() {
-    return (
-      <div className={s.root}>
-        <div className={s.container}>
-          <span className={s.text}>© Your Company</span>
-          <span className={s.spacer}>·</span>
-          <Link className={s.link} to="/">Home</Link>
-          <span className={s.spacer}>·</span>
-          <Link className={s.link} to="/privacy">Privacy</Link>
-          <span className={s.spacer}>·</span>
-          <Link className={s.link} to="/not-found">Not Found</Link>
-        </div>
+function Footer() {
+  return (
+    <div className={s.root}>
+      <div className={s.container}>
+        <span className={s.text}>© Your Company</span>
+        <span className={s.spacer}>·</span>
+        <Link className={s.link} to="/">Home</Link>
+        <span className={s.spacer}>·</span>
+        <Link className={s.link} to="/privacy">Privacy</Link>
+        <span className={s.spacer}>·</span>
+        <Link className={s.link} to="/not-found">Not Found</Link>
       </div>
-    );
-  }
-
+    </div>
+  );
 }
 
 export default withStyles(Footer, s);

src/components/Header/Header.js

@@ -7,32 +7,28 @@
  * LICENSE.txt file in the root directory of this source tree.
  */
 
-import React, { Component } from 'react';
+import React from 'react';
 import withStyles from 'isomorphic-style-loader/lib/withStyles';
 import s from './Header.scss';
 import Link from '../Link';
 import Navigation from '../Navigation';
 
-class Header extends Component {
-
-  render() {
-    return (
-      <div className={s.root}>
-        <div className={s.container}>
-          <Navigation className={s.nav} />
-          <Link className={s.brand} to="/">
-            <img src={require('./logo-small.png')} width="38" height="38" alt="React" />
-            <span className={s.brandTxt}>Your Company</span>
-          </Link>
-          <div className={s.banner}>
-            <h1 className={s.bannerTitle}>React</h1>
-            <p className={s.bannerDesc}>Complex web apps made easy</p>
-          </div>
+function Header() {
+  return (
+    <div className={s.root}>
+      <div className={s.container}>
+        <Navigation className={s.nav} />
+        <Link className={s.brand} to="/">
+          <img src={require('./logo-small.png')} width="38" height="38" alt="React" />
+          <span className={s.brandTxt}>Your Company</span>
+        </Link>
+        <div className={s.banner}>
+          <h1 className={s.bannerTitle}>React</h1>
+          <p className={s.bannerDesc}>Complex web apps made easy</p>
         </div>
       </div>
-    );
-  }
-
+    </div>
+  );
 }
 
 export default withStyles(Header, s);

src/components/Link/Link.js

@@ -18,7 +18,7 @@ function isModifiedEvent(event) {
   return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
 }
 
-class Link extends Component {
+class Link extends Component { // eslint-disable-line react/prefer-stateless-function
 
   static propTypes = {
     to: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
@@ -27,28 +27,29 @@ class Link extends Component {
 
   handleClick = (event) => {
     let allowTransition = true;
-    let clickResult;
 
-    if (this.props && this.props.onClick) {
-      clickResult = this.props.onClick(event);
+    if (this.props.onClick) {
+      this.props.onClick(event);
     }
 
     if (isModifiedEvent(event) || !isLeftClickEvent(event)) {
       return;
     }
 
-    if (clickResult === false || event.defaultPrevented === true) {
+    if (event.defaultPrevented === true) {
       allowTransition = false;
     }
 
     event.preventDefault();
 
     if (allowTransition) {
-      const link = event.currentTarget;
-      if (this.props && this.props.to) {
+      if (this.props.to) {
         Location.push(this.props.to);
       } else {
-        Location.push({ pathname: link.pathname, search: link.search });
+        Location.push({
+          pathname: event.currentTarget.pathname,
+          search: event.currentTarget.search,
+        });
       }
     }
   };

src/components/Navigation/Navigation.js

@@ -7,31 +7,27 @@
  * LICENSE.txt file in the root directory of this source tree.
  */
 
-import React, { Component, PropTypes } from 'react';
+import React, { PropTypes } from 'react';
 import cx from 'classnames';
 import withStyles from 'isomorphic-style-loader/lib/withStyles';
 import s from './Navigation.scss';
 import Link from '../Link';
 
-class Navigation extends Component {
-
-  static propTypes = {
-    className: PropTypes.string,
-  };
-
-  render() {
-    return (
-      <div className={cx(s.root, this.props.className)} role="navigation">
-        <Link className={s.link} to="/about">About</Link>
-        <Link className={s.link} to="/contact">Contact</Link>
-        <span className={s.spacer}> | </span>
-        <Link className={s.link} to="/login">Log in</Link>
-        <span className={s.spacer}>or</span>
-        <Link className={cx(s.link, s.highlight)} to="/register">Sign up</Link>
-      </div>
-    );
-  }
-
+function Navigation({ className }) {
+  return (
+    <div className={cx(s.root, className)} role="navigation">
+      <Link className={s.link} to="/about">About</Link>
+      <Link className={s.link} to="/contact">Contact</Link>
+      <span className={s.spacer}> | </span>
+      <Link className={s.link} to="/login">Log in</Link>
+      <span className={s.spacer}>or</span>
+      <Link className={cx(s.link, s.highlight)} to="/register">Sign up</Link>
+    </div>
+  );
 }
 
+Navigation.propTypes = {
+  className: PropTypes.string,
+};
+
 export default withStyles(Navigation, s);

src/data/queries/news.js

@@ -16,19 +16,27 @@ const url = 'http://ajax.googleapis.com/ajax/services/feed/load' +
             '?v=1.0&num=10&q=https://reactjsnews.com/feed.xml';
 
 let items = [];
+let fetching = null;
 let lastFetchTime = new Date(1970, 0, 1);
 
 const news = {
   type: new List(NewsItemType),
   resolve() {
+    if (fetching) {
+      return fetching;
+    }
+
     if ((new Date() - lastFetchTime) > 1000 * 60 * 10 /* 10 mins */) {
       lastFetchTime = new Date();
       fetch(url)
         .then(response => response.json())
         .then(data => {
           if (data.responseStatus === 200) {
             items = data.responseData.feed.entries;
+            fetching = null;
           }
+
+          return items;
         });
     }