refactored hocs into containers

Author: alexeuler

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

@@ -103,3 +103,109 @@ exports[`test renders correctly 1`] = `
   </View>
 </View>
 `;
+
+exports[`test renders correctly 2`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }>
+  <ScrollView
+    dataSource={
+      ListViewDataSource {
+        "items": 0,
+      }
+    }
+    enableEmptySections={true}
+    initialListSize={10}
+    onContentSizeChange={[Function]}
+    onEndReachedThreshold={1000}
+    onKeyboardDidHide={undefined}
+    onKeyboardDidShow={undefined}
+    onKeyboardWillHide={undefined}
+    onKeyboardWillShow={undefined}
+    onLayout={[Function]}
+    onScroll={[Function]}
+    pageSize={1}
+    refreshControl={
+      <RefreshControl
+        onRefresh={[Function]}
+        refreshing={true}
+        tintColor="#4641B5" />
+    }
+    removeClippedSubviews={true}
+    renderRow={[Function]}
+    scrollEventThrottle={50}
+    scrollRenderAheadDistance={1000}
+    stickyHeaderIndices={Array []}
+    style={Object {}} />
+  <View
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#EFEFF2",
+        "borderTopColor": "#D2D2D2",
+        "borderTopWidth": 1,
+        "height": 70,
+        "justifyContent": "center",
+      }
+    }>
+    <TouchableHighlight
+      activeOpacity={0.85}
+      onPress={[Function]}
+      style={
+        Array [
+          Object {
+            "margin": 7,
+          },
+          Object {
+            "borderRadius": 28,
+            "height": 52,
+            "width": 52,
+          },
+          Object {
+            "shadowColor": "rgba(0,0,0, .4)",
+            "shadowOffset": Object {
+              "height": 1,
+              "width": 1,
+            },
+            "shadowOpacity": 1,
+            "shadowRadius": 1,
+          },
+          Object {
+            "alignItems": "center",
+            "backgroundColor": "#f50",
+            "justifyContent": "center",
+          },
+          undefined,
+        ]
+      }
+      underlayColor="#f50">
+      <Text
+        accessible={true}
+        allowFontScaling={false}
+        ellipsizeMode="tail"
+        style={
+          Array [
+            Object {
+              "color": "white",
+              "fontFamily": "Material Icons",
+              "fontSize": 24,
+              "fontStyle": "normal",
+              "fontWeight": "normal",
+            },
+            Array [
+              Object {
+                "backgroundColor": "transparent",
+              },
+              undefined,
+            ],
+          ]
+        }>
+        
+      </Text>
+    </TouchableHighlight>
+  </View>
+</View>
+`;

mobile/ReactNativeTutorial/app/bundles/comments/components/Add/Add.js

@@ -3,8 +3,7 @@ import React from 'react';
 import { View } from 'react-native';
 import { FormLabel, FormInput, Button } from 'react-native-elements';
 
-import withAddProps from '../../hocs/withAddProps';
-import type { AddPropsType } from '../../hocs/withAddProps';
+import type { AddPropsType } from '../../containers/Add';
 
 import styles from './AddStyle';
 
@@ -26,4 +25,4 @@ const Add = (props: PropsType) => (
   </View>
 );
 
-export default withAddProps(Add);
+export default Add;

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

@@ -3,29 +3,17 @@ import React from 'react';
 import { View } from 'react-native';
 import List from './List/List';
 import Footer from './Footer/Footer';
-import withIndexProps from '../../hocs/withIndexProps';
-import type { IndexPropsType } from '../../hocs/withIndexProps';
+import type { IndexPropsType } from '../../containers/Index';
 
 import styles from './IndexStyle';
 
 type PropsType = IndexPropsType;
 
-class Index extends React.Component {
+const Index = (props: PropsType) => (
+  <View style={styles.container}>
+    <List {...props} />
+    <Footer />
+  </View>
+);
 
-  props: PropsType;
-
-  componentDidMount() {
-    this.props.actions.fetch();
-  }
-
-  render() {
-    return (
-      <View style={styles.container}>
-        <List {...this.props} />
-        <Footer />
-      </View>
-    );
-  }
-}
-
-export default withIndexProps(Index);
+export default Index;

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

@@ -2,7 +2,7 @@
 import React from 'react';
 import { ListView, RefreshControl } from 'react-native';
 import _ from 'lodash/fp';
-import type { IndexPropsType } from '../../../hocs/withIndexProps';
+import type { IndexPropsType } from '../../../containers/Index';
 import Item from './Item/Item';
 
 import styles from './ListStyle';

mobile/ReactNativeTutorial/app/bundles/comments/hocs/withAddProps.js renamed to mobile/ReactNativeTutorial/app/bundles/comments/containers/Add.js

@@ -1,10 +1,12 @@
 // @flow
+import React from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 
 import commentFormSelector from '../../../selectors/commentFormSelector';
 import { actions } from '../sagas';
+import Add from '../components/Add/Add';
 
 export type AddPropsType = {
   author?: string,
@@ -25,5 +27,6 @@ const mapDispatchToProps = (dispatch: Function) => ({
   actions: bindActionCreators(actions, dispatch),
 });
 
-export default (Component: ReactClass<AddPropsType>): ReactClass<{}> =>
-  connect(mapStateToProps, mapDispatchToProps)(Component);
+const AddContainer = (props: AddPropsType) => <Add {...props} />;
+
+export default connect(mapStateToProps, mapDispatchToProps)(AddContainer);

mobile/ReactNativeTutorial/app/bundles/comments/hocs/withIndexProps.js renamed to mobile/ReactNativeTutorial/app/bundles/comments/containers/Index.js

@@ -1,11 +1,15 @@
+/* eslint-disable react/no-unused-prop-types */
 // @flow
+import React from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 
 import commentsStoreSelector from '../../../selectors/commentsStoreSelector';
 import { actions } from '../sagas';
 
+import Index from '../components/Index/Index';
+
 type CommentType = {
   author?: string,
   text?: string,
@@ -23,6 +27,19 @@ export type IndexPropsType = {
   }
 }
 
+class IndexContainer extends React.Component {
+
+  props: IndexPropsType;
+
+  componentDidMount() {
+    this.props.actions.fetch();
+  }
+
+  render() {
+    return <Index {...this.props} />;
+  }
+}
+
 const mapStateToProps = createSelector(
   commentsStoreSelector,
   (commentsStore: any) => ({
@@ -35,5 +52,4 @@ const mapDispatchToProps = (dispatch: Function) => ({
   actions: bindActionCreators(actions, dispatch),
 });
 
-export default (Component: ReactClass<IndexPropsType>): ReactClass<{}> =>
-  connect(mapStateToProps, mapDispatchToProps)(Component);
+export default connect(mapStateToProps, mapDispatchToProps)(IndexContainer);

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Scene, Router, Reducer } from 'react-native-router-flux';
-import Add from '../../bundles/comments/components/Add/Add';
-import Index from '../../bundles/comments/components/Index/Index';
+import Add from '../../bundles/comments/containers/Add';
+import Index from '../../bundles/comments/containers/Index';
 
 import styles from './RouterStyle';