From 0dbe12218d9f464be34adec21d4b82b87ee8ff68 Mon Sep 17 00:00:00 2001 From: Godefroy Ponsinet Date: Thu, 6 Sep 2018 17:44:23 +0200 Subject: [PATCH] fix(rn): fix tabBar add QueryReducer Signed-off-by: Godefroy Ponsinet --- .../common/components/Screens/Chats/List.js | 67 +++++----------- .../Screens/Contacts/Add/ByPublicKey.js | 28 ++++++- .../components/Screens/Contacts/List.js | 77 +++++++------------ .../common/components/Screens/index.js | 24 +++++- .../common/helpers/react-navigation.js | 4 + .../react-native/common/relay/QueryReducer.js | 56 ++++++++++++++ client/react-native/common/relay/index.js | 1 + 7 files changed, 156 insertions(+), 101 deletions(-) create mode 100644 client/react-native/common/relay/QueryReducer.js diff --git a/client/react-native/common/components/Screens/Chats/List.js b/client/react-native/common/components/Screens/Chats/List.js index bdf36f4f0c..406863926f 100644 --- a/client/react-native/common/components/Screens/Chats/List.js +++ b/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 ( - ( - - )} - refreshing={refreshing} - onRefresh={this.getConversations} - renderItem={data => ( - + {(state, retry) => ( + ( + + )} + refreshing={state.type === state.loading} + onRefresh={retry} + renderItem={data => ( + + )} /> )} - /> + ) } diff --git a/client/react-native/common/components/Screens/Contacts/Add/ByPublicKey.js b/client/react-native/common/components/Screens/Contacts/Add/ByPublicKey.js index e56fc1ee3c..498e411cf6 100644 --- a/client/react-native/common/components/Screens/Contacts/Add/ByPublicKey.js +++ b/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, + ], + }, } ) diff --git a/client/react-native/common/components/Screens/Contacts/List.js b/client/react-native/common/components/Screens/Contacts/List.js index aa98a0b030..a91121e381 100644 --- a/client/react-native/common/components/Screens/Contacts/List.js +++ b/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 = ({ }) => ( navigation.push('Detail', { id })} - style={{ - backgroundColor: colors.white, - paddingVertical: 16, - height: 71, - }} + style={[ + { + backgroundColor: colors.white, + paddingVertical: 16, + height: 71, + }, + marginHorizontal, + ]} > @@ -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 ( - ( - - )} - refreshing={refreshing} - onRefresh={this.getContacts} - renderItem={data => ( - + {(state, retry) => ( + ( + + )} + refreshing={state.type === state.loading} + onRefresh={retry} + renderItem={data => ( + + )} /> )} - /> + ) } diff --git a/client/react-native/common/components/Screens/index.js b/client/react-native/common/components/Screens/index.js index d6bcd8ce66..ee78c18782 100644 --- a/client/react-native/common/components/Screens/index.js +++ b/client/react-native/common/components/Screens/index.js @@ -1,9 +1,11 @@ -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, @@ -11,5 +13,23 @@ export default createBottomTabNavigator( }, { initialRouteName: 'Chats', + swipeEnabled: true, + animationEnabled: true, + tabBarPosition: 'bottom', + tabBarOptions: { + labelStyle: { + color: colors.black, + }, + indicatorStyle: { + backgroundColor: colors.black, + }, + style: [ + { + backgroundColor: colors.white, + }, + borderTop, + shadow, + ], + }, } ) diff --git a/client/react-native/common/helpers/react-navigation.js b/client/react-native/common/helpers/react-navigation.js index 100db0101c..8b45e8525b 100644 --- a/client/react-native/common/helpers/react-navigation.js +++ b/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 diff --git a/client/react-native/common/relay/QueryReducer.js b/client/react-native/common/relay/QueryReducer.js new file mode 100644 index 0000000000..1726e08e0d --- /dev/null +++ b/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 }) => ( + { + 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 diff --git a/client/react-native/common/relay/index.js b/client/react-native/common/relay/index.js index f03fbfb684..6710349437 100644 --- a/client/react-native/common/relay/index.js +++ b/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'