feat(rn): add choose profile picture to account and chats settings

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

client/react-native/common/components/Screens/Chats/Settings.js

@@ -1,9 +1,10 @@
 import React, { PureComponent } from 'react'
 import { Image } from 'react-native'
-import { Screen, Menu, Header } from '../../Library'
+import { Screen, Menu, Header, Badge } from '../../Library'
 import { colors } from '../../../constants'
 import { conversation as utils } from '../../../utils'
 import { mutations } from '../../../graphql'
+import { choosePicture } from '../../../helpers/react-native-image-picker'
 
 export default class Settings extends PureComponent {
   static navigationOptions = ({ navigation }) => {
@@ -52,6 +53,9 @@ export default class Settings extends PureComponent {
     )
   }
 
+  onChoosePicture = async () =>
+    this.setState({ ...this.state, ...(await choosePicture()) })
+
   addMembers = async ({ contactsID }) => {
     try {
       const { id } = this.props.navigation.getParam('conversation')
@@ -74,15 +78,23 @@ export default class Settings extends PureComponent {
         <Menu absolute>
           <Menu.Header
             icon={
-              <Image
-                style={{ width: 78, height: 78, borderRadius: 39 }}
-                source={{
-                  uri:
-                    'https://api.adorable.io/avatars/285/' +
-                    conversation.id +
-                    '.png',
-                }}
-              />
+              <Badge
+                background={colors.blue}
+                icon={edit && 'camera'}
+                medium
+                onPress={this.onChoosePicture}
+              >
+                <Image
+                  style={{ width: 78, height: 78, borderRadius: 39 }}
+                  source={{
+                    uri:
+                      this.state.uri ||
+                      'https://api.adorable.io/avatars/285/' +
+                        conversation.id +
+                        '.png',
+                  }}
+                />
+              </Badge>
             }
             title={!edit && title}
             description={!edit && 'Conversation started 2 days ago'}

client/react-native/common/components/Screens/Settings/MyAccount.js

@@ -1,9 +1,10 @@
 import React, { PureComponent } from 'react'
 import { Image, ActivityIndicator } from 'react-native'
-import { Screen, Menu, Header, Text } from '../../Library'
+import { Screen, Menu, Header, Text, Badge } from '../../Library'
 import { colors } from '../../../constants'
 import { queries } from '../../../graphql'
 import { QueryReducer } from '../../../relay'
+import { choosePicture } from '../../../helpers/react-native-image-picker'
 
 export default class MyAccount extends PureComponent {
   static navigationOptions = ({ navigation }) => {
@@ -28,24 +29,39 @@ export default class MyAccount extends PureComponent {
     })
   }
 
+  state = {
+    uri: null,
+  }
+
+  onChoosePicture = async () => this.setState(await choosePicture())
+
   onSave = () => {
     this.setState({ edit: false }, () =>
       this.props.navigation.setParams({ state: this.state })
     )
   }
 
-  static Menu = ({ navigation, data }) => {
+  static Menu = ({ navigation, data, state, onChoosePicture }) => {
     const { id, displayName, overrideDisplayName } = data
     return (
       <Menu absolute>
         <Menu.Header
           icon={
-            <Image
-              style={{ width: 78, height: 78, borderRadius: 39 }}
-              source={{
-                uri: 'https://api.adorable.io/avatars/285/' + id + '.png',
-              }}
-            />
+            <Badge
+              background={colors.blue}
+              icon='camera'
+              medium
+              onPress={onChoosePicture}
+            >
+              <Image
+                style={{ width: 78, height: 78, borderRadius: 39 }}
+                source={{
+                  uri:
+                    state.uri ||
+                    `https://api.adorable.io/avatars/285/${id}.png`,
+                }}
+              />
+            </Badge>
           }
         />
         <Menu.Section title='Firstname'>
@@ -98,6 +114,8 @@ export default class MyAccount extends PureComponent {
                     data={state.data.ContactList.find(
                       _ => _.status === 'Myself'
                     )}
+                    state={this.state}
+                    onChoosePicture={this.onChoosePicture}
                   />
                 )
               case state.error:

client/react-native/common/helpers/react-native-image-picker.js

@@ -0,0 +1,25 @@
+import ImagePicker from 'react-native-image-picker'
+import { Alert } from 'react-native'
+
+export const defaultOptions = {
+  title: 'Select a picture',
+}
+
+export const choosePicture = (options = defaultOptions) =>
+  new Promise(resolve =>
+    ImagePicker.showImagePicker(this.imagePickerOptions, response => {
+      if (response.didCancel) {
+        resolve({ uri: response.uri, data: response.data })
+        return
+      }
+      if (response.error) {
+        Alert.alert('An unexpected error occured :(', response.error.toString())
+        console.error(response.error)
+        return
+      }
+      if (response.customButton) {
+        return
+      }
+      resolve({ uri: response.uri, data: response.data })
+    })
+  )