fix(rn): fix tabBar add QueryReducer

Signed-off-by: Godefroy Ponsinet <godefroy.ponsinet@outlook.com>

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

@@ -8,8 +8,7 @@ import {
   padding,
   borderBottom,
 } from '../../../styles'
-import { fetchQuery } from 'react-relay'
-import { environment } from '../../../relay'
+import { QueryReducer } from '../../../relay'
 import { queries } from '../../../graphql'
 
 const Header = ({ navigation }) => (
@@ -68,57 +67,31 @@ export default class List extends PureComponent {
     tabBarVisible: true,
   })
 
-  state = {
-    refreshing: false,
-    conversations: null,
-    err: null,
-  }
-
-  async componentDidMount () {
-    if (this.state.conversations == null) {
-      await this.getConversations()
-    }
-  }
-
-  getConversations = async () => {
-    try {
-      const { ConversationList } = await fetchQuery(
-        environment,
-        queries.ConversationList
-      )
-      this.setState({
-        refreshing: false,
-        conversations: ConversationList,
-        err: null,
-      })
-    } catch (err) {
-      this.setState({ refreshing: false, conversations: null, err: err })
-      console.error(err)
-    }
-  }
-
   render () {
     const { navigation } = this.props
-    const { refreshing, conversations } = this.state
     return (
       <Screen style={[{ backgroundColor: colors.white }]}>
-        <FlatList
-          data={[...(conversations || [])]}
-          style={[paddingLeft, paddingRight]}
-          ItemSeparatorComponent={({ highlighted }) => (
-            <Separator highlighted={highlighted} />
-          )}
-          refreshing={refreshing}
-          onRefresh={this.getConversations}
-          renderItem={data => (
-            <Item
-              key={data.id}
-              data={data.item}
-              separators={data.separators}
-              navigation={navigation}
+        <QueryReducer query={queries.ConversationList}>
+          {(state, retry) => (
+            <FlatList
+              data={state.data.ConversationList || []}
+              style={[paddingLeft, paddingRight]}
+              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>
     )
   }

client/react-native/common/components/Screens/Contacts/Add/ByPublicKey.js

@@ -8,11 +8,12 @@ import {
   marginTop,
   rounded,
   textTiny,
+  borderBottom,
 } from '../../../../styles'
 import { commit } from '../../../../relay'
 import { mutations } from '../../../../graphql'
 
-import { createBottomTabNavigator } from 'react-navigation'
+import createTabNavigator from 'react-navigation-deprecated-tab-navigator/src/createTabNavigator'
 
 class ByPublicKey extends PureComponent {
   state = {
@@ -65,7 +66,9 @@ class ByPublicKey extends PureComponent {
               middle
               onPress={async () => {
                 try {
-                  await commit(mutations.ContactRequest, { contactID })
+                  console.log(
+                    await commit(mutations.ContactRequest, { contactID })
+                  )
                   navigation.goBack(null)
                 } catch (err) {
                   this.setState({ err })
@@ -82,12 +85,31 @@ class ByPublicKey extends PureComponent {
   }
 }
 
-export default createBottomTabNavigator(
+export default createTabNavigator(
   {
     'Enter a public key': ByPublicKey,
     'View my public key': ByPublicKey,
   },
   {
     initialRouteName: 'Enter a public key',
+    swipeEnabled: true,
+    animationEnabled: true,
+    tabBarPosition: 'top',
+
+    tabBarOptions: {
+      labelStyle: {
+        color: colors.black,
+      },
+      indicatorStyle: {
+        backgroundColor: colors.black,
+      },
+      style: [
+        {
+          backgroundColor: colors.white,
+          borderTopWidth: 0,
+        },
+        borderBottom,
+      ],
+    },
   }
 )

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

@@ -5,12 +5,12 @@ import { colors } from '../../../constants'
 import {
   paddingLeft,
   paddingRight,
+  marginHorizontal,
   padding,
   marginTop,
   borderBottom,
 } from '../../../styles'
-import { fetchQuery } from 'react-relay'
-import { environment } from '../../../relay'
+import { QueryReducer } from '../../../relay'
 import { queries } from '../../../graphql'
 
 const Header = ({ navigation }) => (
@@ -57,11 +57,14 @@ const Item = ({
 }) => (
   <TouchableOpacity
     onPress={() => navigation.push('Detail', { id })}
-    style={{
-      backgroundColor: colors.white,
-      paddingVertical: 16,
-      height: 71,
-    }}
+    style={[
+      {
+        backgroundColor: colors.white,
+        paddingVertical: 16,
+        height: 71,
+      },
+      marginHorizontal,
+    ]}
   >
     <Flex.Cols align='left'>
       <Flex.Rows size={1} align='left' style={{ marginLeft: 30 }}>
@@ -93,18 +96,6 @@ export default class List extends PureComponent {
     tabBarVisible: true,
   })
 
-  state = {
-    refreshing: false,
-    contacts: null,
-    err: null,
-  }
-
-  async componentDidMount () {
-    if (this.state.contacts === null) {
-      await this.getContacts()
-    }
-  }
-
   sortContacts = ContactList => {
     return ContactList.sort((a, b) => {
       let an = a['displayName'].toLowerCase()
@@ -113,42 +104,30 @@ export default class List extends PureComponent {
     })
   }
 
-  getContacts = async () => {
-    try {
-      const { ContactList } = await fetchQuery(environment, queries.ContactList)
-      this.setState({
-        refreshing: false,
-        contacts: this.sortContacts([].concat(ContactList)),
-        err: null,
-      })
-    } catch (err) {
-      this.setState({ refreshing: false, contacts: null, err: err })
-      console.error(err)
-    }
-  }
-
   render () {
     const { navigation } = this.props
-    const { refreshing, contacts } = this.state
     return (
       <Screen style={[{ backgroundColor: colors.white }]}>
-        <FlatList
-          data={[...(contacts || [])]}
-          style={[paddingLeft, paddingRight]}
-          ItemSeparatorComponent={({ highlighted }) => (
-            <Separator highlighted={highlighted} />
-          )}
-          refreshing={refreshing}
-          onRefresh={this.getContacts}
-          renderItem={data => (
-            <Item
-              key={data.id}
-              data={data.item}
-              separators={data.separators}
-              navigation={navigation}
+        <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}
+                />
+              )}
             />
           )}
-        />
+        </QueryReducer>
       </Screen>
     )
   }

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

@@ -1,15 +1,35 @@
-import { createBottomTabNavigator } from 'react-navigation'
+import createTabNavigator from 'react-navigation-deprecated-tab-navigator/src/createTabNavigator'
 import Contacts from './Contacts'
 import Chats from './Chats'
 import Settings from './Settings'
+import { colors } from '../../constants'
+import { borderTop, shadow } from '../../styles'
 
-export default createBottomTabNavigator(
+export default createTabNavigator(
   {
     Contacts,
     Chats,
     Settings,
   },
   {
     initialRouteName: 'Chats',
+    swipeEnabled: true,
+    animationEnabled: true,
+    tabBarPosition: 'bottom',
+    tabBarOptions: {
+      labelStyle: {
+        color: colors.black,
+      },
+      indicatorStyle: {
+        backgroundColor: colors.black,
+      },
+      style: [
+        {
+          backgroundColor: colors.white,
+        },
+        borderTop,
+        shadow,
+      ],
+    },
   }
 )

client/react-native/common/helpers/react-navigation.js

@@ -15,6 +15,10 @@ export const createSubStackNavigator = (
       header: null,
       tabBarVisible:
         routes[index].routeName === stackNavigatorConfig.initialRouteName,
+      swipeEnabled:
+        routes[index].routeName === stackNavigatorConfig.initialRouteName,
+      animationEnabled:
+        routes[index].routeName === stackNavigatorConfig.initialRouteName,
     })
   } else {
     Stack.navigationOptions = parentStackNavigatorConfig

client/react-native/common/relay/QueryReducer.js

@@ -0,0 +1,56 @@
+import React from 'react'
+import Relay from 'react-relay'
+import environment from './environment'
+
+const handleChildren = (children, state, retry) => {
+  if (typeof children === 'function') {
+    return children(state, retry)
+  }
+  return React.Children.map(children, child =>
+    React.cloneElement(child, { relay: { state, retry } })
+  )
+}
+
+const QueryReducer = ({ children, ...props }) => (
+  <Relay.QueryRenderer
+    environment={environment}
+    {...props}
+    render={({ error, props, retry }) => {
+      if (!error && !props) {
+        return handleChildren(
+          children,
+          {
+            type: 'loading',
+            loading: 'loading',
+            data: {},
+          },
+          retry
+        )
+      }
+      if (!error) {
+        return handleChildren(
+          children,
+          {
+            type: 'success',
+            success: 'success',
+            data: props,
+          },
+          retry
+        )
+      }
+      if (!props) {
+        return handleChildren(
+          children,
+          {
+            type: 'error',
+            error: 'error',
+            data: error,
+          },
+          retry
+        )
+      }
+    }}
+  />
+)
+
+export default QueryReducer

client/react-native/common/relay/index.js

@@ -1,2 +1,3 @@
 export environment, { fetchQuery } from './environment'
 export commit from './commit'
+export QueryReducer from './QueryReducer.js'