added movies example

Author: happylinks

client/actions/movies.js

@@ -0,0 +1,24 @@
+export const MOVIES_REQUEST = 'MOVIES_REQUEST';
+export const MOVIES_SUCCESS = 'MOVIES_SUCCESS';
+export const MOVIES_FAILURE = 'MOVIES_FAILURE';
+
+export function moviesRequest() {
+  return {
+    type: MOVIES_REQUEST,
+  };
+}
+
+export function moviesSuccess(movies) {
+  return {
+    type: MOVIES_SUCCESS,
+    payload: movies,
+  };
+}
+
+export function moviesFailure(message) {
+  return {
+    type: MOVIES_FAILURE,
+    error: true,
+    payload: new Error(message),
+  };
+}

client/app.jsx

@@ -3,7 +3,8 @@ import React from 'react';
 import { Provider } from 'react-redux';
 import { BrowserRouter, ServerRouter, Match } from 'react-router';
 
-import { Layout, Hello } from 'components';
+import { Layout } from 'components';
+import { Movies } from 'containers';
 
 type Props = {
   context?: Object,
@@ -21,7 +22,7 @@ class Blrplt extends React.Component { // eslint-disable-line react/prefer-state
     // Declare your routes here.
     const layout = (
       <Layout>
-        <Match pattern="*" component={Hello} />
+        <Match pattern="*" component={Movies} />
       </Layout>
     );
 

client/components/Hello.jsx

@@ -1,9 +1,7 @@
-import Hello from './Hello';
 import Html from './Html';
 import Layout from './Layout';
 
 export {
-  Hello,
   Html,
   Layout,
 };

client/components/index.js

@@ -0,0 +1,45 @@
+import { connect } from 'react-redux';
+
+import { moviesRequest } from '../actions/movies';
+
+type Props = {
+  moviesRequest: Function,
+  movies: Array<Object>,
+  loading: boolean,
+}
+
+@connect(
+  state => ({
+    movies: state.movies.movies,
+    loading: state.movies.loading,
+  }),
+  { moviesRequest }
+)
+class Movies extends React.Component {
+  constructor(props: Props) {
+    super(props);
+
+    if (!props.movies.length) {
+      props.moviesRequest();
+    }
+  }
+
+  render() {
+    return (
+      <div>
+        <h2>Movies</h2>
+        {this.props.loading ? (
+          <p>Loading...</p>
+        ) : (
+          <ul>
+            {this.props.movies.map((movie, i) => (
+              <li key={i}>{movie.title} ({movie.releaseYear})</li>
+            ))}
+          </ul>
+        )}
+      </div>
+    );
+  }
+}
+
+export default Movies;

client/containers/Movies.jsx

@@ -0,0 +1,5 @@
+import Movies from './Movies';
+
+export {
+  Movies,
+};

client/containers/index.js

@@ -0,0 +1,25 @@
+import qs from 'qs';
+
+async function checkStatus(response) {
+  if (response.status >= 200 && response.status < 300) {
+    return response;
+  }
+  const error = new Error(response.statusText);
+  const json = await response.json();
+  error.response = json;
+  throw error;
+}
+
+function parseJSON(response) {
+  return response.json();
+}
+
+export function handleRequest(url, options = {}) {
+  if (options.query) {
+    const query = qs.stringify(options.query);
+    url = `${url}?${query}`;
+  }
+  return fetch(url, options)
+    .then(checkStatus)
+    .then(parseJSON);
+}

client/helpers/handleRequest.js

@@ -1,4 +1,7 @@
 import { combineReducers } from 'redux';
 
+import moviesReducer from './movies';
+
 export default combineReducers({
+  movies: moviesReducer,
 });

client/reducers/index.js

@@ -0,0 +1,25 @@
+import * as actions from '../actions/movies';
+
+const initialState = {
+  loading: false,
+  movies: [],
+};
+
+export default (state = initialState, action) => {
+  switch (action.type) {
+    case actions.MOVIES_REQUEST: {
+      return {
+        ...state,
+        loading: true,
+      };
+    }
+    case actions.MOVIES_SUCCESS: {
+      return {
+        movies: action.payload,
+        loading: false,
+      };
+    }
+    default:
+      return state;
+  }
+};

client/reducers/movies.js

@@ -1,6 +1,9 @@
 import { fork } from 'redux-saga/effects';
 
+import { moviesSaga } from './movies';
+
 export default function* root() {
   yield [
+    fork(moviesSaga),
   ];
 }

client/sagas/index.js

@@ -0,0 +1,18 @@
+import { takeEvery } from 'redux-saga';
+import { call, put } from 'redux-saga/effects';
+
+import { handleRequest } from '../helpers/handleRequest';
+import * as actions from '../actions/movies';
+
+export function* getMovies() {
+  try {
+    const res = yield call(handleRequest, 'https://facebook.github.io/react-native/movies.json');
+    yield put(actions.moviesSuccess(res.movies || []));
+  } catch (e) {
+    yield put(actions.moviesFailure(e.response ? e.response.message : null));
+  }
+}
+
+export function* moviesSaga() {
+  yield* takeEvery(actions.MOVIES_REQUEST, getMovies);
+}

client/sagas/movies.js

@@ -17,10 +17,6 @@ const config = {
       ],
     },
   },
-
-
-  // Deploy settings
-  bucket: 'blrplt',
   apiUrl: '',
   // Insert CDN url here (cloudfront) to correct the path that server.js uses on lambda.
   cdn: '',

config/main.js

@@ -53,10 +53,11 @@
     "redux-saga": "^0.13.0"
   },
   "config": {
-    "s3BucketName": "",
-    "cloudFormationStackName": "",
-    "region": "",
-    "functionName": "",
+    "tmps3BucketName": "blrplt-temp",
+    "s3BucketName": "blrplt-test",
+    "cloudFormationStackName": "blrplt-test",
+    "region": "eu-west-1",
+    "functionName": "blrplt-test",
     "accountId": ""
   },
   "scripts": {

package.json

@@ -57,6 +57,7 @@ app.get('*', (req, res) => {
     />
   );
 
+  // When first render is done and all saga's are run, render again with updated store.
   store.runSaga(rootSaga).done.then(() => {
     const markup = renderToString(rootComp);
     const html = renderHTML(markup, store);
@@ -71,6 +72,10 @@ app.get('*', (req, res) => {
     }
   });
 
+  // Do first render, starts initial actions.
+  renderToString(rootComp);
+
+  // When the first render is finished, send the END action to redux-saga.
   store.close();
 });