From c46cda9e850d5c32fb64c588311bc25bf7812b71 Mon Sep 17 00:00:00 2001 From: Godefroy Ponsinet Date: Wed, 24 Oct 2018 16:12:02 +0200 Subject: [PATCH] feat(rn): contact request updater Signed-off-by: Godefroy Ponsinet --- .../Screens/Contacts/Add/Request.js | 260 +++++++++++------- .../common/graphql/fragments/ContactList.js | 23 ++ .../graphql/mutations/ContactAcceptRequest.js | 15 +- .../common/graphql/mutations/ContactRemove.js | 55 ++++ .../graphql/mutations/ContactRequest.js | 15 +- .../mutations/ConversationAddMessage.js | 9 +- .../graphql/mutations/ConversationCreate.js | 4 +- .../graphql/mutations/ConversationInvite.js | 4 +- .../graphql/mutations/GenerateFakeData.js | 2 +- .../common/graphql/mutations/index.js | 1 + client/react-native/common/relay/commit.js | 1 + 11 files changed, 271 insertions(+), 118 deletions(-) create mode 100644 client/react-native/common/graphql/mutations/ContactRemove.js diff --git a/client/react-native/common/components/Screens/Contacts/Add/Request.js b/client/react-native/common/components/Screens/Contacts/Add/Request.js index 355b93b1a7..922ed18f5e 100644 --- a/client/react-native/common/components/Screens/Contacts/Add/Request.js +++ b/client/react-native/common/components/Screens/Contacts/Add/Request.js @@ -5,7 +5,7 @@ import createTabNavigator from 'react-navigation-deprecated-tab-navigator/src/cr import { Flex, Screen, Separator, Text } from '../../../Library' import { QueryReducer } from '../../../../relay' -import { borderBottom, marginLeft, padding } from '../../../../styles' +import { borderBottom, padding } from '../../../../styles' import { colors } from '../../../../constants' import { mutations, @@ -13,129 +13,187 @@ import { queries, subscriptions, } from '../../../../graphql' +import { ConnectionHandler } from 'relay-runtime' const Item = fragments.Contact( class Item extends PureComponent { - onAccept = async () => { - const { id } = this.props.data - try { - await mutations.contactAcceptRequest.commit({ id }) - this.props.navigation.goBack(null) - } catch (err) { - console.error(err) - } + state = { + isLoading: false, } - onDecline = async () => { - const { id } = this.props.data - try { - await mutations.contactRemove.commit({ id }) - this.props.navigation.goBack(null) - } catch (err) { - console.error(err) - } - } - onRemove = async () => { - const { id } = this.props.data - try { - await mutations.contactRemove.commit({ id }) - this.props.navigation.goBack(null) - } catch (err) { - console.error(err) - } - } + onAccept = () => + this.setState({ isLoading: true }, async () => { + const { + data: { id }, + } = this.props + try { + await mutations.contactAcceptRequest.commit( + { id }, + { + updater: (store, data) => { + const root = store.getRoot() + const connection = ConnectionHandler.getConnection( + root, + 'ContactListReceived_ContactList', + fragments.ContactList.Received.defaultArguments + ) + ConnectionHandler.deleteNode( + connection, + data.ContactAcceptRequest.id + ) + }, + } + ) + } catch (err) { + console.error(err) + } + this.setState({ isLoading: false }) + }) + + onDecline = () => + this.setState({ isLoading: true }, async () => { + const { id } = this.props.data + try { + await mutations.contactRemove.commit( + { id }, + { + updater: (store, data) => { + const root = store.getRoot() + const connection = ConnectionHandler.getConnection( + root, + 'ContactListReceived_ContactList', + fragments.ContactList.Received.defaultArguments + ) + ConnectionHandler.deleteNode(connection, data.ContactRemove.id) + }, + } + ) + } catch (err) { + console.error(err) + } + this.setState({ isLoading: false }) + }) + + onRemove = () => + this.setState({ isLoading: true }, async () => { + const { id } = this.props.data + try { + await mutations.contactRemove.commit( + { id }, + { + updater: (store, data) => { + const root = store.getRoot() + const connection = ConnectionHandler.getConnection( + root, + 'ContactListSent_ContactList', + fragments.ContactList.Sent.defaultArguments + ) + ConnectionHandler.deleteNode(connection, data.ContactRemove.id) + }, + } + ) + } catch (err) { + console.error(err) + } + this.setState({ isLoading: false }) + }) + render () { const { - data: { id, overrideDisplayName, displayName, displayStatus }, + data: { id, overrideDisplayName, displayName }, navigation, } = this.props - + const { isLoading } = this.state return ( - + - - - - {overrideDisplayName || displayName} - - - {displayStatus} - - - {navigation.state.routeName === 'Received' ? ( - - - ACCEPT - - - DECLINE - - - ) : ( - + - REMOVE + {overrideDisplayName || displayName} + + + {isLoading && ( + + )} + {!isLoading && + (navigation.state.routeName === 'Received' ? ( + + + ACCEPT + + + DECLINE + + + ) : ( + + + REMOVE + + + ))} ) } diff --git a/client/react-native/common/graphql/fragments/ContactList.js b/client/react-native/common/graphql/fragments/ContactList.js index 196074128d..906e5f8c8b 100644 --- a/client/react-native/common/graphql/fragments/ContactList.js +++ b/client/react-native/common/graphql/fragments/ContactList.js @@ -1,5 +1,6 @@ import { graphql, createPaginationContainer } from 'react-relay' import * as queries from '../queries' +import { contact } from '../../utils' const ContactList = component => createPaginationContainer( @@ -52,6 +53,11 @@ const ContactList = component => query: queries.ContactList, } ) +ContactList.defaultArguments = { + filter: contact.default, + orderBy: '', + orderDesc: false, +} ContactList.Received = component => createPaginationContainer( @@ -104,6 +110,14 @@ ContactList.Received = component => query: queries.ContactList.Received, } ) +ContactList.Received.defaultArguments = { + filter: { + ...contact.default, + status: 4, + }, + orderBy: '', + orderDesc: false, +} ContactList.Sent = component => createPaginationContainer( @@ -142,6 +156,7 @@ ContactList.Sent = component => { direction: 'forward', getConnectionFromProps: props => { + console.log(props) return props.data.ContactList }, getFragmentVariables: (prevVars, totalCount) => { @@ -156,5 +171,13 @@ ContactList.Sent = component => query: queries.ContactList.Sent, } ) +ContactList.Sent.defaultArguments = { + filter: { + ...contact.default, + status: 3, + }, + orderBy: '', + orderDesc: false, +} export default ContactList diff --git a/client/react-native/common/graphql/mutations/ContactAcceptRequest.js b/client/react-native/common/graphql/mutations/ContactAcceptRequest.js index 63344a9931..b591d42cfa 100644 --- a/client/react-native/common/graphql/mutations/ContactAcceptRequest.js +++ b/client/react-native/common/graphql/mutations/ContactAcceptRequest.js @@ -42,9 +42,14 @@ const ContactAcceptRequestMutation = graphql` ` export default { - commit: input => - commit(ContactAcceptRequestMutation, 'ContactAcceptRequest', { - ...contact.default, - input, - }), + commit: (input, configs) => + commit( + ContactAcceptRequestMutation, + 'ContactAcceptRequest', + { + ...contact.default, + ...input, + }, + configs + ), } diff --git a/client/react-native/common/graphql/mutations/ContactRemove.js b/client/react-native/common/graphql/mutations/ContactRemove.js new file mode 100644 index 0000000000..b902fbf0c3 --- /dev/null +++ b/client/react-native/common/graphql/mutations/ContactRemove.js @@ -0,0 +1,55 @@ +import { graphql } from 'react-relay' +import { commit } from '../../relay' +import { contact } from '../../utils' + +const ContactRemoveMutation = graphql` + mutation ContactRemoveMutation( + $id: ID! + $displayName: String! + $displayStatus: String! + $overrideDisplayName: String! + $overrideDisplayStatus: String! + ) { + ContactRemove( + id: $id + displayName: $displayName + displayStatus: $displayStatus + overrideDisplayName: $overrideDisplayName + overrideDisplayStatus: $overrideDisplayStatus + ) { + id + createdAt + updatedAt + deletedAt + sigchain + status + devices { + id + createdAt + updatedAt + deletedAt + name + status + apiVersion + contactId + } + displayName + displayStatus + overrideDisplayName + overrideDisplayStatus + } + } +` + +export default { + commit: (input, configs) => + commit( + ContactRemoveMutation, + 'ContactRemove', + { + ...contact.default, + ...input, + }, + configs + ), +} diff --git a/client/react-native/common/graphql/mutations/ContactRequest.js b/client/react-native/common/graphql/mutations/ContactRequest.js index b94711484d..f489fd26e5 100644 --- a/client/react-native/common/graphql/mutations/ContactRequest.js +++ b/client/react-native/common/graphql/mutations/ContactRequest.js @@ -32,9 +32,14 @@ const ContactRequestMutation = graphql` } ` export default { - commit: input => - commit(ContactRequestMutation, 'ContactRequest', { - ...contact.default, - input, - }), + commit: (input, configs) => + commit( + ContactRequestMutation, + 'ContactRequest', + { + ...contact.default, + ...input, + }, + configs + ), } diff --git a/client/react-native/common/graphql/mutations/ConversationAddMessage.js b/client/react-native/common/graphql/mutations/ConversationAddMessage.js index 713c0eef67..7cb3db2086 100644 --- a/client/react-native/common/graphql/mutations/ConversationAddMessage.js +++ b/client/react-native/common/graphql/mutations/ConversationAddMessage.js @@ -27,6 +27,11 @@ const ConversationAddMessageMutation = graphql` ` export default { - commit: input => - commit(ConversationAddMessageMutation, 'ConversationAddMessage', input), + commit: (input, configs) => + commit( + ConversationAddMessageMutation, + 'ConversationAddMessage', + input, + configs + ), } diff --git a/client/react-native/common/graphql/mutations/ConversationCreate.js b/client/react-native/common/graphql/mutations/ConversationCreate.js index 0f1f8ced79..b2d59745e5 100644 --- a/client/react-native/common/graphql/mutations/ConversationCreate.js +++ b/client/react-native/common/graphql/mutations/ConversationCreate.js @@ -50,6 +50,6 @@ const ConversationCreateMutation = graphql` ` export default { - commit: input => - commit(ConversationCreateMutation, 'ConversationCreate', input), + commit: (input, configs) => + commit(ConversationCreateMutation, 'ConversationCreate', input, configs), } diff --git a/client/react-native/common/graphql/mutations/ConversationInvite.js b/client/react-native/common/graphql/mutations/ConversationInvite.js index aaf64cacf8..36f223f49b 100644 --- a/client/react-native/common/graphql/mutations/ConversationInvite.js +++ b/client/react-native/common/graphql/mutations/ConversationInvite.js @@ -49,6 +49,6 @@ const ConversationInviteMutation = graphql` ` export default { - commit: input => - commit(ConversationInviteMutation, 'ConversationInvite', input), + commit: (input, configs) => + commit(ConversationInviteMutation, 'ConversationInvite', input, configs), } diff --git a/client/react-native/common/graphql/mutations/GenerateFakeData.js b/client/react-native/common/graphql/mutations/GenerateFakeData.js index c1559256af..d5e21df7bf 100644 --- a/client/react-native/common/graphql/mutations/GenerateFakeData.js +++ b/client/react-native/common/graphql/mutations/GenerateFakeData.js @@ -10,5 +10,5 @@ const GenerateFakeDataMutation = graphql` ` export default { - commit: input => commit(GenerateFakeDataMutation, 'GenerateFakeData', input), + commit: (input, configs) => commit(GenerateFakeDataMutation, 'GenerateFakeData', input, configs), } diff --git a/client/react-native/common/graphql/mutations/index.js b/client/react-native/common/graphql/mutations/index.js index 6b2c2bc66c..2246cd0741 100644 --- a/client/react-native/common/graphql/mutations/index.js +++ b/client/react-native/common/graphql/mutations/index.js @@ -2,6 +2,7 @@ export generateFakeData from './GenerateFakeData' export runIntegrationTests from './RunIntegrationTests' export contactRequest from './ContactRequest' export contactAcceptRequest from './ContactAcceptRequest' +export contactRemove from './ContactRemove' export conversationCreate from './ConversationCreate' export conversationAddMessage from './ConversationAddMessage' export conversationInvite from './ConversationInvite' diff --git a/client/react-native/common/relay/commit.js b/client/react-native/common/relay/commit.js index 5bab2bb999..92577fcd46 100644 --- a/client/react-native/common/relay/commit.js +++ b/client/react-native/common/relay/commit.js @@ -2,6 +2,7 @@ import { commitMutation } from 'react-relay' import environment from './environment' export default (mutation, clientMutationId, input = {}, configs) => { + console.log(configs) return new Promise((resolve, reject) => commitMutation(environment, { mutation,