diff --git a/client/react-native/common/components/Screens/Chats/Settings.js b/client/react-native/common/components/Screens/Chats/Settings.js index 4817976be4..d9444f78f7 100644 --- a/client/react-native/common/components/Screens/Chats/Settings.js +++ b/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 { + + + } title={!edit && title} description={!edit && 'Conversation started 2 days ago'} diff --git a/client/react-native/common/components/Screens/Settings/MyAccount.js b/client/react-native/common/components/Screens/Settings/MyAccount.js index 61a062eb40..85f4ecddfc 100644 --- a/client/react-native/common/components/Screens/Settings/MyAccount.js +++ b/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 ( + + + } /> @@ -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: diff --git a/client/react-native/common/helpers/react-native-image-picker.js b/client/react-native/common/helpers/react-native-image-picker.js new file mode 100644 index 0000000000..1075f20ae3 --- /dev/null +++ b/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 }) + }) + )