set up client with gql, type gen and router

client/.gitignore

@@ -54,4 +54,7 @@ buck-out/
 # Tests
 
 .jest/
-coverage/
+coverage/
+
+# ENV
+src/config/development.env.json

client/app.json

@@ -1,4 +1,4 @@
 {
-  "name": "example",
-  "displayName": "example"
+  "name": "onefraction",
+  "displayName": "OneFraction"
 }

client/codegen.yml

@@ -0,0 +1,13 @@
+overwrite: true
+schema: 'http://localhost:4000/graphql'
+documents: src/**/*.{graphql,ts,tsx}
+generates:
+  src/generated/graphql.tsx:
+    plugins:
+      - 'typescript'
+      - 'typescript-operations'
+      - 'typescript-react-apollo'
+    config:
+      withHOC: false
+      withComponent: false
+      withHooks: true

client/package.json

@@ -3,30 +3,54 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
+    "start": "react-scripts start",
     "web": "react-scripts start",
     "build": "react-scripts build",
     "ios": "react-native run-ios",
     "android": "react-native run-android",
     "test": "jest --coverage",
     "watch": "jest --watch",
+    "gen:types": "graphql-codegen --config codegen.yml",
+    "gen:types:watch": "yarn gen:types --watch",
     "lint": "tsc && tslint --fix -p tsconfig.json -c tslint.json",
+    "precommit": "pretty-quick --staged",
     "reset": "watchman watch-del-all; rm -rf /tmp/metro-bundler-cache-*; rm -rf ./android/build; rm -rf ./android/.gradle; rm -rf ./android/app/build; rm -rf ~/Library/Developer/Xcode/DerivedData; rm -rf /tmp/haste-map-react-native-packager-*; rm -rf ./ios/build; yarn install; pod install --project-directory=ios; react-native start --reset-cache"
   },
   "dependencies": {
+    "@accounts/apollo-link": "^0.15.0",
+    "@accounts/client": "^0.15.0",
+    "@accounts/client-password": "^0.15.0",
+    "@accounts/graphql-client": "^0.15.0",
+    "apollo-boost": "^0.4.0",
+    "graphql": "^14.3.1",
+    "graphql-tools": "^4.0.4",
     "react": "16.8.6",
+    "react-apollo": "^2.5.6",
+    "react-apollo-hooks": "^0.4.5",
     "react-dom": "16.8.6",
     "react-native": "0.59.5",
     "react-native-web": "0.11.2",
-    "react-scripts": "3.0.0"
+    "react-router-dom": "^5.0.0",
+    "react-router-native": "^5.0.0",
+    "react-scripts": "3.0.0",
+    "styled-components": "^4.2.1"
   },
   "devDependencies": {
+    "@graphql-codegen/cli": "^1.2.0",
+    "@graphql-codegen/typescript": "^1.2.0",
+    "@graphql-codegen/typescript-operations": "^1.2.0",
+    "@graphql-codegen/typescript-react-apollo": "^1.2.0",
     "@types/jest": "24.0.12",
     "@types/react": "16.8.15",
     "@types/react-native": "0.57.51",
+    "@types/react-router-dom": "^4.3.3",
+    "@types/react-router-native": "^4.2.4",
     "@types/react-test-renderer": "16.8.1",
     "babel-jest": "24.7.1",
+    "husky": "^2.3.0",
     "jest": "24.7.1",
-    "prettier": "1.17.0",
+    "prettier": "^1.17.1",
+    "pretty-quick": "^1.11.0",
     "react-art": "16.8.6",
     "react-test-renderer": "16.8.6",
     "ts-jest": "24.0.2",
@@ -70,5 +94,10 @@
     "not dead",
     "not ie <= 11",
     "not op_mini all"
-  ]
+  ],
+  "husky": {
+    "hooks": {
+      "pre-commit": "pretty-quick --staged"
+    }
+  }
 }

client/src/components/App/App.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react'
+import { ApolloProvider } from 'react-apollo'
+import { ApolloProvider as ApolloHooksProvider } from 'react-apollo-hooks'
+import Router from '../Router'
+import { client } from '../../utils/apollo'
+
+const App = () => {
+  return (
+    <ApolloProvider client={client}>
+      <ApolloHooksProvider client={client}>
+        <Router />
+      </ApolloHooksProvider>
+    </ApolloProvider>
+  )
+}
+
+export default App

client/src/components/App/index.tsx

@@ -0,0 +1 @@
+export { default } from './App'

client/src/components/Router/Router.tsx

@@ -0,0 +1,5 @@
+import { NativeRouter, Route as NativeRoute, Link as NativeLink } from 'react-router-native'
+
+export let Router = NativeRouter
+export let Route = NativeRoute
+export let Link = NativeLink

client/src/components/Router/Router.web.tsx

@@ -0,0 +1,5 @@
+import { BrowserRouter, Route as WebRoute, Link as WebLink } from 'react-router-dom'
+
+export let Router = BrowserRouter
+export let Route = WebRoute
+export let Link = WebLink

client/src/components/Router/index.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react'
+import { View, Text, StyleSheet } from 'react-native'
+import { Router, Route, Link } from './Router'
+
+const Home = () => <Text>Home</Text>
+const About = () => <Text>About</Text>
+
+export default () => {
+  return (
+    <Router>
+      <View style={styles.container}>
+        <View style={styles.nav}>
+          <Link to="/">
+            <Text>Home</Text>
+          </Link>
+          <Link to="/about">
+            <Text>About</Text>
+          </Link>
+        </View>
+
+        <Route exact path="/" component={Home} />
+        <Route path="/about" component={About} />
+      </View>
+    </Router>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    backgroundColor: '#F5FCFF',
+    flex: 1,
+    justifyContent: 'center',
+  },
+  nav: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+  },
+})

client/src/index.tsx

@@ -1,24 +1,6 @@
-// app entry
-import * as React from 'react'
-import { AppRegistry, Platform, SafeAreaView, StyleSheet, Text } from 'react-native'
-import { Config } from './utils/Config'
-
-export const App = () => {
-  return (
-    <SafeAreaView style={styles.container}>
-      <Text>DERP</Text>
-    </SafeAreaView>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
-    flex: 1,
-    justifyContent: 'center',
-  },
-})
+import { AppRegistry, Platform } from 'react-native'
+import App from './components/App'
+import { Config } from './utils/config'
 
 // register the app
 AppRegistry.registerComponent(Config.app.name, () => App)

client/src/utils/apollo.ts

@@ -0,0 +1,35 @@
+import { ApolloClient } from 'apollo-client'
+import { ApolloLink } from 'apollo-link'
+import { createHttpLink } from 'apollo-link-http'
+import { InMemoryCache } from 'apollo-cache-inmemory'
+import { AccountsGraphQLClient } from '@accounts/graphql-client'
+import { AccountsClientPassword } from '@accounts/client-password'
+import { AccountsClient } from '@accounts/client'
+import { accountsLink } from '@accounts/apollo-link'
+import { GRAPHQL_URL } from './env'
+
+const httpLink = createHttpLink({
+  uri: GRAPHQL_URL,
+})
+
+const cache = new InMemoryCache()
+
+// accounts js
+export const graphQLApolloClient = new ApolloClient({
+  link: ApolloLink.from([httpLink]),
+  cache,
+})
+
+export const accountsGraphQL = new AccountsGraphQLClient({
+  graphQLClient: graphQLApolloClient,
+})
+export const accounts = new AccountsClient({}, accountsGraphQL)
+export const accountsPassword = new AccountsClientPassword(accounts)
+
+// regular apollo client
+const authLink = accountsLink(() => accounts)
+
+export const client = new ApolloClient({
+  link: ApolloLink.from([authLink, httpLink]),
+  cache,
+})

client/src/utils/env.ts

@@ -0,0 +1,25 @@
+interface ENV {
+  NODE_ENV: string
+  GRAPHQL_URL: string
+}
+
+function getEnvVars(env = '', envVars: any): ENV {
+  if (env.indexOf('development') !== -1) return envVars.dev
+  if (env.indexOf('staging') !== -1) return envVars.staging
+  if (env.indexOf('prod') !== -1) return envVars.prod
+  return envVars.dev
+}
+
+const dev = require('../config/development.env.json')
+const env = getEnvVars(process.env.NODE_ENV, {
+  dev,
+  // staging: {
+  //
+  // },
+  // prod: {
+  //
+  // }
+})
+
+export const NODE_ENV = env.NODE_ENV
+export const GRAPHQL_URL = env.GRAPHQL_URL