flow

Author: alexeuler

mobile/ReactNativeTutorial/.eslintrc.yml

@@ -30,6 +30,7 @@
     no-console: 0
     import/imports-first: 2
     import/prefer-default-export: 2
+    no-duplicate-imports: 0
 
     # Delegating proptypes check to flow
     react/prop-types: 0

mobile/ReactNativeTutorial/.flowconfig

@@ -23,6 +23,12 @@
 .*/Libraries/react-native/React.js
 .*/Libraries/react-native/ReactNative.js
 .*/node_modules/jest-runtime/build/__tests__/.*
+.*/node_modules/react/node_modules/.*
+.*/node_modules/react-native-experimental-navigation/.*
+.*/node_modules/react-native/Libraries/Components/StaticContainer.js
+
+# Json lint doesn't pass flow
+.*/node_modules/jsonlint/.*
 
 [include]
 
@@ -48,8 +54,11 @@ suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
 suppress_type=$FixMe
 
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(3[0-3]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(3[0-3]\\|1[0-9]\\|[1-2][0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_type=$FlowIgnore
+suppress_comment=\\(.\\|\n\\)*\\$FlowIgnore
+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(3[0-2]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(3[0-2]\\|1[0-9]\\|[1-2][0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
 
 unsafe.enable_getters_and_setters=true

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

@@ -4,12 +4,11 @@ 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 styles from './AddStyle';
 
-type PropsType = {
-
-}
+type PropsType = AddPropsType;
 
 const Add = (props: PropsType) => (
   <View>

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

@@ -4,12 +4,11 @@ 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 styles from './IndexStyle';
 
-type PropsType = {
-
-}
+type PropsType = IndexPropsType;
 
 class Index extends React.Component {
 

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

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import { View, Text } from 'react-native';
 

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

@@ -2,12 +2,12 @@
 import React from 'react';
 import { ListView, RefreshControl } from 'react-native';
 import _ from 'lodash/fp';
+import type { IndexPropsType } from '../../../hocs/withIndexProps';
 import Item from './Item/Item';
 
 import styles from './ListStyle';
 
-type PropsType = {
-}
+type PropsType = IndexPropsType;
 
 const List = (props: PropsType) => {
   const data = _.compose(

mobile/ReactNativeTutorial/app/bundles/comments/hocs/withAddProps.js

@@ -6,6 +6,16 @@ import { createSelector } from 'reselect';
 import commentFormSelector from '../../../selectors/commentFormSelector';
 import { actions } from '../sagas';
 
+export type AddPropsType = {
+  author?: string,
+  text?: string,
+  actions: {
+    fetch: () => void,
+    updateForm: (payload: Object) => void,
+    createComment: (payload: Object) => void,
+  }
+}
+
 const mapStateToProps = createSelector(
   commentFormSelector,
   (commentForm: any) => commentForm.toJS()
@@ -15,5 +25,5 @@ const mapDispatchToProps = (dispatch: Function) => ({
   actions: bindActionCreators(actions, dispatch),
 });
 
-export default (Component: ReactClass<any>): ReactClass<{}> =>
+export default (Component: ReactClass<AddPropsType>): ReactClass<{}> =>
   connect(mapStateToProps, mapDispatchToProps)(Component);

mobile/ReactNativeTutorial/app/bundles/comments/hocs/withIndexProps.js

@@ -6,6 +6,23 @@ import { createSelector } from 'reselect';
 import commentsStoreSelector from '../../../selectors/commentsStoreSelector';
 import { actions } from '../sagas';
 
+type CommentType = {
+  author?: string,
+  text?: string,
+}
+
+export type IndexPropsType = {
+  comments: Array<CommentType>,
+  meta: {
+    loading: boolean,
+  },
+  actions: {
+    fetch: () => void,
+    updateForm: (payload: Object) => void,
+    createComment: (payload: Object) => void,
+  }
+}
+
 const mapStateToProps = createSelector(
   commentsStoreSelector,
   (commentsStore: any) => ({
@@ -18,5 +35,5 @@ const mapDispatchToProps = (dispatch: Function) => ({
   actions: bindActionCreators(actions, dispatch),
 });
 
-export default (Component: ReactClass<any>): ReactClass<{}> =>
+export default (Component: ReactClass<IndexPropsType>): ReactClass<{}> =>
   connect(mapStateToProps, mapDispatchToProps)(Component);

mobile/ReactNativeTutorial/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "start": "node node_modules/react-native/local-cli/cli.js start",
     "test": "jest",
-    "flow": "flow",
+    "flow": "node_modules/flow-bin/cli.js",
     "lint": "node_modules/eslint/bin/eslint.js --config .eslintrc.yml app"
   },
   "dependencies": {
@@ -37,6 +37,7 @@
     "eslint-plugin-jsx-a11y": "^2.2.3",
     "eslint-plugin-react": "^6.7.1",
     "eslint-plugin-react-native": "^2.1.0",
+    "flow-bin": "^0.33.0",
     "jest": "17.0.3",
     "jest-react-native": "17.0.3",
     "react-test-renderer": "15.3.2"