feat(rn): added contact detail screen and subscreens

client/react-native/common/components/Screens/Contacts/Detail.js

@@ -1,54 +1,82 @@
 import React, { PureComponent } from 'react'
-import { Menu } from '../../Library'
+import { Image, Share } from 'react-native'
+import { Menu, Header, Screen } from '../../Library'
 import { colors } from '../../../constants'
 
 export default class Detail extends PureComponent {
   static navigationOptions = ({ navigation }) => ({
-    tabBarVisible: false,
+    header: (
+      <Header
+        navigation={navigation}
+        title='Contact details'
+        rightBtnIcon={'edit-2'}
+        onPressRightBtn={() =>
+          navigation.push('contacts/detail/edit', {
+            contact: navigation.getParam('contact'),
+          })
+        }
+        backBtn
+      />
+    ),
   })
   render () {
+    const { navigation } = this.props
+    const contact = navigation.getParam('contact')
     return (
-      <Menu>
-        <Menu.Section customMarginTop={1}>
-          <Menu.Item
-            icon='message-circle'
-            title='Send a message'
-            onPress={() => console.log('Send')}
+      <Screen>
+        <Menu absolute>
+          <Menu.Header
+            icon={
+              <Image
+                style={{ width: 78, height: 78, borderRadius: 39 }}
+                source={{
+                  uri:
+                    'https://api.adorable.io/avatars/285/' +
+                    contact.id +
+                    '.png',
+                }}
+              />
+            }
+            title={contact.overrideDisplayName || contact.displayName}
           />
-          <Menu.Item
-            icon='phone'
-            title='Call'
-            onPress={() => console.log('Call')}
-          />
-        </Menu.Section>
-        <Menu.Section>
-          <Menu.Item
-            icon='eye'
-            title='View public key'
-            onPress={() => console.log('Public')}
-          />
-          <Menu.Item
-            icon='share'
-            title='Share this contact'
-            onPress={() => console.log('Share')}
-          />
-        </Menu.Section>
-        <Menu.Section>
-          <Menu.Item
-            icon='slash'
-            title='Block this contact'
-            onPress={() => console.log('Block')}
-          />
-        </Menu.Section>
-        <Menu.Section>
-          <Menu.Item
-            icon='trash-2'
-            title='Delete this contact'
-            color={colors.error}
-            onPress={() => console.log('Delete')}
-          />
-        </Menu.Section>
-      </Menu>
+          <Menu.Section>
+            <Menu.Item
+              icon='message-circle'
+              title='Send a message'
+              onPress={() => console.log('Send')}
+            />
+            <Menu.Item
+              icon='phone'
+              title='Call'
+              onPress={() => console.log('Call')}
+            />
+          </Menu.Section>
+          <Menu.Section>
+            <Menu.Item
+              icon='eye'
+              title='View public key'
+              onPress={() =>
+                navigation.push('contacts/detail/publickey', { id: contact.id })
+              }
+            />
+            <Menu.Item
+              icon='share'
+              title='Share this contact'
+              onPress={() =>
+                Share.share({ message: contact.id }).catch(() => null)
+              }
+            />
+          </Menu.Section>
+          <Menu.Section>
+            <Menu.Item
+              icon='slash'
+              title='Block this contact'
+              color={colors.error}
+              onPress={() => console.log('Block')}
+            />
+          </Menu.Section>
+        </Menu>
+      </Screen>
     )
   }
 }

client/react-native/common/components/Screens/Contacts/DetailPubKey.js

@@ -0,0 +1,70 @@
+import React, { PureComponent } from 'react'
+import { Clipboard } from 'react-native'
+import { colors } from '../../../constants'
+import {
+  Flex,
+  Screen,
+  Header,
+  Button,
+  TextInputMultilineFix,
+} from '../../Library'
+import {
+  padding,
+  paddingVertical,
+  textTiny,
+  marginTop,
+  rounded,
+} from '../../../styles'
+
+export default class DetailPublicKey extends PureComponent {
+  static navigationOptions = ({ navigation }) => ({
+    tabBarVisible: false,
+    header: <Header navigation={navigation} title='Public key' backBtn />,
+  })
+
+  render () {
+    const id = this.props.navigation.getParam('id')
+    return (
+      <Screen style={[{ backgroundColor: colors.white }, paddingVertical]}>
+        <Flex.Rows style={[padding]} align='center'>
+          <TextInputMultilineFix
+            style={[
+              {
+                width: 330,
+                height: 330,
+                backgroundColor: colors.grey7,
+                color: colors.black,
+                flexWrap: 'wrap',
+              },
+              textTiny,
+              padding,
+              marginTop,
+              rounded,
+            ]}
+            multiline
+            value={id}
+            selectTextOnFocus
+          />
+          <Flex.Cols align='start'>
+            <Flex.Rows>
+              <Button
+                icon='copy'
+                background={colors.blue}
+                margin
+                padding
+                rounded={23}
+                height={24}
+                medium
+                middle
+                center
+                onPress={() => Clipboard.setString(id)}
+              >
+                COPY THE KEY
+              </Button>
+            </Flex.Rows>
+          </Flex.Cols>
+        </Flex.Rows>
+      </Screen>
+    )
+  }
+}

client/react-native/common/components/Screens/Contacts/Edit.js

@@ -1,2 +1,70 @@
-const Edit = () => null
-export default Edit
+import React, { PureComponent } from 'react'
+import { Image } from 'react-native'
+import { Header, Menu, Badge } from '../../Library'
+import { colors } from '../../../constants'
+import { choosePicture } from '../../../helpers/react-native-image-picker'
+
+export default class Edit extends PureComponent {
+  static navigationOptions = ({ navigation }) => ({
+    header: (
+      <Header
+        navigation={navigation}
+        title='Contact details'
+        rightBtnIcon={'save'}
+        onPressRightBtn={() => console.log('Saved')}
+        backBtn
+      />
+    ),
+  })
+
+  state = {
+    uri: null,
+  }
+
+  onChoosePicture = async event => this.setState(await choosePicture(event))
+
+  render () {
+    const contact = this.props.navigation.getParam('contact')
+    return (
+      <Menu>
+        <Menu.Header
+          icon={
+            <Badge
+              background={colors.blue}
+              icon='camera'
+              medium
+              onPress={this.onChoosePicture}
+            >
+              <Image
+                style={{ width: 78, height: 78, borderRadius: 39 }}
+                source={{
+                  uri:
+                    this.state.uri ||
+                    `https://api.adorable.io/avatars/285/${contact.id}.png`,
+                }}
+              />
+            </Badge>
+          }
+        />
+        <Menu.Section title='Firstname'>
+          <Menu.Input
+            value={
+              (contact.overrideDisplayName || contact.displayName).split(
+                ' '
+              )[0] || ''
+            }
+          />
+        </Menu.Section>
+        <Menu.Section title='Lastname'>
+          <Menu.Input
+            value={
+              (contact.overrideDisplayName || contact.displayName).split(
+                ' '
+              )[1] || ''
+            }
+          />
+        </Menu.Section>
+      </Menu>
+    )
+  }
+}

client/react-native/common/components/Screens/Contacts/List.js

@@ -9,11 +9,19 @@ import { marginLeft, padding } from '../../../styles'
 const Item = fragments.Contact(
   ({
     data: { id, overrideDisplayName, displayName, displayStatus },
-    onPress,
+    navigation,
   }) => (
     <Flex.Cols
       align='center'
-      onPress={onPress}
+      onPress={() => {
+        navigation.push('contacts/detail', {
+          contact: {
+            id,
+            overrideDisplayName,
+            displayName,
+          },
+        })
+      }}
       style={[{ height: 72 }, padding]}
     >
       <Flex.Rows size={1} align='center'>
@@ -60,8 +68,6 @@ const List = fragments.ContactList(
       this.subscribers.forEach(subscriber => subscriber.unsubscribe())
     }
 
-    onPressItem = id => () =>
-      this.props.navigation.push('contacts/detail', { id })
     keyExtractor = item => item.node.id
 
     render () {
@@ -78,7 +84,7 @@ const List = fragments.ContactList(
           onEndReached={this.onEndReached}
           keyExtractor={this.props.keyExtractor}
           renderItem={({ item: { node, cursor } }) => (
-            <Item data={node} onPress={this.onPressItem(node.id)} />
+            <Item data={node} navigation={this.props.navigation} />
           )}
         />
       )

client/react-native/common/components/Screens/Contacts/index.js

@@ -1,15 +1,17 @@
 import { createSubStackNavigator } from '../../../helpers/react-navigation'
+import List from './List'
 import Add from './Add'
 import Detail from './Detail'
 import Edit from './Edit'
-import List from './List'
+import DetailPubKey from './DetailPubKey'
 
 export default createSubStackNavigator(
   {
     'contacts/list': List,
     'contacts/add': Add,
     'contacts/detail': Detail,
-    'contacts/edit': Edit,
+    'contacts/detail/edit': Edit,
+    'contacts/detail/publickey': DetailPubKey,
   },
   {
     initialRouteName: 'contacts/list',

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

@@ -16,8 +16,8 @@ export default class MyAccount extends PureComponent {
           navigation={navigation}
           title='My account'
           rightBtnIcon={'save'}
-          backBtn
           onPressRightBtn={onSave}
+          backBtn
         />
       ),
     }

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

@@ -1,13 +1,13 @@
 import { createSubStackNavigator } from '../../../../helpers/react-navigation'
 import MyAccount from './MyAccount'
-import MyPublicKey from './MyPublicKey'
 import MyQRCode from './MyQRCode'
+import MyPublicKey from './MyPublicKey'
 
 export default createSubStackNavigator(
   {
     'my-account/list': MyAccount,
-    'my-account/my-qrcode': MyPublicKey,
-    'my-account/my-publickey': MyQRCode,
+    'my-account/my-qrcode': MyQRCode,
+    'my-account/my-publickey': MyPublicKey,
   },
   {
     initialRouteName: 'my-account/list',