fix: contact modal card via relay id and deep link fixes

Signed-off-by: Godefroy Ponsinet <godefroy.ponsinet@outlook.com>
berty · Feb 21, 2019 · c05865e · c05865e
1 parent 3b3fcf1
commit c05865e
Show file tree

Hide file tree

Showing 10 changed files with 190 additions and 146 deletions.
diff --git a/client/react-native/common/components/App.js b/client/react-native/common/components/App.js
@@ -9,7 +9,7 @@ import ReactNativeLanguages from 'react-native-languages'
 
 import { BASE_WEBSITE_URL, colors } from './../constants'
 import { Flex, Animation } from './Library'
-import { conversation } from '../utils'
+import { contact, conversation } from '../utils'
 import { parse as parseUrl } from '../helpers/url'
 import Accounts from './Screens/Accounts'
 import Instabug from '../helpers/Instabug'
@@ -96,6 +96,9 @@ export default class App extends PureComponent {
         })
         break
       case '/modal/contacts/card':
+        if (url.hashParts['id']) {
+          url.hashParts['id'] = contact.getRelayID(url.hashParts['id'])
+        }
         this.setState({
           deepLink: {
             routeName: 'modal/contacts/card',

diff --git a/client/react-native/common/components/Library/ContactIdentity.js b/client/react-native/common/components/Library/ContactIdentity.js
@@ -1,60 +1,71 @@
-import React from 'react'
 import { View, Platform, Text as RNText } from 'react-native'
-import { Avatar, Text } from '.'
 import { createMaterialTopTabNavigator } from 'react-navigation'
-import QRGenerator from './QRGenerator'
-import { makeShareableUrl } from '../../helpers/contacts'
-import colors from '../../constants/colors'
+import I18n from 'i18next'
+import React from 'react'
+
+import { Avatar, Text } from '.'
+import { contact } from '../../utils'
 import { formattedFingerprint } from '../../helpers/fingerprint'
+import { makeShareableUrl } from '../../helpers/contacts'
+import { monospaceFont, tabNavigatorOptions } from '../../constants/styling'
 import { padding } from '../../styles'
 import { tabIcon, withScreenProps } from '../../helpers/views'
-import { monospaceFont, tabNavigatorOptions } from '../../constants/styling'
-import I18n from 'i18next'
+import QRGenerator from './QRGenerator'
+import colors from '../../constants/colors'
 
-const PublicKey = ({ data: { id } }) => <View
-  style={[{ flexDirection: 'row', justifyContent: 'center' }, padding]}>
-  <RNText style={{
-    textAlign: 'left',
-    width: 248,
-    height: 248,
-    backgroundColor: colors.inputGrey,
-    color: colors.fakeBlack,
-    borderRadius: 8,
-    flexWrap: 'wrap',
-    fontFamily: monospaceFont,
-    padding: 8,
-  }}>{id}</RNText>
-</View>
+const PublicKey = ({ data: { id } }) => (
+  <View style={[{ flexDirection: 'row', justifyContent: 'center' }, padding]}>
+    <RNText
+      style={{
+        textAlign: 'left',
+        width: 248,
+        height: 248,
+        backgroundColor: colors.inputGrey,
+        color: colors.fakeBlack,
+        borderRadius: 8,
+        flexWrap: 'wrap',
+        fontFamily: monospaceFont,
+        padding: 8,
+      }}
+    >
+      {contact.getCoreID(id)}
+    </RNText>
+  </View>
+)
 
-const QrCode = ({ data: { id, displayName } }) => <View
-  style={[{ flexDirection: 'row', justifyContent: 'center' }]}>
-  <QRGenerator
-    value={makeShareableUrl({ id, displayName })}
-    size={248}
-    style={[{ marginTop: 16, marginBottom: 16 }]}
-  />
-</View>
+const QrCode = ({ data: { id, displayName } }) => (
+  <View style={[{ flexDirection: 'row', justifyContent: 'center' }]}>
+    <QRGenerator
+      value={makeShareableUrl({ id, displayName })}
+      size={248}
+      style={[{ marginTop: 16, marginBottom: 16 }]}
+    />
+  </View>
+)
 
-const Fingerprint = ({ data: { id } }) => <View
-  style={[{ flexDirection: 'row', justifyContent: 'center' }, padding]}>
-  <RNText style={{
-    textAlign: 'center',
-    width: 248,
-    backgroundColor: colors.blue25,
-    color: colors.blue,
-    borderRadius: 8,
-    flexWrap: 'wrap',
-    fontSize: 18,
-    fontFamily: monospaceFont,
-    padding: 8,
-  }}>
-    {formattedFingerprint(id)}
-  </RNText>
-</View>
+const Fingerprint = ({ data: { id } }) => (
+  <View style={[{ flexDirection: 'row', justifyContent: 'center' }, padding]}>
+    <RNText
+      style={{
+        textAlign: 'center',
+        width: 248,
+        backgroundColor: colors.blue25,
+        color: colors.blue,
+        borderRadius: 8,
+        flexWrap: 'wrap',
+        fontSize: 18,
+        fontFamily: monospaceFont,
+        padding: 8,
+      }}
+    >
+      {formattedFingerprint(id)}
+    </RNText>
+  </View>
+)
 
 const ContactIdentityTabbedContent = createMaterialTopTabNavigator(
   {
-    'qrcode': {
+    qrcode: {
       screen: withScreenProps(QrCode),
       navigationOptions: () => ({
         title: I18n.t('qrcode'),
@@ -68,7 +79,7 @@ const ContactIdentityTabbedContent = createMaterialTopTabNavigator(
         tabBarIcon: tabIcon('material-key-variant'),
       }),
     },
-    'fingerprint': {
+    fingerprint: {
       screen: withScreenProps(Fingerprint),
       navigationOptions: () => ({
         title: I18n.t('fingerprint'),
@@ -79,19 +90,29 @@ const ContactIdentityTabbedContent = createMaterialTopTabNavigator(
   {
     initialRouteName: 'qrcode',
     ...tabNavigatorOptions,
-  },
+  }
 )
 
-const ContactIdentity = ({ data }) => <>
-  <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
-    <Avatar data={data} size={78} style={{ marginTop: 0 }} />
-  </View>
-  <Text large color={colors.fakeBlack} center padding>{data.displayName}</Text>
-  <View
-    style={{ marginLeft: 15, marginRight: 15, marginBottom: 8, height: Platform.OS === 'android' ? 350 : undefined }}>
-    {<ContactIdentityTabbedContent screenProps={{ data }} />}
-  </View>
-</>
+const ContactIdentity = ({ data }) => (
+  <>
+    <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
+      <Avatar data={data} size={78} style={{ marginTop: 0 }} />
+    </View>
+    <Text large color={colors.fakeBlack} center padding>
+      {data.displayName}
+    </Text>
+    <View
+      style={{
+        marginLeft: 15,
+        marginRight: 15,
+        marginBottom: 8,
+        height: Platform.OS === 'android' ? 350 : undefined,
+      }}
+    >
+      {<ContactIdentityTabbedContent screenProps={{ data }} />}
+    </View>
+  </>
+)
 
 export default ContactIdentity
 ContactIdentity.QrCode = QrCode
diff --git a/client/react-native/common/components/Library/ContactIdentityActions/index.js b/client/react-native/common/components/Library/ContactIdentityActions/index.js
@@ -1,47 +1,43 @@
 import React from 'react'
-import { WithContact } from '../../../utils/contact'
 import { enums } from '../../../graphql'
-import { Text, View, ActivityIndicator } from 'react-native'
+import { Text, View } from 'react-native'
 import { withNavigation } from 'react-navigation'
 import ActionsAdd from './ActionsAdd'
 import ActionsShare from './ActionsShare'
 import ReceivedActions from './ActionsReceived'
 import ActionsSent from './ActionsSent'
 
-const ContactIdentityActions = ({ data, navigation, modalWidth }) => <View
-  style={{ width: modalWidth, flexDirection: 'row', marginTop: 12 }}>
-  <WithContact id={data.id}>{(user, state) => {
-    if (state.type === state.error) {
-      return <View style={{ flex: 1 }}><Text>Error</Text></View>
-    } else if (state.type !== state.success) {
-      return <View style={{ flex: 1 }}><ActivityIndicator /></View>
-    } else if (user === null) {
-      return <ActionsAdd data={data} navigation={navigation} inModal />
-    } else {
-      switch (user.status) {
-        case enums.BertyEntityContactInputStatus.Myself:
-          return <ActionsShare data={user} self navigation={navigation} inModal />
-
-        case enums.BertyEntityContactInputStatus.IsFriend:
-        case enums.BertyEntityContactInputStatus.IsTrustedFriend:
-          return <ActionsShare data={user} navigation={navigation} inModal />
-
-        case enums.BertyEntityContactInputStatus.IsRequested:
-          console.log(user)
-          return <ActionsSent data={user} inModal />
-
-        case enums.BertyEntityContactInputStatus.RequestedMe:
-          return <ReceivedActions data={user} inModal />
-
-        case enums.BertyEntityContactInputStatus.IsBlocked:
-          return <Text>Is blocked</Text>
-
-        case enums.BertyEntityContactInputStatus.Unknown:
-        default:
-          return <Text>Unknown state</Text>
-      }
-    }
-  }}</WithContact>
-</View>
+const Actions = ({ data, navigation }) => {
+  if (data == null) {
+    return <ActionsAdd data={data} navigation={navigation} inModal />
+  }
+  switch (data.status) {
+    case enums.BertyEntityContactInputStatus.Myself:
+      return <ActionsShare data={data} self navigation={navigation} inModal />
+
+    case enums.BertyEntityContactInputStatus.IsFriend:
+    case enums.BertyEntityContactInputStatus.IsTrustedFriend:
+      return <ActionsShare data={data} navigation={navigation} inModal />
+
+    case enums.BertyEntityContactInputStatus.IsRequested:
+      return <ActionsSent data={data} inModal />
+
+    case enums.BertyEntityContactInputStatus.RequestedMe:
+      return <ReceivedActions data={data} inModal />
+
+    case enums.BertyEntityContactInputStatus.IsBlocked:
+      return <Text>Is blocked</Text>
+
+    case enums.BertyEntityContactInputStatus.Unknown:
+    default:
+      return <Text>Unknown state</Text>
+  }
+}
+
+const ContactIdentityActions = ({ modalWidth, ...props }) => (
+  <View style={{ width: modalWidth, flexDirection: 'row', marginTop: 12 }}>
+    <Actions {...props} />
+  </View>
+)
 
 export default withNavigation(ContactIdentityActions)
diff --git a/client/react-native/common/components/Library/SelfAvatarIcon.js b/client/react-native/common/components/Library/SelfAvatarIcon.js
@@ -1,32 +1,32 @@
-import React, { PureComponent } from 'react'
 import { TouchableOpacity } from 'react-native'
+import React, { PureComponent } from 'react'
+
 import { Avatar, Header } from '.'
 import { colors } from '../../constants'
+import { contact } from '../../utils'
 import { withCurrentUser } from '../../utils/contact'
-import { extractPublicKeyFromId } from '../../helpers/contacts'
 import NavigationService from '../../helpers/NavigationService'
 
 class SelfAvatarLink extends PureComponent {
-  onPress = (data) => {
-    NavigationService.navigate('modal/contacts/card', {
-      data,
-    })
+  onPress = data => {
+    NavigationService.navigate('modal/contacts/card', data)
   }
 
   render = () => {
     let user = this.props.currentUser
-    user = user ? { ...user, id: extractPublicKeyFromId(user.id) } : null
 
-    return user
-      ? <TouchableOpacity onPress={() => this.onPress(user)}>
-        <Avatar data={user} size={24} />
+    return user ? (
+      <TouchableOpacity onPress={() => this.onPress(user)}>
+        <Avatar data={{ ...user, id: contact.getCoreID(user.id) }} size={24} />
       </TouchableOpacity>
-      : <Header.HeaderButton
+    ) : (
+      <Header.HeaderButton
         icon={'share'}
         color={colors.black}
         justify='end'
         middle
       />
+    )
   }
 }
 

diff --git a/client/react-native/common/components/Screens/Accounts/Current.js b/client/react-native/common/components/Screens/Accounts/Current.js
@@ -112,7 +112,9 @@ class Current extends PureComponent {
       ) {
         let val = route.params[key]
         if (key === 'id') {
-          val = atob(val).match(/:(.*)$/)[1]
+          val = atob(val)
+          val = val.match(/:(.*)$/)
+          val = val[1]
         }
         fragment += fragment.length > 0 ? `,${key}=${val}` : `#${key}=${val}`
       }