Merge pull request #42 from TheLukaszNs/develop

Show loading animation, when data fetching is in progress
CodeLanka · Jan 11, 2018 · fe3635b · fe3635b
2 parents b68f4de + 77ab545
commit fe3635b
Show file tree

Hide file tree

Showing 11 changed files with 78 additions and 16 deletions.
diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -138,6 +138,8 @@ dependencies {
     compile(project(':react-native-firebase')) {
       transitive = false
     }
+    compile project(':react-native-spinkit')
+
     compile "com.google.firebase:firebase-core:11.0.0"
     compile "com.google.firebase:firebase-analytics:11.0.0"
     compile "com.google.firebase:firebase-perf:11.0.0"

diff --git a/android/app/src/main/java/org/gdgsrilanka/codelanka/eznet/MainApplication.java b/android/app/src/main/java/org/gdgsrilanka/codelanka/eznet/MainApplication.java
@@ -4,6 +4,7 @@
 import android.util.Log;
 
 import com.facebook.react.ReactApplication;
+import com.react.rnspinkit.RNSpinkitPackage;
 import com.oblador.vectoricons.VectorIconsPackage;
 import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.ReactNativeHost;
@@ -36,6 +37,7 @@ public boolean getUseDeveloperSupport() {
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
           new MainReactPackage(),
+            new RNSpinkitPackage(),
           new RNFirebasePackage(),
           new RNFirebaseAnalyticsPackage(),
           new RNFirebaseCrashPackage(),

diff --git a/android/build.gradle b/android/build.gradle
@@ -19,6 +19,8 @@ allprojects {
     repositories {
         mavenLocal()
         jcenter()
+        // Add jitpack repository (added by react-native-spinkit)
+        maven { url "https://jitpack.io" }
         maven {
             // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
             url "$rootDir/../node_modules/react-native/android"

diff --git a/android/settings.gradle b/android/settings.gradle
@@ -1,4 +1,6 @@
 rootProject.name = 'EZNet'
+include ':react-native-spinkit'
+project(':react-native-spinkit').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-spinkit/android')
 include ':react-native-fetch-blob'
 project(':react-native-fetch-blob').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fetch-blob/android')
 include ':react-native-vector-icons'

diff --git a/ios/EZNet.xcodeproj/project.pbxproj b/ios/EZNet.xcodeproj/project.pbxproj
@@ -49,6 +49,7 @@
 		E36E03D4C0614347BD1FF529 /* Zocial.ttf in Resources */ = {isa = PBXBuildFile; fileRef = C5F2973332314F3090CE044D /* Zocial.ttf */; };
 		F90355EC5AE4488D8AC3A076 /* libRNFetchBlob.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 0F2D9265AA354DE6B759F93A /* libRNFetchBlob.a */; };
 		0FCD125FCBB04C22BBC14E4F /* libRNFirebase.a in Frameworks */ = {isa = PBXBuildFile; fileRef = C82810B0F72E44CFBF184C10 /* libRNFirebase.a */; };
+		AA38DD42A61547279DB2065B /* libRNSpinkit.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 7D9C33604EAF4733B1678344 /* libRNSpinkit.a */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -284,6 +285,8 @@
 		0F2D9265AA354DE6B759F93A /* libRNFetchBlob.a */ = {isa = PBXFileReference; name = "libRNFetchBlob.a"; path = "libRNFetchBlob.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
 		B6BA648C8AF7429A99A5114F /* RNFirebase.xcodeproj */ = {isa = PBXFileReference; name = "RNFirebase.xcodeproj"; path = "../node_modules/react-native-firebase/ios/RNFirebase.xcodeproj"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = wrapper.pb-project; explicitFileType = undefined; includeInIndex = 0; };
 		C82810B0F72E44CFBF184C10 /* libRNFirebase.a */ = {isa = PBXFileReference; name = "libRNFirebase.a"; path = "libRNFirebase.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
+		46590D2B8FCD42468A97733B /* RNSpinkit.xcodeproj */ = {isa = PBXFileReference; name = "RNSpinkit.xcodeproj"; path = "../node_modules/react-native-spinkit/ios/RNSpinkit.xcodeproj"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = wrapper.pb-project; explicitFileType = undefined; includeInIndex = 0; };
+		7D9C33604EAF4733B1678344 /* libRNSpinkit.a */ = {isa = PBXFileReference; name = "libRNSpinkit.a"; path = "libRNSpinkit.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -312,6 +315,7 @@
 				139FDEF61B0652A700C62182 /* libRCTWebSocket.a in Frameworks */,
 				F90355EC5AE4488D8AC3A076 /* libRNFetchBlob.a in Frameworks */,
 				0FCD125FCBB04C22BBC14E4F /* libRNFirebase.a in Frameworks */,
+				AA38DD42A61547279DB2065B /* libRNSpinkit.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -480,6 +484,7 @@
 				139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */,
 				A8C244E03280488FA985513C /* RNFetchBlob.xcodeproj */,
 				B6BA648C8AF7429A99A5114F /* RNFirebase.xcodeproj */,
+				46590D2B8FCD42468A97733B /* RNSpinkit.xcodeproj */,
 			);
 			name = Libraries;
 			sourceTree = "<group>";
@@ -1042,11 +1047,13 @@
 					"$(inherited)",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
 					"$(SRCROOT)\..\node_modules\react-native-fetch-blob\ios/**",
 					"$(SRCROOT)\..\node_modules\react-native-firebase\ios\RNFirebase/**",
+					"$(SRCROOT)\..\node_modules\react-native-spinkit\ios/**",
 				);
 			};
 			name = Debug;
@@ -1069,11 +1076,13 @@
 					"$(inherited)",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
 					"$(SRCROOT)\..\node_modules\react-native-fetch-blob\ios/**",
 					"$(SRCROOT)\..\node_modules\react-native-firebase\ios\RNFirebase/**",
+					"$(SRCROOT)\..\node_modules\react-native-spinkit\ios/**",
 				);
 			};
 			name = Release;
@@ -1097,6 +1106,7 @@
 					"$(inherited)",
 					"$(SRCROOT)\..\node_modules\react-native-fetch-blob\ios/**",
 					"$(SRCROOT)\..\node_modules\react-native-firebase\ios\RNFirebase/**",
+					"$(SRCROOT)\..\node_modules\react-native-spinkit\ios/**",
 				);
 			};
 			name = Debug;
@@ -1119,6 +1129,7 @@
 					"$(inherited)",
 					"$(SRCROOT)\..\node_modules\react-native-fetch-blob\ios/**",
 					"$(SRCROOT)\..\node_modules\react-native-firebase\ios\RNFirebase/**",
+					"$(SRCROOT)\..\node_modules\react-native-spinkit\ios/**",
 				);
 			};
 			name = Release;
@@ -1150,11 +1161,13 @@
 					"$(inherited)",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
 					"$(SRCROOT)\..\node_modules\react-native-fetch-blob\ios/**",
 					"$(SRCROOT)\..\node_modules\react-native-firebase\ios\RNFirebase/**",
+					"$(SRCROOT)\..\node_modules\react-native-spinkit\ios/**",
 				);
 			};
 			name = Debug;
@@ -1186,11 +1199,13 @@
 					"$(inherited)",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
 					"$(SRCROOT)\..\node_modules\react-native-fetch-blob\ios/**",
 					"$(SRCROOT)\..\node_modules\react-native-firebase\ios\RNFirebase/**",
+					"$(SRCROOT)\..\node_modules\react-native-spinkit\ios/**",
 				);
 			};
 			name = Release;
@@ -1217,6 +1232,7 @@
 					"$(inherited)",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 			};
 			name = Debug;
@@ -1243,6 +1259,7 @@
 					"$(inherited)",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 			};
 			name = Release;

diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "test": "jest"
   },
   "dependencies": {
-    "native-base": "^2.2.0",
+    "native-base": "2.2.0",
     "prop-types": "^15.5.10",
     "react": "16.0.0-alpha.12",
     "react-burger-menu": "^2.1.3",
@@ -17,6 +17,7 @@
     "react-native-firebase": "^2.0.2",
     "react-native-material-ui": "^1.12.0",
     "react-native-responsive-image": "^2.1.0",
+    "react-native-spinkit": "^1.1.1",
     "react-navigation": "^1.0.0-beta.11",
     "react-redux": "^5.0.5",
     "redux": "^3.7.1",

diff --git a/src/actions/index.js b/src/actions/index.js
@@ -1,12 +1,13 @@
-import { FETCH_DATA } from './types';
+import { FETCHED_DATA, START_FETCHING } from './types';
 
 import Api from '../api/Api';
 
 export const actionFetchData = () => (dispatch) => {
+  dispatch({ type: START_FETCHING });
   Api.getCombinedData(Api.getCategories, Api.getSites, Api.getThumbnail)
     .then((data) => {
       dispatch({
-        type: FETCH_DATA,
+        type: FETCHED_DATA,
         payload: data,
       });
     });

diff --git a/src/actions/types.js b/src/actions/types.js
@@ -1 +1,2 @@
-export const FETCH_DATA = 'fetch_data';
+export const FETCHED_DATA = 'fetched_data';
+export const START_FETCHING = 'start_fetching';
diff --git a/src/components/App.js b/src/components/App.js
@@ -7,6 +7,7 @@ import { Container, Content } from 'native-base';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
+import Loading from './Loading';
 import TwoColumnView from './common/TwoColumnView';
 import BoxItem from './common/BoxItem';
 
@@ -15,13 +16,15 @@ import * as actions from './../actions';
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    alignItems: 'center',
   },
 });
 
 class Categories extends Component {
   static propTypes = {
     actionFetchData: PropTypes.func.isRequired,
-    categoryData: PropTypes.array.isRequired,
+    categories: PropTypes.array.isRequired,
+    isFetching: PropTypes.bool.isRequired,
     navigation: PropTypes.object.isRequired,
   };
 
@@ -34,10 +37,10 @@ class Categories extends Component {
   }
 
   renderCategories() {
+    const { categories } = this.props;
     const { navigate } = this.props.navigation;
 
-    let nodes = null;
-    nodes = this.props.categoryData.map(category => (
+    const nodes = categories.map(category => (
       <BoxItem
         key={category.id}
         onPress={() => navigate('Detail', { title: category.title, items: category.items })}
@@ -53,20 +56,22 @@ class Categories extends Component {
   }
 
   render() {
+    const { isFetching } = this.props;
     return (
       <Container>
         <Content>
           <View style={styles.container}>
-            {this.renderCategories()}
+            { isFetching ? <Loading /> : this.renderCategories() }
           </View>
         </Content>
       </Container>
     );
   }
 }
 
-const mapStateToProps = ({ data }) => ({
-  categoryData: data,
+const mapStateToProps = ({ data: { categories, isFetching } }) => ({
+  categories,
+  isFetching,
 });
 
 export default connect(mapStateToProps, actions)(Categories);
diff --git a/src/components/Loading.js b/src/components/Loading.js
@@ -0,0 +1,20 @@
+import React from 'react';
+
+import Spinner from 'react-native-spinkit';
+
+const loaderStyle = {
+  type: 'FoldingCube',
+  color: '#3F51B5',
+  size: 100,
+}
+
+const Loading = () => (
+  <Spinner
+    type={loaderStyle.type}
+    color={loaderStyle.color}
+    size={loaderStyle.size}
+    style={{ marginTop: '50%' }}
+  />
+);
+
+export default Loading;
diff --git a/src/reducers/data_reducer.js b/src/reducers/data_reducer.js
@@ -1,13 +1,22 @@
-import { FETCH_DATA } from './../actions/types';
+import { FETCHED_DATA, START_FETCHING } from './../actions/types';
 
-const InitialState = [];
+const InitialState = {
+  isFetching: false,
+  categories: [],
+};
 
 export default (state = InitialState, action) => {
   switch (action.type) {
-    case FETCH_DATA:
-      {
-        return action.payload;
-      }
+    case FETCHED_DATA:
+      return Object.assign({}, state, {
+        categories: action.payload,
+        isFetching: false,
+      });
+    case START_FETCHING:
+      return Object.assign({}, state, {
+        categories: [],
+        isFetching: true,
+      });
     default:
       return state;
   }