fix(android): mutliline hack

Signed-off-by: Godefroy Ponsinet <godefroy.ponsinet@outlook.com>
berty · Sep 21, 2018 · 79c497e · 79c497e
1 parent 3fbada7
commit 79c497e
Showing 1 changed file with 89 additions and 61 deletions.
diff --git a/client/react-native/common/components/Screens/Contacts/Add/ByPublicKey.js b/client/react-native/common/components/Screens/Contacts/Add/ByPublicKey.js
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react'
-import { TextInput as TextInputNative } from 'react-native'
+import { Platform, TextInput as TextInputNative } from 'react-native'
 import { Flex, Screen, Button } from '../../../Library'
 import { colors } from '../../../../constants'
 import {
@@ -10,7 +10,8 @@ import {
   textTiny,
   borderBottom,
 } from '../../../../styles'
-import { mutations } from '../../../../graphql'
+import { mutations, queries } from '../../../../graphql'
+import { QueryReducer } from '../../../../relay'
 import createTabNavigator from 'react-navigation-deprecated-tab-navigator/src/createTabNavigator'
 import { btoa } from 'b64-lite'
 
@@ -19,81 +20,108 @@ class TextInputMultilineFix extends PureComponent {
     multiline: false,
   }
 
-  componentDidMount () {
-    this.setState({ multiline: this.props.multiline })
-  }
-
   render () {
-    return <TextInputNative {...this.props} multiline={this.state.multiline} />
+    return (
+      <TextInputNative
+        {...this.props}
+        onFocus={() => {
+          Platform.OS === 'android' &&
+            this.props.multiline &&
+            this.setState({ multiline: true })
+          return this.props.onFocus && this.props.onFocus()
+        }}
+        onBlur={() => {
+          Platform.OS === 'android' &&
+            this.props.multiline &&
+            this.setState({ multiline: true })
+          return this.props.onBlur && this.props.onBlur()
+        }}
+        multiline={
+          Platform.OS === 'android'
+            ? this.state.multiline
+            : this.props.multiline
+        }
+      />
+    )
   }
 }
 
 class ByPublicKey extends PureComponent {
   state = {
     contactID: '',
-    myID:
-      'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCqGKukO1De7zhZj6+H0qtjTkVxwTCpvKe4eCZ0FPqri0cb2JZfXJDgYSF6vUpwmJG8wVQZKjeGcjDOL5UlsuusFncCzWBQ7RKNUSesmQRMSGkVb13j+skZ6UtW+5u09lHNsj6tQ51s1SPrCBkedbNf0Tp0GbMJDyR4e9T04ZZwIDAQABCZ0FPqri0cb2JZfXJDgYSF6vUpwmJG8wVQZKjeGcjDOL5UlsuusFncCzWBQ7RKNUSesmQRMSGkVb13j+skZ6UtW+5u09lHNsj6tQ51s1SPrCBkedbNf0Tp05u09lHNsj6tQ51s1SPrCBkedbNf0Tp0GbMJDyR4e9T04ZZwIDAQABCZ0FPqri0cb2JZfXJDgYSF6vUpwmJG8wVQZKjeGcjDOL5UlsuusFncCzWBQ7RKNUSesmQRMSGkVb13j5u09lHNsj6tQ51s1SPrCBkedbNf0Tp0GbMJDyR4e9T04ZZwIDAQABCZ0FPqri0cb2JZfXJDgYSF6vUpwmJG8wVQZKjeGcjDOL5UlsuusFncCzWBQ7RKN',
   }
 
   render () {
     const { navigation } = this.props
     const {
       state: { routeName },
     } = navigation
-    const { contactID, myID } = this.state
+    const { contactID } = this.state
     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
-            placeholder='Type or copy/paste a berty user public key here'
-            value={routeName === 'Enter a public key' ? contactID : myID}
-            onChangeText={
-              routeName === 'Enter a public key'
-                ? contactID => this.setState({ contactID })
-                : undefined
-            }
-            selectTextOnFocus
-          />
-          {routeName === 'Enter a public key' && (
-            <Button
-              icon='plus'
-              background={colors.blue}
-              margin
-              padding
-              rounded={23}
-              height={24}
-              medium
-              middle
-              onPress={async () => {
-                try {
-                  await mutations.contactRequest.commit({
-                    contactID: btoa(`CONTACT:${contactID}`),
-                  })
-                  navigation.goBack(null)
-                } catch (err) {
-                  this.setState({ err })
-                  console.error(err)
-                }
-              }}
-            >
-              ADD THIS KEY
-            </Button>
-          )}
-        </Flex.Rows>
+        <QueryReducer query={queries.ContactList}>
+          {(state, retry) =>
+            console.log(state) || (
+              <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
+                  placeholder='Type or copy/paste a berty user public key here'
+                  value={
+                    routeName === 'Enter a public key'
+                      ? contactID
+                      : (state.data.ContactList || [{ status: 'Myself' }]).find(
+                        c => c.status === 'Myself'
+                      ).id
+                  }
+                  onChangeText={
+                    routeName === 'Enter a public key'
+                      ? contactID => this.setState({ contactID })
+                      : undefined
+                  }
+                  selectTextOnFocus
+                />
+                {routeName === 'Enter a public key' && (
+                  <Button
+                    icon='plus'
+                    background={colors.blue}
+                    margin
+                    padding
+                    rounded={23}
+                    height={24}
+                    medium
+                    middle
+                    onPress={async () => {
+                      try {
+                        await mutations.contactRequest.commit({
+                          contactID: btoa(`CONTACT:${contactID}`),
+                        })
+                        navigation.goBack(null)
+                      } catch (err) {
+                        this.setState({ err })
+                        console.error(err)
+                      }
+                    }}
+                  >
+                    ADD THIS KEY
+                  </Button>
+                )}
+              </Flex.Rows>
+            )
+          }
+        </QueryReducer>
       </Screen>
     )
   }