fix(rn): pending request pagination

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

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

@@ -1,51 +1,109 @@
+import { ActivityIndicator, FlatList } from 'react-native'
 import React, { PureComponent } from 'react'
-import { Screen, ContactList } from '../../../Library'
-import { colors } from '../../../../constants'
+
+import createTabNavigator from 'react-navigation-deprecated-tab-navigator/src/createTabNavigator'
+
+import { ListItem, Screen, Separator } from '../../../Library'
 import { QueryReducer } from '../../../../relay'
-import { queries, subscriptions } from '../../../../graphql'
 import { borderBottom } from '../../../../styles'
-import createTabNavigator from 'react-navigation-deprecated-tab-navigator/src/createTabNavigator'
+import { colors } from '../../../../constants'
+import { fragments, queries, subscriptions } from '../../../../graphql'
 
-class Request extends PureComponent {
+const Item = fragments.Contact(({ data, onPress }) => (
+  <ListItem
+    id={data.id}
+    title={data.overrideDisplayName || data.displayName}
+    subtitle=''
+    onPress={onPress}
+  />
+))
+
+class List extends PureComponent {
+  onEndReached = () => {
+    if (!this.props.relay.hasMore() || this.props.relay.isLoading()) {
+      return
+    }
+    this.props.relay.loadMore(10, console.error)
+  }
   componentDidMount () {
-    this.subscriber = subscriptions.contactRequest.subscribe({
-      updater: (store, data) => this.retry && this.retry(),
-    })
+    this.props.navigation.setParams({ searchHandler: this.searchHandler })
+    this.subscribers = [
+      subscriptions.contactRequest.subscribe({
+        updater: (store, data) => {
+          // TODO
+          console.log('not implemented')
+        },
+      }),
+      subscriptions.contactRequestAccepted.subscribe({
+        updater: (store, data) => {
+          // TODO
+          console.log('not implemented')
+        },
+      }),
+    ]
   }
-
   componentWillUnmount () {
-    this.subscriber.unsubscribe()
+    this.subscribers.forEach(subscriber => subscriber.unsubscribe())
+  }
+
+  onPressItem = id => () => {
+    this.props.navigation.push('contacts/add/request-validation', { id })
   }
 
+  render () {
+    const { data, relay } = this.props
+    const edges = (data && data.ContactList && data.ContactList.edges) || []
+    return (
+      <FlatList
+        data={edges}
+        ItemSeparatorComponent={({ highlighted }) => (
+          <Separator highlighted={highlighted} />
+        )}
+        refreshing={relay.isLoading()}
+        onEndReached={this.onEndReached}
+        keyExtractor={this.props.keyExtractor}
+        renderItem={({ item: { node, cursor } }) => (
+          <Item data={node} onPress={this.onPressItem(node.id)} />
+        )}
+      />
+    )
+  }
+}
+
+const ReceivedList = fragments.ContactList.Received(List)
+const SentList = fragments.ContactList.Sent(List)
+
+class Request extends PureComponent {
   render () {
     const { navigation } = this.props
     const {
       state: { routeName },
     } = navigation
 
-    const filter = routeName === 'Received' ? 4 : 3 // RequestedMe || isRequested
-    const subtitle =
-      routeName === 'Received'
-        ? 'Request received 3 hours ago ...'
-        : 'Request sent 3 hours ago ...' // Placeholder
-
     return (
       <Screen style={[{ backgroundColor: colors.white }]}>
-        <QueryReducer query={queries.ContactList}>
+        <QueryReducer
+          query={queries.ContactList[routeName]}
+          variables={queries.ContactList[routeName].defaultVariables}
+        >
           {(state, retry) => {
-            this.retry = retry
-            return (
-              <ContactList
-                list={[]
-                  .concat(state.data.ContactList || [])
-                  .filter(entry => entry.status === filter)}
-                state={state}
-                retry={retry}
-                subtitle={subtitle}
-                action='contacts/add/request-validation'
-                navigation={navigation}
-              />
-            )
+            switch (state.type) {
+              default:
+              case state.loading:
+                return <ActivityIndicator size='large' />
+              case state.success:
+                return routeName === 'Received' ? (
+                  <ReceivedList
+                    {...state}
+                    retry={retry}
+                    navigation={navigation}
+                  />
+                ) : (
+                  <SentList {...state} retry={retry} navigation={navigation} />
+                )
+              case state.error:
+                return null
+            }
           }}
         </QueryReducer>
       </Screen>

client/react-native/common/graphql/fragments/ContactList.js

@@ -1,7 +1,7 @@
 import { graphql, createPaginationContainer } from 'react-relay'
-import { ContactList } from '../queries'
+import * as queries from '../queries'
 
-export default component =>
+const ContactList = component =>
   createPaginationContainer(
     component,
     graphql`
@@ -37,18 +37,124 @@ export default component =>
     `,
     {
       direction: 'forward',
-      getConnectionFromProps (props) {
+      getConnectionFromProps: props => {
         return props.data.ContactList
       },
-      getFragmentVariables (prevVars, totalCount) {
+      getFragmentVariables: (prevVars, totalCount) => {
         return {
           ...prevVars,
           count: totalCount,
         }
       },
-      getVariables (props, { count, cursor }, fragmentVariables) {
-        return { count, cursor }
+      getVariables: (props, { count, cursor }, fragmentVariables) => {
+        return { ...fragmentVariables, count, cursor }
       },
-      query: ContactList,
+      query: queries.ContactList,
     }
   )
+
+ContactList.Received = component =>
+  createPaginationContainer(
+    component,
+    graphql`
+      fragment ContactListReceived on Query
+        @argumentDefinitions(
+          filter: { type: BertyEntityContactInput }
+          count: { type: Int32 }
+          cursor: { type: String }
+        ) {
+        ContactList(
+          filter: $filter
+          first: $count
+          after: $cursor
+          orderBy: ""
+          orderDesc: false
+        ) @connection(key: "ContactListReceived_ContactList") {
+          edges {
+            cursor
+            node {
+              id
+              ...Contact
+            }
+          }
+          pageInfo {
+            count
+            hasNextPage
+            hasPreviousPage
+            endCursor
+            startCursor
+          }
+        }
+      }
+    `,
+    {
+      direction: 'forward',
+      getConnectionFromProps: props => {
+        return props.data.ContactList
+      },
+      getFragmentVariables: (prevVars, totalCount) => {
+        return {
+          ...prevVars,
+          count: totalCount,
+        }
+      },
+      getVariables: (props, { count, cursor }, fragmentVariables) => {
+        return { ...fragmentVariables, count, cursor }
+      },
+      query: queries.ContactList.Received,
+    }
+  )
+
+ContactList.Sent = component =>
+  createPaginationContainer(
+    component,
+    graphql`
+      fragment ContactListSent on Query
+        @argumentDefinitions(
+          filter: { type: BertyEntityContactInput }
+          count: { type: Int32 }
+          cursor: { type: String }
+        ) {
+        ContactList(
+          filter: $filter
+          first: $count
+          after: $cursor
+          orderBy: ""
+          orderDesc: false
+        ) @connection(key: "ContactListSent_ContactList") {
+          edges {
+            cursor
+            node {
+              id
+              ...Contact
+            }
+          }
+          pageInfo {
+            count
+            hasNextPage
+            hasPreviousPage
+            endCursor
+            startCursor
+          }
+        }
+      }
+    `,
+    {
+      direction: 'forward',
+      getConnectionFromProps: props => {
+        return props.data.ContactList
+      },
+      getFragmentVariables: (prevVars, totalCount) => {
+        return {
+          ...prevVars,
+          count: totalCount,
+        }
+      },
+      getVariables: (props, { count, cursor }, fragmentVariables) => {
+        return { ...fragmentVariables, count, cursor }
+      },
+      query: queries.ContactList.Sent,
+    }
+  )
+
+export default ContactList

client/react-native/common/graphql/queries/ContactList.js

@@ -1,6 +1,6 @@
 import { graphql } from 'react-relay'
 
-export default graphql`
+const ContactList = graphql`
   query ContactListQuery(
     $filter: BertyEntityContactInput
     $count: Int32
@@ -9,3 +9,53 @@ export default graphql`
     ...ContactList @arguments(filter: $filter, count: $count, cursor: $cursor)
   }
 `
+
+ContactList.Received = graphql`
+  query ContactListReceivedQuery(
+    $filter: BertyEntityContactInput
+    $count: Int32
+    $cursor: String
+  ) {
+    ...ContactListReceived
+      @arguments(filter: $filter, count: $count, cursor: $cursor)
+  }
+`
+
+ContactList.Received.defaultVariables = {
+  filter: {
+    id: '',
+    status: 4,
+    displayName: '',
+    displayStatus: '',
+    overrideDisplayName: '',
+    overrideDisplayStatus: '',
+  },
+  count: 10,
+  cursor: '',
+}
+
+ContactList.Sent = graphql`
+  query ContactListSentQuery(
+    $filter: BertyEntityContactInput
+    $count: Int32
+    $cursor: String
+  ) {
+    ...ContactListSent
+      @arguments(filter: $filter, count: $count, cursor: $cursor)
+  }
+`
+
+ContactList.Sent.defaultVariables = {
+  filter: {
+    id: '',
+    status: 3,
+    displayName: '',
+    displayStatus: '',
+    overrideDisplayName: '',
+    overrideDisplayStatus: '',
+  },
+  count: 10,
+  cursor: '',
+}
+
+export default ContactList

client/react-native/common/graphql/queries/index.js

@@ -1,5 +1,4 @@
 export ConversationList from './ConversationList'
 export ContactList from './ContactList'
-export EventList from './EventList'
 export Contact from './Contact'
 export GetDeviceInfos from './DeviceInfos'

core/api/node/graphql/resolver.go

@@ -168,15 +168,13 @@ func (r *mutationResolver) RunIntegrationTests(ctx context.Context, name string)
 }
 
 func (r *mutationResolver) ContactRequest(ctx context.Context, contact *entity.Contact, introText string) (*entity.Contact, error) {
-	// logger().Debug("CONTACT_REQUEST_RESOLVER")
 	contact.ID = strings.SplitN(contact.ID, ":", 2)[1]
 	return r.client.ContactRequest(ctx, &node.ContactRequestInput{
 		Contact:   contact,
 		IntroText: introText,
 	})
 }
 func (r *mutationResolver) ContactAcceptRequest(ctx context.Context, id string, createdAt *time.Time, updatedAt *time.Time, deletedAt *time.Time, sigchain []byte, status *int32, devices []*entity.Device, displayName string, displayStatus string, overrideDisplayName string, overrideDisplayStatus string) (*entity.Contact, error) {
-	// logger().Debug("CONTACT_ACCEPT_REQUEST_RESOLVER")
 	return r.client.ContactAcceptRequest(ctx, &entity.Contact{
 		ID: strings.SplitN(id, ":", 2)[1],
 	})