added fetching functionalit

Author: dabit3

App.js

@@ -3,18 +3,16 @@ import { View, Text, AsyncStorage } from 'react-native'
 import Nav from './src/Nav'
 import PropTypes from 'prop-types'
 
-import { createStore } from 'redux'
+import { createStore, applyMiddleware } from 'redux' // NEW
+
 import { Provider } from 'react-redux'
 import rootReducer from './src/reducers/rootReducer'
-// import { persistStore } from 'redux-persist' // new
 
-const store = createStore(rootReducer)
-// persistStore(store) // new
+import thunk from 'redux-thunk' // NEW
+
+const store = createStore(rootReducer, applyMiddleware(thunk))
 
 class App extends React.Component {
-  componentDidMount() {
-    AsyncStorage.clear()
-  }
   render() {
     return (
       <Provider store={store}>

src/actions/citiesActions.js

@@ -1,6 +1,53 @@
 export const ADD_CITY = 'ADD_CITY'
 export const ADD_LOCATION = 'ADD_LOCATION'
 
+export const FETCHING_CITIES = 'FETCHING_CITIES'
+export const FETCHING_CITIES_SUCCESS = 'FETCHING_CITIES_SUCCESS'
+export const FETCHING_CITIES_FAILURE = 'FETCHING_CITIES_FAILURE'
+
+import getCities from '../api'
+
+import uuidV4 from 'uuid/v4'
+
+export function getCitiesFromAPI() {
+  return (dispatch) => {
+    dispatch(fetchingCities())
+    fetch('https://www.swapi.co/api/planets/')
+      .then(data => data.json())
+      .then(data => {
+        const { results } = data
+        results.forEach(result => {
+          result.country = result.orbital_period;
+          result.id = uuidV4();
+          result.locations = [];
+        })
+        dispatch(fetchingCitiesSuccess(results))
+      })
+      .catch(error => {
+        dispatch(fetchingCitiesFailure())
+      })
+  }
+}
+
+export function fetchingCities() {
+  return {
+    type: FETCHING_CITIES
+  }
+}
+
+export function fetchingCitiesSuccess(cities) {
+  return {
+    type: FETCHING_CITIES_SUCCESS,
+    cities: cities
+  }
+}
+
+export function fetchingCitiesFailure() {
+  return {
+    type: FETCHING_CITIES_FAILURE
+  }
+}
+
 export function addCity(city) {
   return {
     type: ADD_CITY,

src/api.js

@@ -1,3 +1,5 @@
+import uuidV4 from 'uuid/v4'
+
 const cities = [
   { name: 'Detroit', locations: [], country: 'USA', id: uuidV4() },
   { name: 'Montreal', locations: [], country: 'Canada', id: uuidV4() },

src/reducers/citiesReducer.js

@@ -1,12 +1,32 @@
-import { ADD_CITY, ADD_LOCATION } from '../actions/citiesActions'
+import { ADD_CITY, ADD_LOCATION, FETCHING_CITIES, FETCHING_CITIES_SUCCESS, FETCHING_CITIES_FAILURE } from '../actions/citiesActions'
+
 import uuidV4 from 'uuid/v4'
 
 const initialState = {
-  cities: []
+  cities: [],
+  error: false,
+  isFetching: false
 }
 
 export default function citiesReducer(state = initialState, action) {
   switch(action.type) {
+    case FETCHING_CITIES:
+      return {
+        ...state,
+        isFetching: true
+      }
+    case FETCHING_CITIES_SUCCESS:
+      return {
+        ...state,
+        isFetching: false,
+        cities: action.cities
+      }
+    case FETCHING_CITIES_FAILURE:
+      return {
+        ...state,
+        isFetching: false,
+        error: true
+      }
     case ADD_LOCATION:
       const city = state.cities.filter(city => {
         return city.id === action.city.id

src/tabs/Cities/Cities.js

@@ -1,14 +1,12 @@
 import React from 'react'
 import {
-  View, Text, StyleSheet, Image, FlatList
+  View, Text, StyleSheet, Image, FlatList, ActivityIndicator
 } from 'react-native'
-
 import { ListItem } from 'react-native-elements'
 
 import { connect } from 'react-redux'
-
 import PropTypes from 'prop-types'
-
+import { getCitiesFromAPI } from '../../actions/citiesActions'
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -30,6 +28,9 @@ class Cities extends React.Component {
       />
     )
   }
+  componentDidMount() {
+    this.props.dispatchGetCitiesFromAPI()
+  }
   renderCity = ({ item }) => {
     return (
       <ListItem
@@ -41,20 +42,33 @@ class Cities extends React.Component {
   render() {
     return (
       <View style={styles.container}>
-        <FlatList
-          keyExtractor={(city) => city.id}
-          data={this.props.cities}
-          renderItem={this.renderCity}
-        />
+        {
+          this.props.citiesInfo.isFetching ? (
+            <ActivityIndicator
+              animating
+            />
+          ) : (
+            <FlatList
+              keyExtractor={(city) => city.id}
+              data={this.props.cities}
+              renderItem={this.renderCity}
+            />
+          )
+        }
       </View>
     )
   }
 }
 
 const mapStateToProps = (state, nextProps) => {
   return {
-    cities: state.citiesReducer.cities
+    cities: state.citiesReducer.cities,
+    citiesInfo: state.citiesReducer
   }
 }
 
-export default connect(mapStateToProps)(Cities)
+const mapDispatchToProps = {
+  dispatchGetCitiesFromAPI: getCitiesFromAPI
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Cities)