Merge pull request #60 from skellock/fix-dom-example

Updates the React DOM example to this century.

Author: skellock

examples/ReactDomExample/App/Actions/Creators.js

@@ -2,16 +2,16 @@ import createAction from './CreateAction'
 import Types from './Types'
 
 const startup = () => createAction(Types.STARTUP)
-const requestTemperature = (city) => createAction(Types.TEMPERATURE_REQUEST, { city })
-const receiveTemperature = (temperature) => createAction(Types.TEMPERATURE_RECEIVE, { temperature })
-const receiveTemperatureFailure = () => createAction(Types.TEMPERATURE_FAILURE)
+const requestGithub = (city) => createAction(Types.GITHUB_REQUEST, { city })
+const receiveGithub = (message) => createAction(Types.GITHUB_RECEIVE, { message })
+const receiveGithubFailure = () => createAction(Types.GITHUB_FAILURE)
 
 /**
  Makes available all the action creators we've created.
  */
 export default {
   startup,
-  requestTemperature,
-  receiveTemperature,
-  receiveTemperatureFailure
+  requestGithub,
+  receiveGithub,
+  receiveGithubFailure
 }

examples/ReactDomExample/App/Actions/Types.js

@@ -1,6 +1,6 @@
 export default {
   STARTUP: 'STARTUP',
-  TEMPERATURE_REQUEST: 'TEMPERATURE_REQUEST',
-  TEMPERATURE_RECEIVE: 'TEMPERATURE_RECEIVE',
-  TEMPERATURE_FAILURE: 'TEMPERATURE_FAILURE'
+  GITHUB_REQUEST: 'GITHUB_REQUEST',
+  GITHUB_RECEIVE: 'GITHUB_RECEIVE',
+  GITHUB_FAILURE: 'GITHUB_FAILURE'
 }

examples/ReactDomExample/App/App.js

@@ -1,5 +1,4 @@
 import React, { Component } from 'react'
-import Layout from './Layout'
 import Root from './Root'
 import { Provider } from 'react-redux'
 import configureStore from './Store/Store'
@@ -10,9 +9,7 @@ export default class App extends Component {
   render () {
     return (
       <Provider store={store}>
-        <Layout>
-          <Root />
-        </Layout>
+        <Root />
       </Provider>
     )
   }

examples/ReactDomExample/App/Config/ReactotronConfig.js

@@ -1,7 +1,9 @@
 import Reactotron from '../../client' // in a real app, you would use 'reactotron'
 
 Reactotron.connect({
-  enabled: true,
   name: 'ReactDomExample'
 })
 
+// a little easier (albiet ghetto) way to make Reactotron available in other
+// places wihout having to import it all the time.
+console.tron = Reactotron

examples/ReactDomExample/App/Layout.js

@@ -3,41 +3,33 @@ import Immutable from 'seamless-immutable'
 import createReducer from './CreateReducer'
 
 export const INITIAL_STATE = Immutable({
-  temperature: null,
+  message: null,
   fetching: false,
-  error: null,
-  city: null
+  error: null
 })
 
-// request temp
 const request = (state, action) =>
-  state.merge({
-    fetching: true,
-    city: action.city,
-    temperature: null
-  })
+  state.merge({ fetching: true, message: null, error: null })
 
-// receive temp
 const receive = (state, action) =>
   state.merge({
     fetching: false,
     error: null,
-    temperature: action.temperature
+    message: action.message
   })
 
-// temp failure
 const failure = (state, action) =>
   state.merge({
     fetching: false,
     error: true,
-    temperature: null
+    message: null
   })
 
 // map our types to our handlers
 const ACTION_HANDLERS = {
-  [Types.TEMPERATURE_REQUEST]: request,
-  [Types.TEMPERATURE_RECEIVE]: receive,
-  [Types.TEMPERATURE_FAILURE]: failure
+  [Types.GITHUB_REQUEST]: request,
+  [Types.GITHUB_RECEIVE]: receive,
+  [Types.GITHUB_FAILURE]: failure
 }
 
 export default createReducer(INITIAL_STATE, ACTION_HANDLERS)

examples/ReactDomExample/App/Reducers/WeatherReducer.js renamed to examples/ReactDomExample/App/Reducers/GithubReducer.js

@@ -1,7 +1,7 @@
 import { combineReducers } from 'redux'
-import WeatherReducer from './WeatherReducer'
+import GithubReducer from './GithubReducer'
 
 // glue all the reducers together into 1 root reducer
 export default combineReducers({
-  weather: WeatherReducer
+  github: GithubReducer
 })

examples/ReactDomExample/App/Reducers/index.js

@@ -1,9 +1,8 @@
 import React, { Component, PropTypes } from 'react'
 import { connect } from 'react-redux'
 import Actions from './Actions/Creators'
-import Reactotron from '../client'
 
-export default class RootContainer extends Component {
+class RootContainer extends Component {
 
   constructor (props) {
     super(props)
@@ -13,23 +12,22 @@ export default class RootContainer extends Component {
   handlePress (e) {
     e.preventDefault()
     const {dispatch} = this.props
-    Reactotron.log('A touchable was pressed.')
-    dispatch(Actions.requestTemperature('Toronto'))
+    console.tron.log('A touchable was pressed. 🦄')
+    dispatch(Actions.requestGithub())
   }
 
-  componentWillMount () {
+  componentDidMount () {
     const { dispatch } = this.props
     dispatch(Actions.startup())
   }
 
   render () {
-    const {city, temperature, fetching} = this.props
+    const {message} = this.props
     return (
       <div style={Styles.container}>
         <a onClick={this.handlePress}>
-          <p style={Styles.weather}>
-            {`The weather in ${city} is ${fetching ? 'loading' : temperature}.`}
-          </p>
+          <h3>Last Commit Message</h3>
+          <p style={Styles.message}>{message}</p>
         </a>
       </div>
     )
@@ -44,7 +42,7 @@ const Styles = {
     justifyContent: 'center',
     alignItems: 'center'
   },
-  weather: {
+  message: {
     fontFamily: 'sans-serif',
     fontSize: '25px',
     textAlign: 'center'
@@ -53,16 +51,12 @@ const Styles = {
 
 RootContainer.propTypes = {
   dispatch: PropTypes.func,
-  city: PropTypes.string,
-  temperature: PropTypes.number,
-  fetching: PropTypes.bool
+  message: PropTypes.string
 }
 
 const mapStateToProps = (state) => {
   return {
-    city: state.weather.city,
-    temperature: state.weather.temperature,
-    fetching: state.weather.fetching
+    message: state.github.message
   }
 }
 

examples/ReactDomExample/App/Root.js

@@ -0,0 +1,31 @@
+import { take, call, put } from 'redux-saga/effects'
+import RS from 'ramdasauce'
+import Types from '../Actions/Types'
+import Actions from '../Actions/Creators'
+
+export function * getGithub (api) {
+  // make the call to github
+  const response = yield call(api.get, '/repos/skellock/reactotron/commits')
+
+  // are we good?
+  if (response.ok) {
+    const message = RS.dotPath('data.0.commit.message', response)
+    // record the last commit's message
+    yield put(Actions.receiveGithub(message))
+  } else {
+    yield put(Actions.receiveGithubFailure())
+  }
+}
+
+export default (api) => {
+  function * watchGithubRequest () {
+    while (true) {
+      yield take(Types.GITHUB_REQUEST)
+      yield call(getGithub, api)
+    }
+  }
+
+  return {
+    watchGithubRequest
+  }
+}

examples/ReactDomExample/App/Sagas/GithubSaga.js

@@ -1,16 +1,11 @@
-import { take, put, select } from 'redux-saga/effects'
+import { take, put } from 'redux-saga/effects'
 import Types from '../Actions/Types'
 import Actions from '../Actions/Creators'
-import R from 'ramda'
 
 // process STARTUP actions
 export function * watchStartup () {
   while (true) {
     yield take(Types.STARTUP)
-    const temp = yield select((state) => state.weather.temperature)
-    // only fetch new temps when we don't have one yet
-    if (!R.is(Number, temp)) {
-      yield put(Actions.requestTemperature('San Francisco'))
-    }
+    yield put(Actions.requestGithub())
   }
 }