Merge pull request #156 from gponsinet/feat/gponsinet/rn-relay-commun…

…ication

feat(rn): setup relay

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/.eslintrc

@@ -18,8 +18,7 @@
   "rules": {
     "no-console": "off",
     "linebreak-style": "off",
-    "comma-dangle": [
-      "off",
+    "comma-dangle": ["error",
       "always-multiline"
     ],
     "no-multi-spaces": "off",

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,30 +1,37 @@
 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: '',
   email: '',
-  phone: ''
+  phone: '',
 }
 
 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,18 +83,17 @@ 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({
   contactView: {
     marginTop: 50,
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'center',
   },
   input: {
     borderColor: 'gray',
@@ -82,10 +102,10 @@ const styles = StyleSheet.create({
     height: 30,
     fontSize: 20,
     marginTop: 5,
-    marginBottom: 30
+    marginBottom: 30,
   },
   label: {
     fontSize: 16,
     fontWeight: 'bold',
-  }
+  },
 })

client/react-native/common/components/Library/Grid.js

@@ -14,7 +14,7 @@ export const Block = ({
   <View
     style={[
       { flex, flexDirection, alignItems, alignSelf, justifyContent },
-      style
+      style,
     ]}
     {...props}
   >
@@ -51,5 +51,5 @@ export const Col = props => (
 
 export default {
   Row,
-  Col
+  Col,
 }

client/react-native/common/components/Library/Icon.js

@@ -11,7 +11,7 @@ const Icon = ({ name, color, rotate, style, ...props }: { name: String }) => {
     name
       .split('-')
       .splice(1)
-      .join('-')
+      .join('-'),
   ]
   const iconProps = {
     name: iconName,
@@ -20,12 +20,12 @@ const Icon = ({ name, color, rotate, style, ...props }: { name: String }) => {
       { color: color || colors.textGrey },
       rotate && {
         transform: [
-          { rotate: typeof rotate === 'boolean' ? '90deg' : `${rotate}deg` }
-        ]
+          { rotate: typeof rotate === 'boolean' ? '90deg' : `${rotate}deg` },
+        ],
       },
-      style
+      style,
     ],
-    ...props
+    ...props,
   }
   switch (type) {
     case 'feather':

client/react-native/common/components/Library/Menu.js

@@ -4,7 +4,7 @@ import {
   StyleSheet,
   ScrollView,
   View,
-  TouchableOpacity
+  TouchableOpacity,
 } from 'react-native'
 import { Separator, CustomTextInput, Icon, Text } from '.'
 import { Row, Col } from './Grid'
@@ -17,11 +17,11 @@ export default class Menu extends Component {
       style={[
         {
           width: '100%',
-          backgroundColor: 'transparent'
+          backgroundColor: 'transparent',
         },
         marginTop,
         !icon && !title && { marginTop: 32 },
-        style
+        style,
       ]}
     >
       <Row style={[marginTopLeft]}>
@@ -40,7 +40,7 @@ export default class Menu extends Component {
 
   static Item = class Item extends Component {
     state = {
-      delete: false
+      delete: false,
     }
 
     _delete = callback => () =>

client/react-native/common/components/Library/Screen.js

@@ -7,22 +7,22 @@ import { screen } from '../constants'
 
 export type ScreenState = {
   dimensions: { width: number, height: number },
-  orientation: 'portrait' | 'landscape'
+  orientation: 'portrait' | 'landscape',
 }
 
 export type ScreenProps = {
   absolute: boolean,
   style?: Object,
-  onResize?: ScreenState => any
+  onResize?: ScreenState => any,
 }
 
 export default class Screen extends Component<ScreenProps, ScreenState> {
   state = {
     dimensions: {
       width: screen.dimensions.width,
-      height: screen.dimensions.height
+      height: screen.dimensions.height,
     },
-    orientation: screen.orientation
+    orientation: screen.orientation,
   }
 
   _dimensions = screen.dimensions
@@ -39,7 +39,7 @@ export default class Screen extends Component<ScreenProps, ScreenState> {
       this.setState(
         {
           dimensions: { width, height },
-          orientation: width < height ? 'portrait' : 'landscape'
+          orientation: width < height ? 'portrait' : 'landscape',
         },
         () => {
           this.props.onResize && this.props.onResize(this.state)