Merge pull request #195 from gaearon/breaking-changes-1.0

Breaking API changes for 1.0

Author: gaearon

.eslintrc

@@ -6,10 +6,16 @@
     "node": true
   },
   "rules": {
+    "valid-jsdoc": 2,
+
     "react/jsx-uses-react": 2,
     "react/jsx-uses-vars": 2,
     "react/react-in-jsx-scope": 2,
 
+    // Disable until Flow supports let and const
+    "no-var": 0,
+    "vars-on-top": 0,
+
     //Temporarirly disabled due to a possible bug in babel-eslint (todomvc example)
     "block-scoped-var": 0,
     // Temporarily disabled for test/* until babel/babel-eslint#33 is resolved

.flowconfig

@@ -0,0 +1,9 @@
+[ignore]
+.*/lib
+.*/test
+
+[include]
+
+[libs]
+
+[options]

.gitignore

@@ -1,8 +1,6 @@
-node_modules
-npm-debug.log
 .DS_Store
+*.log
+node_modules
 dist
 lib
 coverage
-react.js
-react-native.js

.npmignore

@@ -1,2 +1,5 @@
-src
+.DS_Store
+*.log
 examples
+test
+coverage

.travis.yml

@@ -1,3 +1,7 @@
 language: node_js
 node_js:
-  - "iojs"
+  - "iojs-2"
+script:
+  - npm test
+  - npm run build:examples
+

examples/async/.babelrc

@@ -0,0 +1,3 @@
+{
+  "stage": 2
+}

examples/async/actions/index.js

@@ -0,0 +1,64 @@
+import fetch from 'isomorphic-fetch';
+
+export const REQUEST_POSTS = 'REQUEST_POSTS';
+export const RECEIVE_POSTS = 'RECEIVE_POSTS';
+export const SELECT_REDDIT = 'SELECT_REDDIT';
+export const INVALIDATE_REDDIT = 'INVALIDATE_REDDIT';
+
+export function selectReddit(reddit) {
+  return {
+    type: SELECT_REDDIT,
+    reddit
+  };
+}
+
+export function invalidateReddit(reddit) {
+  return {
+    type: INVALIDATE_REDDIT,
+    reddit
+  };
+}
+
+function requestPosts(reddit) {
+  return {
+    type: REQUEST_POSTS,
+    reddit
+  };
+}
+
+function receivePosts(reddit, json) {
+  return {
+    type: RECEIVE_POSTS,
+    reddit: reddit,
+    posts: json.data.children,
+    receivedAt: Date.now()
+  };
+}
+
+function fetchPosts(reddit) {
+  return dispatch => {
+    dispatch(requestPosts(reddit));
+    return fetch(`http://www.reddit.com/r/${reddit}.json`)
+      .then(req => req.json())
+      .then(json => dispatch(receivePosts(reddit, json)));
+  }
+}
+
+function shouldFetchPosts(state, reddit) {
+  const posts = state.postsByReddit[reddit];
+  if (!posts) {
+    return true;
+  } else if (posts.isFetching) {
+    return false;
+  } else {
+    return posts.didInvalidate;
+  }
+}
+
+export function fetchPostsIfNeeded(reddit) {
+  return (dispatch, getState) => {
+    if (shouldFetchPosts(getState(), reddit)) {
+      return dispatch(fetchPosts(reddit));
+    }
+  };
+}

examples/async/components/Picker.js

@@ -0,0 +1,29 @@
+import React, { Component, PropTypes } from 'react';
+
+export default class Picker extends Component {
+  render () {
+    const { value, onChange, options } = this.props;
+
+    return (
+      <span>
+        <h1>{value}</h1>
+        <select onChange={e => onChange(e.target.value)}
+                value={value}>
+          {options.map(option =>
+            <option value={option} key={option}>
+              {option}
+            </option>)
+          }
+        </select>
+      </span>
+    );
+  }
+}
+
+Picker.propTypes = {
+  options: PropTypes.arrayOf(
+    PropTypes.string.isRequired
+  ).isRequired,
+  value: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired
+};

examples/async/components/Posts.js

@@ -0,0 +1,17 @@
+import React, { PropTypes, Component } from 'react';
+
+export default class Posts extends Component {
+  render () {
+    return (
+      <ul>
+        {this.props.posts.map((post, i) =>
+          <li key={i}>{post.data.title}</li>
+        )}
+      </ul>
+    );
+  }
+}
+
+Posts.propTypes = {
+  posts: PropTypes.array.isRequired
+};

examples/async/containers/AsyncApp.js

@@ -0,0 +1,102 @@
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { selectReddit, fetchPostsIfNeeded, invalidateReddit } from '../actions';
+import Picker from '../components/Picker';
+import Posts from '../components/Posts';
+
+class AsyncApp extends Component {
+  constructor(props) {
+    super(props);
+    this.handleChange = this.handleChange.bind(this);
+    this.handleRefreshClick = this.handleRefreshClick.bind(this);
+  }
+
+  componentDidMount() {
+    const { dispatch, selectedReddit } = this.props;
+    dispatch(fetchPostsIfNeeded(selectedReddit));
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.selectedReddit !== this.props.selectedReddit) {
+      const { dispatch, selectedReddit } = nextProps;
+      dispatch(fetchPostsIfNeeded(selectedReddit));
+    }
+  }
+
+  handleChange(nextReddit) {
+    this.props.dispatch(selectReddit(nextReddit));
+  }
+
+  handleRefreshClick(e) {
+    e.preventDefault();
+
+    const { dispatch, selectedReddit } = this.props;
+    dispatch(invalidateReddit(selectedReddit));
+    dispatch(fetchPostsIfNeeded(selectedReddit));
+  }
+
+  render () {
+    const { selectedReddit, posts, isFetching, lastUpdated } = this.props;
+    return (
+      <div>
+        <Picker value={selectedReddit}
+                onChange={this.handleChange}
+                options={['reactjs', 'frontend']} />
+        <p>
+          {lastUpdated &&
+            <span>
+              Last updated at {new Date(lastUpdated).toLocaleTimeString()}.
+              {' '}
+            </span>
+          }
+          {!isFetching &&
+            <a href='#'
+               onClick={this.handleRefreshClick}>
+              Refresh
+            </a>
+          }
+        </p>
+        {isFetching && posts.length === 0 &&
+          <h2>Loading...</h2>
+        }
+        {!isFetching && posts.length === 0 &&
+          <h2>Empty.</h2>
+        }
+        {posts.length > 0 &&
+          <div style={{ opacity: isFetching ? 0.5 : 1 }}>
+            <Posts posts={posts} />
+          </div>
+        }
+      </div>
+    );
+  }
+}
+
+AsyncApp.propTypes = {
+  selectedReddit: PropTypes.string.isRequired,
+  posts: PropTypes.array.isRequired,
+  isFetching: PropTypes.bool.isRequired,
+  lastUpdated: PropTypes.number,
+  dispatch: PropTypes.func.isRequired
+};
+
+function mapStateToProps(state) {
+  const { selectedReddit, postsByReddit } = state;
+  const {
+    isFetching,
+    lastUpdated,
+    items: posts
+  } = postsByReddit[selectedReddit] || {
+    isFetching: true,
+    items: []
+  };
+
+  return {
+    selectedReddit,
+    posts,
+    isFetching,
+    lastUpdated
+  };
+}
+
+export default connect(mapStateToProps)(AsyncApp);