React native tutorial

mobile/ReactNativeTutorial/.babelrc

@@ -0,0 +1,3 @@
+{
+"presets": ["react-native"]
+}

mobile/ReactNativeTutorial/.buckconfig

@@ -0,0 +1,6 @@
+
+[android]
+  target = Google Inc.:Google APIs:23
+
+[maven_repositories]
+  central = https://repo1.maven.org/maven2

mobile/ReactNativeTutorial/.eslintignore

@@ -0,0 +1,4 @@
+node_modules
+ios
+android
+.git

mobile/ReactNativeTutorial/.eslintrc.yml

@@ -0,0 +1,63 @@
+---
+  extends:
+    - "eslint-config-shakacode"
+  plugins:
+    - "react-native"
+    - "flowtype"
+
+  env:
+    node: true
+  settings:
+    import/resolver:
+      node:
+        extensions:
+          - ".js"
+          - ".android.js"
+          - ".ios.js"
+        moduleDirectory:
+          - "."
+          - "node_modules"
+    flowtype:
+      onlyFilesWithFlowAnnotation: true
+  globals:
+    __DEV__: true
+    ReactClass: true
+    ReactElement: true
+    fetch: true
+  rules:
+    new-cap: 0
+    react/sort-comp: 0
+    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
+
+    react-native/no-unused-styles: 2
+    react-native/split-platform-components: 2
+    react-native/no-inline-styles: 2
+    react-native/no-color-literals: 2
+
+    react/jsx-filename-extension:
+      - 1
+      - extensions: [".js", ".jsx"]
+
+    flowtype/require-parameter-type: 1
+    flowtype/require-return-type:
+      - 0
+      - "always"
+      - annotateUndefined: "never"
+    flowtype/require-valid-file-annotation:
+      - 2
+      - "always"
+    flowtype/space-after-type-colon:
+      - 2
+      - "always"
+    flowtype/space-before-type-colon:
+      - 2
+      - "never"
+    flowtype/type-id-match:
+      - 2
+      - "^([A-Z][a-z0-9]+)+Type$"

mobile/ReactNativeTutorial/.flowconfig

@@ -0,0 +1,67 @@
+[ignore]
+
+# We fork some components by platform.
+.*/*[.]android.js
+
+# Ignore templates with `@flow` in header
+.*/local-cli/generator.*
+
+# Ignore malformed json
+.*/node_modules/y18n/test/.*\.json
+
+# Ignore the website subdir
+<PROJECT_ROOT>/website/.*
+
+# Ignore BUCK generated dirs
+<PROJECT_ROOT>/\.buckd/
+
+# Ignore unexpected extra @providesModule
+.*/node_modules/commoner/test/source/widget/share.js
+
+# Ignore duplicate module providers
+# For RN Apps installed via npm, "Libraries" folder is inside node_modules/react-native but in the source repo it is in the root
+.*/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]
+
+[libs]
+node_modules/react-native/Libraries/react-native/react-native-interface.js
+node_modules/react-native/flow
+flow/
+
+[options]
+module.system=haste
+
+esproposal.class_static_fields=enable
+esproposal.class_instance_fields=enable
+
+experimental.strict_type_args=true
+
+munge_underscores=true
+
+module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub'
+module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
+
+suppress_type=$FlowIssue
+suppress_type=$FlowFixMe
+suppress_type=$FixMe
+
+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
+
+[version]
+^0.33.0

mobile/ReactNativeTutorial/.gitignore

@@ -0,0 +1,41 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+
+# Android/IJ
+#
+*.iml
+.idea
+.gradle
+local.properties
+
+# node.js
+#
+node_modules/
+npm-debug.log
+
+# BUCK
+buck-out/
+\.buckd/
+android/app/libs
+android/keystores/debug.keystore

mobile/ReactNativeTutorial/.jest.js

@@ -0,0 +1,19 @@
+// Mocking the global.fetch included in React Native
+global.fetch = jest.fn();
+
+// Helper to mock a success response (only once)
+fetch.mockResponseSuccess = (body) => {
+  fetch.mockImplementationOnce (
+    () => Promise.resolve({
+      json: () => Promise.resolve(body),
+      text: () => Promise.resolve(JSON.stringify(body)),
+    })
+  );
+};
+
+// Helper to mock a failure response (only once)
+fetch.mockResponseFailure = (error) => {
+  fetch.mockImplementationOnce(
+    () => Promise.reject(error)
+  );
+};

mobile/ReactNativeTutorial/.watchmanconfig

@@ -0,0 +1 @@
+{}

mobile/ReactNativeTutorial/__mocks__/redux-mock-store.js

@@ -0,0 +1,13 @@
+import { applyMiddleware } from 'redux';
+import configureMockStore from 'redux-mock-store';
+import createSagaMiddleware from 'redux-saga';
+
+import { initialState } from 'ReactNativeTutorial/app/reducers';
+import appSaga from 'ReactNativeTutorial/app/setup/sagas';
+
+const sagaMiddleware = createSagaMiddleware();
+const mockStore = configureMockStore([sagaMiddleware]);
+const store = mockStore(initialState);
+sagaMiddleware.run(appSaga);
+
+export default store;

mobile/ReactNativeTutorial/__tests__/bundles/comments/__snapshots__/sagas.js.snap

@@ -0,0 +1,11 @@
+exports[`fetch fetches comments from remote api 1`] = `
+Array [
+  Object {
+    "type": "SAGA:COMMENTS:FETCH",
+  },
+  Object {
+    "loading": true,
+    "type": "COMMENTS_STORE:SET_LOADING",
+  },
+]
+`;

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import Add from 'ReactNativeTutorial/app/bundles/comments/components/Add/Add';
+
+import renderer from 'react-test-renderer';
+
+const actions = {
+  fetch: jest.fn(),
+  updateForm: jest.fn(),
+  createComment: jest.fn(),
+};
+
+describe('Add', () => {
+  it('renders correctly', () => {
+    const props = {
+      author: 'Alexey',
+      text: 'Some random comment',
+      actions,
+    };
+    const tree = renderer.create(
+      <Add {...props} />
+    );
+    expect(tree).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import Index from 'ReactNativeTutorial/app/bundles/comments/components/Index/Index';
+
+import renderer from 'react-test-renderer';
+
+const actions = {
+    fetch: jest.fn(),
+    updateForm: jest.fn(),
+    createComment: jest.fn(),
+};
+
+describe('Index', () => {
+  it('renders correctly when loaded', () => {
+    const props = {
+      comments: [
+        { id: 1, author: 'Alexey', text: 'Just some random comment' },
+        { id: 2, author: 'Justin', text: 'Another random comment' },
+      ],
+      meta: {
+        loading: false,
+      },
+      actions,
+    };
+    const tree = renderer.create(
+      <Index {...props} />
+    );
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders correctly when loading', () => {
+    const props = {
+      meta: {
+        loading: true,
+      },
+      actions,
+    };
+    const tree = renderer.create(
+      <Index {...props} />
+    );
+    expect(tree).toMatchSnapshot();
+  });
+});
+