added spinner

Author: alexeuler

Diff for: mobile/ReactNativeTutorial/app/bundles/comments/components/Index/Index.js

@@ -1,8 +1,10 @@
 // @flow
 import React from 'react';
 import { View } from 'react-native';
+import _ from 'lodash/fp';
 import List from './List/List';
 import Footer from './Footer/Footer';
+import Spinner from './Spinner/Spinner';
 import withIndexProps from '../../hocs/withIndexProps';
 
 import styles from './IndexStyle';
@@ -17,16 +19,23 @@ class Index extends React.Component {
 
   constructor(props: PropsType) {
     super(props);
+    _.bindAll(['renderList'], this);
   }
 
   componentDidMount() {
     this.props.actions.fetch();
   }
 
+  renderList() {
+    return this.props.meta.loading ?
+      <Spinner /> :
+      <List {...this.props} />
+  }
+
   render() {
     return (
       <View style={styles.container}>
-        <List {...this.props} />
+        {this.renderList()}
         <Footer />
       </View>
     )

Diff for: mobile/ReactNativeTutorial/app/bundles/comments/components/Index/List/List.js

@@ -7,44 +7,25 @@ import _ from 'lodash/fp';
 import styles from './ListStyle';
 
 type PropsType = {
-
 }
 
-class List extends React.Component {
-
-  props: PropsType;
-
-  state: {
-    dataSource: ListView.DataSource;
-  };
-
-
-  constructor(props: PropsType) {
-    super(props);
-    this.state = {
-      dataSource: new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }),
-    };
-  }
-
-  componentWillReceiveProps(nextProps) {
-    const data = _.compose(
-      _.reverse,
-      _.sortBy(_.get('id')),
-      _.values
-    )(nextProps.comments);
-    this.setState({ dataSource: this.state.dataSource.cloneWithRows(data) })
-  }
-
-  render() {
-    return (
-      <ListView
-        style={styles.container}
-        dataSource={this.state.dataSource}
-        renderRow={(item) => <Item {...item} />}
-      >
-      </ListView>
-    )
-  }
-}
+const List = (props: PropsType) => {
+  const data = _.compose(
+    _.reverse,
+    _.sortBy(_.get('id')),
+    _.values
+  )(props.comments);
+  const dataSource = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 })
+    .cloneWithRows(data);
+  return (
+    <ListView
+      enableEmptySections
+      style={styles.container}
+      dataSource={dataSource}
+      renderRow={(item) => <Item {...item} />}
+    >
+    </ListView>
+  );
+};
 
 export default List;

Diff for: mobile/ReactNativeTutorial/app/bundles/comments/components/Index/Spinner/Spinner.js

@@ -0,0 +1,21 @@
+// @flow
+import React from 'react';
+import { View, ActivityIndicator } from 'react-native';
+
+import styles from './SpinnerStyle';
+
+type PropsType = {
+
+}
+
+const Spinner = (props: PropsType) => (
+  <View style={styles.container}>
+    <ActivityIndicator
+      size="large"
+      color="#4641B5"
+    />
+  </View>
+);
+
+export default Spinner;
+

Diff for: mobile/ReactNativeTutorial/app/bundles/comments/components/Index/Spinner/SpinnerStyle.js

@@ -0,0 +1,11 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default styles;

Diff for: mobile/ReactNativeTutorial/app/bundles/comments/sagas/index.js

@@ -15,12 +15,15 @@ const UPDATE_FORM = 'SAGA:COMMENTS:UPDATE_FORM';
 
 
 function* fetchHandler() {
+  yield put(reduxActions.setLoadingComments(true));
   try {
     const response = yield call(api.fetchComments);
     yield put(reduxActions.createComments(response.entities.comments))
   } catch (e) {
     console.log(e);
     yield call(Alert.alert, 'Error', 'Could not connect to server', [{text: 'OK'}]);
+  } finally {
+    yield put(reduxActions.setLoadingComments(false));
   }
 }
 

Diff for: mobile/ReactNativeTutorial/app/reducers/commentsStoreReducer.js

@@ -2,9 +2,12 @@ import { fromJS } from 'immutable';
 
 const CREATE = 'COMMENTS_STORE:CREATE';
 const REMOVE = 'COMMENTS_STORE:REMOVE';
+const SET_LOADING = 'COMMENTS_STORE:SET_LOADING';
 
 export const initialState = fromJS({
-  meta: {}
+  meta: {
+    loading: false,
+  },
 });
 
 const create = (state, action) => {
@@ -15,6 +18,9 @@ const remove = (state, action) => {
   return state.delete(action.id);
 };
 
+const setLoading = (state, action) => {
+  return state.setIn(['meta', 'loading'], action.loading);
+};
 
 export default (state, action) => {
   if (!state) {
@@ -26,6 +32,8 @@ export default (state, action) => {
       return create(state, action);
     case REMOVE:
       return remove(state, action);
+    case SET_LOADING:
+      return setLoading(state, action);
     default:
       return state;
   }
@@ -39,7 +47,12 @@ const removeComment = (id) => {
   return {type: REMOVE, id };
 };
 
+const setLoadingComments = (loading) => {
+  return {type: SET_LOADING, loading};
+};
+
 export const actions = {
   createComments,
   removeComment,
+  setLoadingComments,
 };