feat(rn): fix android ui

Signed-off-by: Godefroy Ponsinet <godefroy.ponsinet@outlook.com>
berty · Sep 11, 2018 · fddbd01 · fddbd01
1 parent 8fbac0a
commit fddbd01
Show file tree

Hide file tree

Showing 7 changed files with 154 additions and 109 deletions.
diff --git a/client/react-native/common/components/Library/Button.js b/client/react-native/common/components/Library/Button.js
@@ -1,11 +1,6 @@
 import React from 'react'
-import { TouchableOpacity } from 'react-native'
 import { Text } from '../Library'
 
-const Button = ({ onPress, ...props }) => (
-  <TouchableOpacity onPress={onPress}>
-    <Text {...props} />
-  </TouchableOpacity>
-)
+const Button = ({ style, ...props }) => <Text button {...props} />
 
 export default Button
diff --git a/client/react-native/common/components/Library/Text.js b/client/react-native/common/components/Library/Text.js
@@ -1,5 +1,10 @@
 import React from 'react'
-import { View, Text as TextNative, TextInput } from 'react-native'
+import {
+  TouchableOpacity,
+  View,
+  Text as TextNative,
+  TextInput,
+} from 'react-native'
 import { Icon } from '.'
 import {
   tinyText,
@@ -132,29 +137,30 @@ const getJustify = (
 ) => find({ inside: props, from: justify, or: 'center' })
 
 export const BackgroundText = props => {
-  const { background, children } = props
-  return (
-    <View
-      style={[
-        {
-          backgroundColor:
-            (background === true && colors.blackGrey) ||
-            background ||
-            colors.transparent,
-        },
-        getBorderRadius(props),
-        getPadding(props),
-        props.shadow && shadow,
-        props.margin && typeof props.margin === 'boolean'
-          ? margin
-          : { margin: props.margin },
-        props.flex && typeof props.flex === 'boolean'
-          ? { flex: 1 }
-          : { flex: props.flex },
-      ]}
-    >
+  const { background, children, button, onPress } = props
+  const style = [
+    {
+      backgroundColor:
+        (background === true && colors.blackGrey) ||
+        background ||
+        colors.transparent,
+    },
+    getBorderRadius(props),
+    getPadding(props),
+    props.shadow && shadow,
+    props.margin && typeof props.margin === 'boolean'
+      ? margin
+      : { margin: props.margin },
+    props.flex && typeof props.flex === 'boolean'
+      ? { flex: 1 }
+      : { flex: props.flex },
+  ]
+  return button ? (
+    <TouchableOpacity style={style} onPress={onPress}>
       {children}
-    </View>
+    </TouchableOpacity>
+  ) : (
+    <View style={style}>{children}</View>
   )
 }
 

diff --git a/client/react-native/common/components/Screens/Chats/List.js b/client/react-native/common/components/Screens/Chats/List.js
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react'
-import { FlatList, TouchableOpacity, Image } from 'react-native'
+import { FlatList, TouchableOpacity, Image, View } from 'react-native'
 import { Screen, Flex, Text, Separator } from '../../Library'
 import { colors } from '../../../constants'
 import {
@@ -12,8 +12,7 @@ import { QueryReducer } from '../../../relay'
 import { queries } from '../../../graphql'
 
 const Header = ({ navigation }) => (
-  <Flex.Rows
-    size={1}
+  <View
     style={[
       { backgroundColor: colors.white, height: 56 },
       borderBottom,
@@ -25,7 +24,7 @@ const Header = ({ navigation }) => (
         Chats
       </Text>
     </Flex.Cols>
-  </Flex.Rows>
+  </View>
 )
 
 const Item = ({ data, navigation }) => {

diff --git a/client/react-native/common/components/Screens/Contacts/Add/index.js b/client/react-native/common/components/Screens/Contacts/Add/index.js
@@ -7,7 +7,32 @@ import Request from './Request'
 import RequestValidation from './RequestValidation'
 
 import React from 'react'
-import { Text, Button } from '../../../Library'
+import { View } from 'react-native'
+import { Text, Button, Flex } from '../../../Library'
+import { padding } from '../../../../styles'
+import { colors } from '../../../../constants'
+
+const Header = ({ navigation }) => (
+  <View style={[{ backgroundColor: colors.white, height: 56 }, padding]}>
+    <Flex.Rows>
+      <Flex.Cols self='left' style={{ position: 'absolute' }}>
+        <Button
+          padding
+          large
+          left
+          color='black'
+          icon='arrow-left'
+          onPress={() => navigation.goBack(null)}
+        />
+      </Flex.Cols>
+      <Flex.Cols size={1} self='center' style={{ position: 'absolute' }}>
+        <Text icon='user-plus' color='black' padding medium>
+          Add a contact
+        </Text>
+      </Flex.Cols>
+    </Flex.Rows>
+  </View>
+)
 
 export default createSubStackNavigator(
   {
@@ -20,21 +45,8 @@ export default createSubStackNavigator(
   },
   {
     initialRouteName: 'Choice',
-    navigationOptions: params => ({
-      headerTitle: (
-        <Text icon='user-plus' color='black' padding medium>
-          Add a contact
-        </Text>
-      ),
-      headerLeft: (
-        <Button
-          padding
-          large
-          color='black'
-          icon='arrow-left'
-          onPress={() => params.navigation.goBack(null)}
-        />
-      ),
+    navigationOptions: ({ navigation }) => ({
+      header: <Header navigation={navigation} />,
     }),
   }
 )
diff --git a/client/react-native/common/components/Screens/Contacts/List.js b/client/react-native/common/components/Screens/Contacts/List.js
@@ -1,54 +1,69 @@
 import React, { PureComponent } from 'react'
-import { FlatList, TouchableOpacity, TextInput, Image } from 'react-native'
-import { Screen, Flex, Text, Separator, Button } from '../../Library'
+import {
+  FlatList,
+  TouchableOpacity,
+  TextInput,
+  Image,
+  View,
+} from 'react-native'
+import { Screen, Flex, Text, Separator } from '../../Library'
 import { colors } from '../../../constants'
 import {
   paddingLeft,
   paddingRight,
   marginHorizontal,
   padding,
-  marginTop,
   borderBottom,
+  paddingBottom,
 } from '../../../styles'
 import { QueryReducer } from '../../../relay'
 import { queries } from '../../../graphql'
 
 const Header = ({ navigation }) => (
-  <Flex.Rows
-    size={1}
+  <View
     style={[
       { backgroundColor: colors.white, height: 100 },
       borderBottom,
       padding,
     ]}
   >
-    <Flex.Cols size={1} align='center' space='between'>
-      <Text icon='feather-users' left large color={colors.black}>
-        Contacts
-      </Text>
-      <Button
-        icon='user-plus'
-        large
-        color='black'
-        onPress={() => navigation.push('Add')}
-      />
-    </Flex.Cols>
-    <TextInput
-      style={[
-        {
-          height: 36,
-          backgroundColor: colors.grey7,
-          borderWidth: 0,
-          borderRadius: 18,
-          outline: 'none',
-        },
-        marginTop,
-        paddingLeft,
-        paddingRight,
-      ]}
-      placeholder='Search'
-    />
-  </Flex.Rows>
+    <Flex.Rows>
+      <Flex.Cols
+        size={1}
+        align='center'
+        space='between'
+        style={[paddingBottom]}
+      >
+        <Text icon='feather-users' left large color={colors.black}>
+          Contacts
+        </Text>
+        <Text
+          icon='user-plus'
+          large
+          right
+          button
+          color='black'
+          onPress={() => navigation.push('Add')}
+        />
+      </Flex.Cols>
+      <Flex.Cols size={1} style={[paddingBottom]}>
+        <TextInput
+          style={[
+            {
+              height: 36,
+              flex: 1,
+              backgroundColor: colors.grey7,
+              borderWidth: 0,
+              borderRadius: 18,
+            },
+            paddingLeft,
+            paddingRight,
+          ]}
+          placeholder='Search'
+        />
+      </Flex.Cols>
+    </Flex.Rows>
+  </View>
 )
 
 const Item = ({
@@ -108,25 +123,45 @@ export default class List extends PureComponent {
     const { navigation } = this.props
     return (
       <Screen style={[{ backgroundColor: colors.white }]}>
+        {
+          // <QueryReducer query={subscriptions.EventStream}>
+          // <{(state, retry) => {
+          // <  switch (state.type) {
+          // <    case state.loading:
+          // <      return <Text>Loading</Text>
+          // <    case state.success:
+          // <      return <Text>Success</Text>
+          // <    case state.error:
+          // <      return <Text>Error</Text>
+          // <    default:
+          // <      return <Text>default</Text>
+          // <  }
+          // <}}
+          // <</QueryReducer>
+        }
         <QueryReducer query={queries.ContactList}>
-          {(state, retry) => (
-            <FlatList
-              data={this.sortContacts([].concat(state.data.ContactList || []))}
-              ItemSeparatorComponent={({ highlighted }) => (
-                <Separator highlighted={highlighted} />
-              )}
-              refreshing={state.type === state.loading}
-              onRefresh={retry}
-              renderItem={data => (
-                <Item
-                  key={data.id}
-                  data={data.item}
-                  separators={data.separators}
-                  navigation={navigation}
-                />
-              )}
-            />
-          )}
+          {(state, retry) =>
+            console.log(state) || (
+              <FlatList
+                data={this.sortContacts(
+                  [].concat(state.data.ContactList || [])
+                )}
+                ItemSeparatorComponent={({ highlighted }) => (
+                  <Separator highlighted={highlighted} />
+                )}
+                refreshing={state.type === state.loading}
+                onRefresh={retry}
+                renderItem={data => (
+                  <Item
+                    key={data.id}
+                    data={data.item}
+                    separators={data.separators}
+                    navigation={navigation}
+                  />
+                )}
+              />
+            )
+          }
         </QueryReducer>
       </Screen>
     )

diff --git a/client/react-native/common/components/Screens/Settings/List.js b/client/react-native/common/components/Screens/Settings/List.js
@@ -1,14 +1,11 @@
 import React, { PureComponent } from 'react'
 import { colors } from '../../../constants'
+import { View } from 'react-native'
 import { Menu, Flex, Text } from '../../Library'
-import {
-  padding,
-  borderBottom,
-} from '../../../styles'
+import { padding, borderBottom } from '../../../styles'
 
 const Header = ({ navigation }) => (
-  <Flex.Rows
-    size={1}
+  <View
     style={[
       { backgroundColor: colors.white, height: 72 },
       borderBottom,
@@ -20,7 +17,7 @@ const Header = ({ navigation }) => (
         Settings
       </Text>
     </Flex.Cols>
-  </Flex.Rows>
+  </View>
 )
 
 export default class List extends PureComponent {

diff --git a/client/react-native/common/styles.js b/client/react-native/common/styles.js
@@ -1,7 +1,7 @@
-import { Platform } from 'react-native'
+import { StyleSheet, Platform } from 'react-native'
 import { colors } from './constants'
 
-const styles = {
+const styles = StyleSheet.create({
   padding: {
     padding: 16,
   },
@@ -56,6 +56,7 @@ const styles = {
   smallText: {
     lineHeight: 20,
     fontSize: 14,
+    textAlign: 'center',
     color: colors.textGrey,
   },
   mediumText: {
@@ -149,7 +150,7 @@ const styles = {
     borderBottomWidth: 0.5,
     borderColor: colors.borderGrey,
   },
-}
+})
 
 export const {
   padding,