Merge pull request #29 from thecodingmachine/fix/change_example_API

AurelGit · web-flow · commit 43275763e982 · 2019-02-08T12:11:51.000+01:00
Change API used in example screen
diff --git a/App/Config/index.dev.js b/App/Config/index.dev.js
@@ -1,3 +1,3 @@
 export const Config = {
-  API_URL: 'https://query.yahooapis.com/v1/public/',
+  API_URL: 'https://jsonplaceholder.typicode.com/users/',
 }
diff --git a/App/Config/index.production.js b/App/Config/index.production.js
@@ -1,3 +1,3 @@
 export const Config = {
-  API_URL: 'https://query.yahooapis.com/v1/public/',
+  API_URL: 'https://jsonplaceholder.typicode.com/users/',
 }
diff --git a/App/Config/index.staging.js b/App/Config/index.staging.js
@@ -1,3 +1,3 @@
 export const Config = {
-  API_URL: 'https://query.yahooapis.com/v1/public/',
+  API_URL: 'https://jsonplaceholder.typicode.com/users/',
 }
diff --git a/App/Containers/Example/ExampleScreen.js b/App/Containers/Example/ExampleScreen.js
@@ -3,13 +3,13 @@ import { Platform, Text, View, Button } from 'react-native'
 import { connect } from 'react-redux'
 import { PropTypes } from 'prop-types'
 import ExampleActions from 'App/Stores/Example/Actions'
-import { isHot } from 'App/Stores/Example/Selectors'
+import { liveInEurope } from 'App/Stores/Example/Selectors'
 import Style from './ExampleScreenStyle'
 
 /**
  * This is an example of a container component.
  *
- * This screen displays a little help message and shows the weather temperature.
+ * This screen displays a little help message and informations about a fake user.
  * Feel free to remove it.
  */
 
@@ -20,43 +20,54 @@ const instructions = Platform.select({
 
 class ExampleScreen extends React.Component {
   componentDidMount() {
-    this.props.fetchTemperature()
+    this.props.fetchUser()
   }
 
   render() {
-    let temperature = this.props.temperatureIsLoading ? '...' : this.props.temperature
-    if (temperature === null) {
-      temperature = '??'
+    let isLoading = this.props.userIsLoading ? 'Data are loading...' : ''
+    let user = this.props.user
+    let error = this.props.userErrorMessage
+    let result = null
+    if (user && !error) {
+      result =
+        "I'm a fake user, my name is " +
+        user.name +
+        '.\n' +
+        (this.props.liveInEurope ? 'I live in Europe !' : "I don't live in Europe.")
     }
 
     return (
       <View style={Style.container}>
         <Text style={Style.title}>TheCodingMachine boilerplate</Text>
         <Text style={Style.text}>To get started, edit App.js</Text>
-        <Text style={Style.text}>{instructions}</Text>
-        <Text style={Style.text}>The weather temperature is: {temperature}</Text>
-        <Text style={Style.text}>{this.props.isHot ? "It's pretty hot!" : ''}</Text>
-        <Text style={Style.text}>{this.props.temperatureErrorMessage}</Text>
-        <Button onPress={this.props.fetchTemperature} title="Refresh" />
+        <Text style={Style.instructions}>{instructions}</Text>
+        <Text style={Style.loading}>{isLoading}</Text>
+        {user && !error ? (
+          <Text style={Style.result}>{result}</Text>
+        ) : (
+          <Text style={Style.error}>{error}</Text>
+        )}
+        <Button onPress={this.props.fetchUser} title="Refresh" />
       </View>
     )
   }
 }
 
 ExampleScreen.propsTypes = {
-  temperature: PropTypes.number,
-  temperatureErrorMessage: PropTypes.string,
+  user: PropTypes.number,
+  userIsLoading: PropTypes.bool,
+  userErrorMessage: PropTypes.string,
 }
 
 const mapStateToProps = (state) => ({
-  temperature: state.example.get('temperature'),
-  temperatureErrorMessage: state.example.get('temperatureErrorMessage'),
-  temperatureIsLoading: state.example.get('temperatureIsLoading'),
-  isHot: isHot(state),
+  user: state.example.get('user').toJS(),
+  userIsLoading: state.example.get('userIsLoading'),
+  userErrorMessage: state.example.get('userErrorMessage'),
+  liveInEurope: liveInEurope(state),
 })
 
 const mapDispatchToProps = (dispatch) => ({
-  fetchTemperature: () => dispatch(ExampleActions.fetchTemperature()),
+  fetchUser: () => dispatch(ExampleActions.fetchUser()),
 })
 
 export default connect(
diff --git a/App/Containers/Example/ExampleScreenStyle.js b/App/Containers/Example/ExampleScreenStyle.js
@@ -19,4 +19,26 @@ export default StyleSheet.create({
     textAlign: 'center',
     marginBottom: 5,
   },
+  instructions: {
+    ...Fonts.style.normal,
+    textAlign: 'center',
+    marginBottom: 5,
+    fontStyle: 'italic',
+  },
+  loading: {
+    ...Fonts.style.normal,
+    textAlign: 'center',
+    marginBottom: 5,
+  },
+  result: {
+    ...Fonts.style.normal,
+    textAlign: 'center',
+    marginBottom: 5,
+  },
+  error: {
+    ...Fonts.style.normal,
+    textAlign: 'center',
+    marginBottom: 5,
+    color: 'red',
+  },
 })
diff --git a/App/Sagas/ExampleSaga.js b/App/Sagas/ExampleSaga.js
@@ -1,26 +1,25 @@
 import { put, call } from 'redux-saga/effects'
 import ExampleActions from 'App/Stores/Example/Actions'
-import { WeatherService } from 'App/Services/WeatherService'
+import { userService } from 'App/Services/UserService'
 
 /**
  * A saga can contain multiple functions.
  *
- * This example saga contains only one to fetch the weather temperature.
+ * This example saga contains only one to fetch fake user informations.
  * Feel free to remove it.
  */
-export function* fetchTemperature() {
+export function* fetchUser() {
   // Dispatch a redux action using `put()`
   // @see https://redux-saga.js.org/docs/basics/DispatchingActions.html
-  yield put(ExampleActions.fetchTemperatureLoading())
+  yield put(ExampleActions.fetchUserLoading())
 
-  // Fetch the temperature from an API
-  const temperature = yield call(WeatherService.fetchTemperature)
-
-  if (temperature) {
-    yield put(ExampleActions.fetchTemperatureSuccess(temperature))
+  // Fetch user informations from an API
+  const user = yield call(userService.fetchUser)
+  if (user) {
+    yield put(ExampleActions.fetchUserSuccess(user))
   } else {
     yield put(
-      ExampleActions.fetchTemperatureFailure('There was an error while fetching the temperature.')
+      ExampleActions.fetchUserFailure('There was an error while fetching user informations.')
     )
   }
 }
diff --git a/App/Sagas/StartupSaga.js b/App/Sagas/StartupSaga.js
@@ -8,7 +8,7 @@ import NavigationService from 'App/Services/NavigationService'
 export function* startup() {
   // Dispatch a redux action using `put()`
   // @see https://redux-saga.js.org/docs/basics/DispatchingActions.html
-  yield put(ExampleActions.fetchTemperature())
+  yield put(ExampleActions.fetchUser())
 
   // Add more operations you need to do at startup here
   // ...
diff --git a/App/Sagas/index.js b/App/Sagas/index.js
@@ -1,7 +1,7 @@
 import { takeLatest } from 'redux-saga/effects'
 import { ExampleTypes } from 'App/Stores/Example/Actions'
 import { StartupTypes } from 'App/Stores/Startup/Actions'
-import { fetchTemperature } from './ExampleSaga'
+import { fetchUser } from './ExampleSaga'
 import { startup } from './StartupSaga'
 
 export default function* root() {
@@ -11,7 +11,7 @@ export default function* root() {
      */
     // Run the startup saga when the application starts
     takeLatest(StartupTypes.STARTUP, startup),
-    // Call `fetchTemperature()` when a `FETCH_TEMPERATURE` action is triggered
-    takeLatest(ExampleTypes.FETCH_TEMPERATURE, fetchTemperature),
+    // Call `fetchUser()` when a `FETCH_USER` action is triggered
+    takeLatest(ExampleTypes.FETCH_USER, fetchUser),
   ]
 }
diff --git a/App/Services/UserService.js b/App/Services/UserService.js
@@ -7,7 +7,7 @@ import { Config } from 'App/Config'
  * Feel free to remove this example from your application.
  */
 
-const weatherApiClient = create({
+const userApiClient = create({
   /**
    * Import the config from the App/Config/index.js file
    */
@@ -19,27 +19,25 @@ const weatherApiClient = create({
   timeout: 3000,
 })
 
-function fetchTemperature() {
+function fetchUser() {
   // Simulate an error 50% of the time just for testing purposes
   if (Math.random() > 0.5) {
     return new Promise(function(resolve, reject) {
       resolve(null)
     })
   }
 
-  const locationQuery = escape(
-    "select item.condition.temp from weather.forecast where woeid in (select woeid from geo.places where text='Lyon, Rhone-Alpes, FR') and u='c'"
-  )
+  let number = Math.floor(Math.random() / 0.1) + 1
 
-  return weatherApiClient.get('yql?q=' + locationQuery + '&format=json').then((response) => {
+  return userApiClient.get(number.toString()).then((response) => {
     if (response.ok) {
-      return response.data.query.results.channel.item.condition.temp
+      return response.data
     }
 
     return null
   })
 }
 
-export const WeatherService = {
-  fetchTemperature,
+export const userService = {
+  fetchUser,
 }
diff --git a/App/Stores/Example/Actions.js b/App/Stores/Example/Actions.js
@@ -19,14 +19,14 @@ import { createActions } from 'reduxsauce'
  * @see https://github.com/infinitered/reduxsauce#createactions
  */
 const { Types, Creators } = createActions({
-  // Fetch the current weather temperature
-  fetchTemperature: null,
+  // Fetch user informations
+  fetchUser: null,
   // The operation has started and is loading
-  fetchTemperatureLoading: null,
-  // The temperature was successfully fetched
-  fetchTemperatureSuccess: ['temperature'],
+  fetchUserLoading: null,
+  // User informations were successfully fetched
+  fetchUserSuccess: ['user'],
   // An error occurred
-  fetchTemperatureFailure: ['errorMessage'],
+  fetchUserFailure: ['errorMessage'],
 })
 
 export const ExampleTypes = Types
diff --git a/App/Stores/Example/InitialState.js b/App/Stores/Example/InitialState.js
@@ -1,10 +1,10 @@
-import { Map } from 'immutable'
+import { Map, List } from 'immutable'
 
 /**
  * The initial values for the redux state.
  */
 export const INITIAL_STATE = Map({
-  temperature: null,
-  temperatureErrorMessage: null,
-  temperatureIsLoading: false,
+  user: List(),
+  userIsLoading: false,
+  userErrorMessage: null,
 })
diff --git a/App/Stores/Example/Reducers.js b/App/Stores/Example/Reducers.js
@@ -7,32 +7,33 @@
 import { INITIAL_STATE } from './InitialState'
 import { createReducer } from 'reduxsauce'
 import { ExampleTypes } from './Actions'
+import { List } from 'immutable'
 
-export const fetchTemperatureLoading = (state) =>
+export const fetchUserLoading = (state) =>
   state.merge({
-    temperatureIsLoading: true,
-    temperatureErrorMessage: '',
+    userIsLoading: true,
+    userErrorMessage: '',
   })
 
-export const fetchTemperatureSuccess = (state, { temperature }) =>
+export const fetchUserSuccess = (state, { user }) =>
   state.merge({
-    temperature: temperature,
-    temperatureIsLoading: false,
-    temperatureErrorMessage: null,
+    user: user,
+    userIsLoading: false,
+    userErrorMessage: null,
   })
 
-export const fetchTemperatureFailure = (state, { errorMessage }) =>
+export const fetchUserFailure = (state, { errorMessage }) =>
   state.merge({
-    temperature: null,
-    temperatureIsLoading: false,
-    temperatureErrorMessage: errorMessage,
+    user: List(),
+    userIsLoading: false,
+    userErrorMessage: errorMessage,
   })
 
 /**
  * @see https://github.com/infinitered/reduxsauce#createreducer
  */
 export const reducer = createReducer(INITIAL_STATE, {
-  [ExampleTypes.FETCH_TEMPERATURE_LOADING]: fetchTemperatureLoading,
-  [ExampleTypes.FETCH_TEMPERATURE_SUCCESS]: fetchTemperatureSuccess,
-  [ExampleTypes.FETCH_TEMPERATURE_FAILURE]: fetchTemperatureFailure,
+  [ExampleTypes.FETCH_USER_LOADING]: fetchUserLoading,
+  [ExampleTypes.FETCH_USER_SUCCESS]: fetchUserSuccess,
+  [ExampleTypes.FETCH_USER_FAILURE]: fetchUserFailure,
 })
diff --git a/App/Stores/Example/Selectors.js b/App/Stores/Example/Selectors.js
@@ -6,6 +6,11 @@
  * Writing selectors is optional as it is not always necessary, we provide a simple example below.
  */
 
-export const isHot = (state) => {
-  return state.example.get('temperature') && state.example.get('temperature') > 25
+export const liveInEurope = (state) => {
+  if (state.example.get('user').isEmpty()) return null
+
+  // For this example, we imagine this cities are european cities
+  let europeanCities = ['Gwenborough', 'Wisokyburgh', 'McKenziehaven', 'South Elvis', 'Roscoeview']
+
+  return europeanCities.includes(state.example.get('user').toJS().address.city)
 }
diff --git a/README.md b/README.md
@@ -42,7 +42,7 @@ The boilerplate contains:
 - [apisauce](https://github.com/infinitered/apisauce) (v0.15) to make [axios](https://github.com/axios/axios) even better
 - [prettier](https://prettier.io/) and [eslint](https://eslint.org/) preconfigured for React Native
 
-The boilerplate includes an example (displaying the current weather temperature) from UI components to the saga. The example is easy to remove so that it doesn't get in the way.
+The boilerplate includes an example (displaying fake user data) from UI components to the saga. The example is easy to remove so that it doesn't get in the way.
 
 ## Directory layout
 

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`export const Config = {`
`2`		`- API_URL: 'https://query.yahooapis.com/v1/public/',`
	`2`	`+ API_URL: 'https://jsonplaceholder.typicode.com/users/',`
`3`	`3`	`}`