feat(rn): setup relay

Signed-off-by: Godefroy Ponsinet <godefroy.ponsinet@outlook.com>

client/react-native/.babelrc

@@ -1,6 +1,8 @@
 {
   "presets": ["react-native", "react-app"],
   "plugins": [
+    "relay",
+
     "@babel/plugin-proposal-function-bind",
 
     "@babel/plugin-proposal-export-default-from",

client/react-native/common/components/App.js

@@ -3,8 +3,6 @@ import { ContactRequest } from './Forms'
 
 export default class App extends Component {
   render = () => {
-    return (
-      <ContactRequest />
-    )
+    return <ContactRequest />
   }
 }

client/react-native/common/components/Forms/ContactRequest.js

@@ -1,12 +1,7 @@
 import React, { Component } from 'react'
-import {
-  TextInput,
-  Text,
-  View,
-  Button,
-  Alert,
-  StyleSheet
-} from 'react-native'
+import { TextInput, Text, View, Button, Alert, StyleSheet } from 'react-native'
+import { graphql, commitMutation } from 'react-relay'
+import environment from '../../relay.js'
 
 var fields = {
   id: '',
@@ -18,13 +13,25 @@ export default class ContactRequest extends Component {
   render = () => {
     return (
       <View style={styles.contactView}>
-        <Input label='Berty ID' placeholder='Please enter a Berty ID ...' type='username' state='id' />
-        <Input label='Email address' placeholder='Please enter an email address ...'  type='emailAddress' state='email' />
-        <Input label='Phone number' placeholder='Please enter a phone number ...'  type='telephoneNumber' state='phone' />
-        <Button
-          title='Request'
-          onPress={handleRequestButton}
+        <Input
+          label='Berty ID'
+          placeholder='Please enter a Berty ID ...'
+          type='username'
+          state='id'
         />
+        <Input
+          label='Email address'
+          placeholder='Please enter an email address ...'
+          type='emailAddress'
+          state='email'
+        />
+        <Input
+          label='Phone number'
+          placeholder='Please enter a phone number ...'
+          type='telephoneNumber'
+          state='phone'
+        />
+        <Button title='Request' onPress={handleRequestButton} />
       </View>
     )
   }
@@ -34,13 +41,11 @@ class Input extends Component {
   render = () => {
     return (
       <View>
-        <Text
-          style={styles.label}
-        >
-          {this.props.label}
-        </Text>
+        <Text style={styles.label}>{this.props.label}</Text>
         <TextInput
-          onChangeText={(text) => { fields[this.props.state] = text }}
+          onChangeText={text => {
+            fields[this.props.state] = text
+          }}
           style={styles.input}
           placeholder={this.props.placeholder}
           textContentType={this.props.type}
@@ -50,9 +55,25 @@ class Input extends Component {
   }
 }
 
+const mutation = graphql`
+  mutation ContactRequestMutation($id: String) {
+    ContactRequest(id: $id) {
+      id
+    }
+  }
+`
+
+const commit = (variables = {}) =>
+  commitMutation(environment, {
+    mutation,
+    variables,
+    onCompleted: (res, errs) =>
+      console.log('Response receive from server.', res, errs),
+    onError: err => console.error(err)
+  })
+
 function handleRequestButton () {
-  let body =
-  `
+  let body = `
     Contact request sent:
     Berty ID = ${fields['id']}
     Email Adress = ${fields['email']}
@@ -62,11 +83,10 @@ function handleRequestButton () {
   Alert.alert(
     'Request',
     body,
-    [
-      {text: 'OK', onPress: () => console.log('OK Pressed')},
-    ],
+    [{ text: 'OK', onPress: () => console.log('OK Pressed') }],
     { cancelable: false }
   )
+  commit({ id: fields['id'] })
 }
 
 const styles = StyleSheet.create({
@@ -86,6 +106,6 @@ const styles = StyleSheet.create({
   },
   label: {
     fontSize: 16,
-    fontWeight: 'bold',
+    fontWeight: 'bold'
   }
 })

client/react-native/common/index.js

@@ -2,7 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import { Platform, AppRegistry } from 'react-native'
 import App from './components/App'
-import webServiceWorker from '../web/src/registerServiceWorker'
+import webServiceWorker from '../web/registerServiceWorker'
 
 if (Platform.OS === 'web') {
   ReactDOM.render(<App />, document.getElementById('root'))

client/react-native/common/relay.js

@@ -0,0 +1,35 @@
+import { Environment, Network, RecordSource, Store } from 'relay-runtime'
+import fetch from 'isomorphic-fetch'
+
+// Define a function that fetches the results of an operation (query/mutation/etc)
+// and returns its results as a Promise:
+const fetchQuery = async (operation, variables) => {
+  try {
+    const response = await fetch('http://localhost:8700/graphql', {
+      method: 'POST',
+      headers: {
+        // Add authentication and other headers here
+        'content-type': 'application/json'
+      },
+      body: JSON.stringify({
+        query: operation.text, // GraphQL text from input
+        variables
+      })
+    })
+    return response.json()
+  } catch (err) {
+    console.error(err)
+  }
+}
+
+// Create a network layer from the fetch function
+const network = Network.create(fetchQuery)
+const store = new Store(new RecordSource())
+
+const environment = new Environment({
+  network,
+  store
+  // ... other options
+})
+
+export default environment