fixes for review

Author: alexeuler

mobile/ReactNativeTutorial/.watchmanconfig

@@ -1 +1 @@
-{}
+{}

mobile/ReactNativeTutorial/__tests__/bundles/comments/components/__snapshots__/Index.js.snap

@@ -32,8 +32,7 @@ exports[`Index renders correctly when loaded 1`] = `
     renderRow={[Function]}
     scrollEventThrottle={50}
     scrollRenderAheadDistance={1000}
-    stickyHeaderIndices={Array []}
-    style={Object {}}>
+    stickyHeaderIndices={Array []}>
     <View
       style={
         Object {
@@ -64,7 +63,7 @@ exports[`Index renders correctly when loaded 1`] = `
             "textAlign": "center",
           }
         }>
-        Justin
+        Alexey
       </Text>
       <Text
         accessible={true}
@@ -77,7 +76,7 @@ exports[`Index renders correctly when loaded 1`] = `
             "marginHorizontal": 10,
           }
         }>
-        Another random comment
+        Just some random comment
       </Text>
     </View>
     <View
@@ -110,7 +109,7 @@ exports[`Index renders correctly when loaded 1`] = `
             "textAlign": "center",
           }
         }>
-        Alexey
+        Justin
       </Text>
       <Text
         accessible={true}
@@ -123,7 +122,7 @@ exports[`Index renders correctly when loaded 1`] = `
             "marginHorizontal": 10,
           }
         }>
-        Just some random comment
+        Another random comment
       </Text>
     </View>
   </ScrollView>
@@ -138,9 +137,8 @@ exports[`Index renders correctly when loaded 1`] = `
         "justifyContent": "center",
       }
     }>
-    <TouchableHighlight
-      activeOpacity={0.85}
-      onPress={[Function]}
+    <View
+      onPress={undefined}
       style={
         Array [
           Object {
@@ -192,7 +190,7 @@ exports[`Index renders correctly when loaded 1`] = `
         }>
         
       </Text>
-    </TouchableHighlight>
+    </View>
   </View>
 </View>
 `;
@@ -231,8 +229,7 @@ exports[`Index renders correctly when loading 1`] = `
     renderRow={[Function]}
     scrollEventThrottle={50}
     scrollRenderAheadDistance={1000}
-    stickyHeaderIndices={Array []}
-    style={Object {}} />
+    stickyHeaderIndices={Array []} />
   <View
     style={
       Object {
@@ -244,9 +241,8 @@ exports[`Index renders correctly when loading 1`] = `
         "justifyContent": "center",
       }
     }>
-    <TouchableHighlight
-      activeOpacity={0.85}
-      onPress={[Function]}
+    <View
+      onPress={undefined}
       style={
         Array [
           Object {
@@ -298,7 +294,7 @@ exports[`Index renders correctly when loading 1`] = `
         }>
         
       </Text>
-    </TouchableHighlight>
+    </View>
   </View>
 </View>
 `;

mobile/ReactNativeTutorial/__tests__/bundles/comments/effects/__snapshots__/createComment.js.snap

@@ -2,9 +2,9 @@ exports[`createComment creates a comment in the store and sends request to api 1
 Array [
   Object {
     "entities": Object {
-      "temp0": Object {
+      "temp:0": Object {
         "author": "Alexey",
-        "id": "temp0",
+        "id": "temp:0",
         "text": "Random comment",
       },
     },
@@ -19,15 +19,15 @@ Array [
     "args": Array [
       Object {
         "author": "Alexey",
-        "id": "temp0",
+        "id": "temp:0",
         "text": "Random comment",
       },
     ],
     "name": "postComment",
     "type": "CALL",
   },
   Object {
-    "id": "temp0",
+    "id": "temp:0",
     "type": "COMMENTS_STORE:REMOVE",
   },
   Object {

mobile/ReactNativeTutorial/__tests__/bundles/comments/effects/__snapshots__/fetch.js.snap

@@ -9,13 +9,6 @@ Array [
     "name": "fetchComments",
     "type": "CALL",
   },
-  Object {
-    "args": Array [
-      [Error: Invalid Json],
-    ],
-    "name": "bound log",
-    "type": "CALL",
-  },
   Object {
     "args": Array [
       "Error",

mobile/ReactNativeTutorial/app/api/index.js

@@ -1,5 +1,6 @@
 import _ from 'lodash/fp';
-import { normalize, Schema, arrayOf } from 'normalizr';
+import { normalize } from 'normalizr';
+import { commentSchema, commentsSchema } from './schemas';
 
 // You can use localhost for development, but only on iOS. Android emulator is considered
 // a standalone machine with it's own localhost. Workaround is to specify the actual
@@ -27,13 +28,11 @@ const postRequest = async (url, payload) => apiRequest(url, 'POST', payload);
 export const fetchComments = async () => {
   const response = await getRequest('comments.json');
   const camelizedResponse = _.mapKeys(_.camelCase, response);
-  const commentSchema = new Schema('comments');
-  return normalize(camelizedResponse, { comments: arrayOf(commentSchema) });
+  return normalize(camelizedResponse, { comments: commentsSchema });
 };
 
 export const postComment = async (payload) => {
   const response = await postRequest('comments.json', { comment: payload });
   const camelizedResponse = _.mapKeys(_.camelCase, response);
-  const commentSchema = new Schema('comments');
   return normalize(camelizedResponse, commentSchema);
 };

mobile/ReactNativeTutorial/app/api/schemas.js

@@ -0,0 +1,3 @@
+import { Schema, arrayOf } from 'normalizr';
+export const commentSchema = new Schema('comments');
+export const commentsSchema = arrayOf(commentSchema);

mobile/ReactNativeTutorial/app/bundles/comments/components/Index/Footer/Footer.js

@@ -13,7 +13,7 @@ const Footer = () => (
       reverse
       name="add"
       color="#f50"
-      onPress={() => Actions.commentsAdd()}
+      onPress={Actions.commentsAdd}
     />
   </View>
 );

mobile/ReactNativeTutorial/app/bundles/comments/components/Index/List/List.js

@@ -1,26 +1,17 @@
 // @flow
 import React from 'react';
 import { ListView, RefreshControl } from 'react-native';
-import _ from 'lodash/fp';
 import type { IndexPropsType } from '../../../containers/Index';
 import Item from './Item/Item';
 
-import styles from './ListStyle';
-
 type PropsType = IndexPropsType;
 
 const List = (props: PropsType) => {
-  const data = _.compose(
-    _.reverse,
-    _.sortBy(_.get('id')),
-    _.values
-  )(props.comments);
   const dataSource = new ListView.DataSource({ rowHasChanged: (r1: any, r2: any) => r1 !== r2 })
-    .cloneWithRows(data);
+    .cloneWithRows(props.comments || []);
   return (
     <ListView
       enableEmptySections
-      style={styles.container}
       dataSource={dataSource}
       renderRow={(item: any) => <Item {...item} />}
       refreshControl={

mobile/ReactNativeTutorial/app/bundles/comments/components/Index/List/ListStyle.js

@@ -9,11 +9,7 @@ export const initialState = fromJS({
 
 const update = (state, action) => state.merge(action.payload);
 
-export default (state, action) => {
-  if (!state) {
-    return initialState;
-  }
-
+export default (state = initialState, action) => {
   switch (action.type) {
     case UPDATE:
       return update(state, action);

mobile/ReactNativeTutorial/app/reducers/commentFormReducer.js

@@ -14,11 +14,7 @@ const create = (state, action) => state.merge(action.entities);
 const remove = (state, action) => state.delete(action.id);
 const setLoading = (state, action) => state.setIn(['meta', 'loading'], action.loading);
 
-export default (state, action) => {
-  if (!state) {
-    return initialState;
-  }
-
+export default (state = initialState, action) => {
   switch (action.type) {
     case CREATE:
       return create(state, action);

mobile/ReactNativeTutorial/app/reducers/commentsStoreReducer.js

@@ -5,7 +5,7 @@ import commentsStoreSelector from './commentsStoreSelector';
 export default createSelector(
   commentsStoreSelector,
   commentsStore => Map({
-    comments: commentsStore.delete('meta').valueSeq().sort((a, b) => b.get('id') - a.get('id')),
+    comments: commentsStore.delete('meta').valueSeq().sortBy(x => x.get('id')).reverse(),
     meta: commentsStore.get('meta'),
   })
 );

mobile/ReactNativeTutorial/app/selectors/commentsPropsSelector.js

@@ -6,12 +6,9 @@ import Index from '../../bundles/comments/containers/Index';
 
 import styles from './RouterStyle';
 
-const reducerCreate = params => {
-  const defaultReducer = Reducer(params);
-  return (state, action) => {
-    console.log('Executing navigation action', action);
-    return defaultReducer(state, action);
-  };
+const reducerCreate = params => (state, action) => {
+  console.log('Executing navigation action', action);
+  return Reducer(params)(state, action);
 };
 
 export default () => (

mobile/ReactNativeTutorial/app/setup/Router/Router.js

@@ -3,12 +3,5 @@ import effectsMiddleware from 'redux-thunk-effects';
 import loggerMiddleware from './loggerMiddleware';
 import appReducer, { initialState } from '../reducers';
 
-let composedStore;
-if (__DEV__) {
-  composedStore = compose(applyMiddleware(loggerMiddleware, effectsMiddleware));
-} else {
-  composedStore = compose(applyMiddleware(effectsMiddleware));
-}
-const store = composedStore(createStore)(appReducer, initialState);
-
-export default store;
+const middlewares = __DEV__ ? [effectsMiddleware, loggerMiddleware] : [effectsMiddleware];
+export default createStore(appReducer, initialState, applyMiddleware(...middlewares));

mobile/ReactNativeTutorial/app/setup/store.js

@@ -1,6 +1,9 @@
 /* eslint-disable import/prefer-default-export */
 import _ from 'lodash/fp';
 
+// The format for tempId (id for temporary object not stored on the remote server yet)
+// is temp{n}, e.g. temp0, temp1, etc.
+// This function gets the maximum tempId, e.g. temp10 and returns then next id, e.g. temp11
 export const getNewId = (store) => {
   const tempPrefix = 'temp:';
   const tempRegex = new RegExp(`^${tempPrefix}`);
@@ -10,5 +13,5 @@ export const getNewId = (store) => {
     .map(key => parseInt(key.substring(tempPrefix.length), 10))
     .max();
   const newId = _.isNil(maxId) ? 0 : maxId + 1;
-  return `temp${newId}`;
+  return `temp:${newId}`;
 };