feat(rn): contact request updater

Signed-off-by: Godefroy Ponsinet <godefroy.ponsinet@outlook.com>
berty · Oct 24, 2018 · c46cda9 · c46cda9
1 parent 3b65f96
commit c46cda9
Show file tree

Hide file tree

Showing 11 changed files with 271 additions and 118 deletions.
diff --git a/client/react-native/common/components/Screens/Contacts/Add/Request.js b/client/react-native/common/components/Screens/Contacts/Add/Request.js
@@ -5,137 +5,195 @@ 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,
   fragments,
   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 (
         <Flex.Cols align='center' style={[{ height: 72 }, padding]}>
-          <Flex.Rows size={1} align='center'>
+          <Flex.Cols size={4} justify='start'>
             <Image
               style={{ width: 40, height: 40, borderRadius: 20, margin: 4 }}
               source={{
                 uri: 'https://api.adorable.io/avatars/40/' + id + '.png',
               }}
             />
-          </Flex.Rows>
-          <Flex.Rows
-            size={3}
-            align='stretch'
-            justify='center'
-            style={[marginLeft]}
-          >
-            <Text color={colors.black} left middle ellipsis>
-              {overrideDisplayName || displayName}
-            </Text>
-            <Text color={colors.subtleGrey} tiny middle left ellipsis>
-              {displayStatus}
-            </Text>
-          </Flex.Rows>
-          {navigation.state.routeName === 'Received' ? (
-            <Flex.Cols size={4}>
-              <Text
-                icon='check'
-                background={colors.blue}
-                color={colors.white}
-                margin={{ left: 8 }}
-                padding={{
-                  vertical: 6,
-                  horizontal: 4,
-                }}
-                middle
-                center
-                shadow
-                tiny
-                rounded={22}
-                onPress={this.onAccept}
-              >
-                ACCEPT
-              </Text>
-              <Text
-                icon='x'
-                background={colors.white}
-                color={colors.subtleGrey}
-                margin={{ left: 8 }}
-                padding={{
-                  vertical: 6,
-                  horizontal: 4,
-                }}
-                middle
-                center
-                tiny
-                shadow
-                self='end'
-                rounded={22}
-                onPress={this.onDecline}
-              >
-                DECLINE
-              </Text>
-            </Flex.Cols>
-          ) : (
-            <Flex.Cols size={1.6}>
+            <Flex.Rows>
               <Text
-                icon='x'
-                background={colors.white}
-                color={colors.subtleGrey}
-                margin={{ left: 8 }}
-                padding={{
-                  vertical: 6,
-                  horizontal: 4,
-                }}
+                color={colors.black}
+                left
                 middle
-                center
-                tiny
-                shadow
-                self='end'
-                rounded={22}
-                onPress={this.onRemove}
+                ellipsis
+                margin={{ left: 16 }}
               >
-                REMOVE
+                {overrideDisplayName || displayName}
               </Text>
+            </Flex.Rows>
+          </Flex.Cols>
+          {isLoading && (
+            <Flex.Cols size={1} justify='end'>
+              <ActivityIndicator />
             </Flex.Cols>
           )}
+          {!isLoading &&
+            (navigation.state.routeName === 'Received' ? (
+              <Flex.Cols size={4}>
+                <Text
+                  icon='check'
+                  background={colors.blue}
+                  color={colors.white}
+                  margin={{ left: 8 }}
+                  padding={{
+                    vertical: 6,
+                    horizontal: 4,
+                  }}
+                  middle
+                  center
+                  shadow
+                  tiny
+                  rounded={22}
+                  onPress={this.onAccept}
+                >
+                  ACCEPT
+                </Text>
+                <Text
+                  icon='x'
+                  background={colors.white}
+                  color={colors.subtleGrey}
+                  margin={{ left: 8 }}
+                  padding={{
+                    vertical: 6,
+                    horizontal: 4,
+                  }}
+                  middle
+                  center
+                  tiny
+                  shadow
+                  self='end'
+                  rounded={22}
+                  onPress={this.onDecline}
+                >
+                  DECLINE
+                </Text>
+              </Flex.Cols>
+            ) : (
+              <Flex.Cols size={1.6}>
+                <Text
+                  icon='x'
+                  background={colors.white}
+                  color={colors.subtleGrey}
+                  margin={{ left: 8 }}
+                  padding={{
+                    vertical: 6,
+                    horizontal: 4,
+                  }}
+                  middle
+                  center
+                  tiny
+                  shadow
+                  self='end'
+                  rounded={22}
+                  onPress={this.onRemove}
+                >
+                  REMOVE
+                </Text>
+              </Flex.Cols>
+            ))}
         </Flex.Cols>
       )
     }

diff --git 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
@@ -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
+    ),
 }