commit 3207fb44792b3271ded517a2f939cea41c2bf2ff
parent e08dba043a9bc3798a1d5681089789fdf3b38689
Author: Konstantin Tarkus <hello@tarkus.me>
Date: Mon, 7 Mar 2016 12:37:03 +0300
Update npm modules; fix ESLint warnings; prefer functional stateless components
Diffstat:
9 files changed, 95 insertions(+), 98 deletions(-)
diff --git a/CHANGELOG.md b/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
diff --git a/package.json b/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": {
diff --git a/src/components/ContentPage/ContentPage.js b/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}>
diff --git a/src/components/Feedback/Feedback.js b/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);
diff --git a/src/components/Footer/Footer.js b/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);
diff --git a/src/components/Header/Header.js b/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);
diff --git a/src/components/Link/Link.js b/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,
+ });
}
}
};
diff --git a/src/components/Navigation/Navigation.js b/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);
diff --git a/src/data/queries/news.js b/src/data/queries/news.js
@@ -16,11 +16,16 @@ 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)
@@ -28,7 +33,10 @@ const news = {
.then(data => {
if (data.responseStatus === 200) {
items = data.responseData.feed.entries;
+ fetching = null;
}
+
+ return items;
});
}
