React native app for crud on entries.

TODO: integrate aws cognito user pool.
https://github.com/aws/amazon-cognito-identity-js

Author: hansman

README.md

@@ -1,24 +1,29 @@
 # Graphql Lambda
 
-## Configure
-`cp config.example.json config.json`
+CRUD on an `Entry` object using aws lambdas triggered by API Gateway.
 
+## Configure
+`cp lambda/config.example.json lambda/config.json`
 
 ## Upload
-`zip -r ../graphqlAws.zip . && aws lambda update-function-code --function-name graphqlAws --zip-file fileb:///path/to/graphqlLambda.zip`
+`cd lambda && npm install && zip -r ../graphqlAws.zip . && aws lambda update-function-code --function-name graphqlAws --zip-file fileb:///path/to/graphqlLambda.zip`
 
 ## Query
 
 ### health
-`curl -v  -H "Content-Type: application/json" "https://exl1b1c7fk.execute-api.us-west-2.amazonaws.com/dev/graphalAws" -d '{"query": "{ health }"}'`
+`curl  -s -w \\n%{time_total}sec\\n -H "Content-Type: application/json" "https://exl1b1c7fk.execute-api.us-west-2.amazonaws.com/dev/graphalAws" -d '{"query": "{ health }"}'`
 ### add entry
-`curl -v  -H "Content-Type: application/json" "https://exl1b1c7fk.execute-api.us-west-2.amazonaws.com/dev/graphalAws" --data @queries/addEntry.json | json_pp'`
+`curl -v  -H "Content-Type: application/json" "https://exl1b1c7fk.execute-api.us-west-2.amazonaws.com/dev/graphalAws" --data @lambda/queries/addEntry.json | json_pp'`
 
 ### get entry
-`curl -v  -H "Content-Type: application/json" "https://exl1b1c7fk.execute-api.us-west-2.amazonaws.com/dev/graphalAws" --data @queries/getEntry.json | json_pp'`
+`curl -v  -H "Content-Type: application/json" "https://exl1b1c7fk.execute-api.us-west-2.amazonaws.com/dev/graphalAws" --data @lambda/queries/getEntry.json | json_pp'`
 
 ### get entries
-`curl -v  -H "Content-Type: application/json" "https://exl1b1c7fk.execute-api.us-west-2.amazonaws.com/dev/graphalAws" --data @queries/getEntries.json | json_pp`
+`curl -v -H "Content-Type: application/json" "https://exl1b1c7fk.execute-api.us-west-2.amazonaws.com/dev/graphalAws" --data @lambda/queries/getEntries.json | json_pp`
 
 ### drop entry
-`curl -v  -H "Content-Type: application/json" "https://exl1b1c7fk.execute-api.us-west-2.amazonaws.com/dev/graphalAws" --data @queries/dropEntry.json | json_pp'`
+`curl -v  -H "Content-Type: application/json" "https://exl1b1c7fk.execute-api.us-west-2.amazonaws.com/dev/graphalAws" --data @lambda/queries/dropEntry.json | json_pp'`
+
+## Launch App
+
+`cd client && npm install && react-native run-ios`

client/.gitignore

@@ -0,0 +1,42 @@
+# 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/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+
+# node.js
+#
+node_modules/
+npm-debug.log
+
+# BUCK
+buck-out/
+\.buckd/
+android/app/libs
+*.keystore

client/__tests__/__snapshots__/index.android.js.snap

@@ -0,0 +1,25 @@
+exports[`Android renders correctly 1`] = `
+<View
+  style={
+    Object {
+      "backgroundColor": "rgba(0, 0, 0, 0.1)",
+      "flex": 1,
+    }
+  }>
+  <View
+    style={
+      Object {
+        "alignItems": "center",
+        "flex": 1,
+        "justifyContent": "center",
+      }
+    }>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail">
+      Loading cards...
+    </Text>
+  </View>
+</View>
+`;

client/__tests__/__snapshots__/index.ios.js.snap

@@ -0,0 +1,25 @@
+exports[`iOS renders correctly 1`] = `
+<View
+  style={
+    Object {
+      "backgroundColor": "rgba(0, 0, 0, 0.1)",
+      "flex": 1,
+    }
+  }>
+  <View
+    style={
+      Object {
+        "alignItems": "center",
+        "flex": 1,
+        "justifyContent": "center",
+      }
+    }>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail">
+      Loading cards...
+    </Text>
+  </View>
+</View>
+`;

client/__tests__/index.android.js

@@ -0,0 +1,15 @@
+import 'react-native';
+import React from 'react';
+import Index from '../index.android.js';
+import renderer from 'react-test-renderer';
+
+describe('Android', () => {
+
+    it('renders correctly', () => {
+        const tree = renderer.create(
+            <Index />
+        ).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+});

client/__tests__/index.ios.js

@@ -0,0 +1,15 @@
+import 'react-native';
+import React from 'react';
+import Index from '../index.ios.js';
+import renderer from 'react-test-renderer';
+
+describe('iOS', () => {
+
+    it('renders correctly', () => {
+        const tree = renderer.create(
+            <Index />
+        ).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+});

client/__tests__/src/actions/EgressActions.spec.js

@@ -0,0 +1,27 @@
+import 'react-native';
+import React from 'react';
+const EgressActions = require('../../../src/actions/EgressActions');
+const StateTree = require('../../../src/stores/StateTree').default;
+const ImgurAdapter = require('../../../src/adapters/ImgurAdapter').default;
+
+describe('Egress Actions', () => {
+
+    beforeEach(() => {
+        ImgurAdapter.getCards = jest.fn();
+    });
+
+    it('can request cards', () => {
+        expect(StateTree.get(['fetch', 'pending'])).toBe(false);
+        EgressActions.requestCards();
+        expect(ImgurAdapter.getCards).toHaveBeenCalled();
+        expect(StateTree.get(['fetch', 'pending'])).toBe(true);
+    });
+
+    it('does not request cards if they are already being fetched', () => {
+        StateTree.set(['fetch', 'pending'], true);
+        EgressActions.requestCards();
+        expect(ImgurAdapter.getCards).not.toHaveBeenCalled();
+        expect(StateTree.get(['fetch', 'pending'])).toBe(true);
+    });
+
+});

client/__tests__/src/actions/IngressActions.spec.js

@@ -0,0 +1,54 @@
+import 'react-native';
+import React from 'react';
+const IngressActions = require('../../../src/actions/IngressActions');
+const StateTree = require('../../../src/stores/StateTree').default;
+
+const cards = [
+    {
+        link: 'http://example.com/1.webm',
+        size: 1,
+        'is_album': false
+    },
+    {
+        link: 'http://example.com/2.webm',
+        size: 1,
+        'is_album': true
+    },
+    {
+        link: 'http://example.com/3.webm',
+        size: Math.pow(2, 24),
+        'is_album': false
+    }
+];
+
+describe('Ingress Actions', () => {
+
+    it('can receive cards', () => {
+        StateTree.set(['fetch', 'pending'], true);
+        StateTree.set(['fetch', 'failed'], true);
+        StateTree.set(['page'], 1);
+
+        IngressActions.receiveCards(cards);
+
+        expect(StateTree.get(['fetch', 'pending'])).toBe(false);
+        expect(StateTree.get(['fetch', 'failed'])).toBe(false);
+        expect(StateTree.get('page')).toBe(2);
+        expect(StateTree.get('cards')).toEqual([{
+            index: 0,
+            key: 'card-1-0',
+            large: 'https://example.com/1.webm',
+            small: 'https://example.com/1m.webm',
+        }]);
+    });
+
+    it('can fail to receive cards', () => {
+        StateTree.set(['fetch', 'pending'], true);
+        StateTree.set(['fetch', 'failed'], false);
+
+        IngressActions.receiveCardsFailed();
+
+        expect(StateTree.get(['fetch', 'pending'])).toBe(false);
+        expect(StateTree.get(['fetch', 'failed'])).toBe(true);
+    });
+
+});

client/__tests__/src/components/Card.spec.js

@@ -0,0 +1,12 @@
+import 'react-native';
+import React from 'react';
+import Card from '../../../src/components/Card.react';
+
+import renderer from 'react-test-renderer';
+
+it('renders correctly', () => {
+    const tree = renderer.create(
+      <Card />
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+});

client/__tests__/src/components/Cards.spec.js

@@ -0,0 +1,55 @@
+import 'react-native';
+import React from 'react';
+import Cards from '../../../src/components/Cards.react';
+const StateTree = require('../../../src/stores/StateTree').default;
+const EgressActions = require('../../../src/actions/EgressActions');
+import { shallow } from 'enzyme';
+import SwipeCards from 'react-native-swipe-cards';
+import Loading from '../../../src/components/Loading.react';
+
+console.error = jest.fn();
+
+describe('Cards', () => {
+
+    beforeEach(() => {
+        EgressActions.requestCards = jest.fn();
+    });
+
+    it('can render loading screen', () => {
+        const context = {tree: StateTree};
+        const wrapper = shallow(<Cards />, { context });
+        expect(wrapper.render().find('text').text()).toEqual('Loading cards...');
+        expect(EgressActions.requestCards).toHaveBeenCalled();
+    });
+
+    it('can render card stack', () => {
+        const cards = [
+            {
+                index: 0,
+                key: 'card-1-0',
+                large: 'https://example.com/1.webm',
+                small: 'https://example.com/1m.webm',
+            },
+            {
+                index: 1,
+                key: 'card-1-1',
+                large: 'https://example.com/2.webm',
+                small: 'https://example.com/2m.webm',
+            },
+            {
+                index: 2,
+                key: 'card-1-2',
+                large: 'https://example.com/3.webm',
+                small: 'https://example.com/3m.webm',
+            }
+        ];
+
+        StateTree.set('cards', cards);
+        const context = {tree: StateTree};
+        const wrapper = shallow(<Cards />, { context });
+
+        expect(EgressActions.requestCards).not.toHaveBeenCalled();
+        expect(wrapper.render().find('image').length).toEqual(2);
+    });
+
+});

client/__tests__/src/components/__snapshots__/Card.spec.js.snap

@@ -0,0 +1,39 @@
+exports[`test renders correctly 1`] = `
+<View
+  style={
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "white",
+      "borderColor": "rgba(0, 0, 0, 0.2)",
+      "borderRadius": 4,
+      "borderWidth": 1,
+      "height": 1174,
+      "justifyContent": "center",
+      "marginLeft": 195,
+      "marginTop": 30,
+      "shadowColor": "rgba(0, 0, 0, 0.5)",
+      "shadowOffset": Object {
+        "height": 1,
+        "width": 2,
+      },
+      "shadowOpacity": 1,
+      "width": 360,
+    }
+  }>
+  <Image
+    onError={[Function]}
+    resizeMode="contain"
+    source={
+      Object {
+        "uri": "undefinedasdf",
+      }
+    }
+    style={
+      Object {
+        "borderRadius": 5,
+        "height": 320,
+        "width": 320,
+      }
+    } />
+</View>
+`;