fix(rn): conversation new message updater

fix #624

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

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

@@ -5,7 +5,7 @@ import { Pagination, RelayContext } from '../../../relay'
 import { Screen, Flex, Text, Header } from '../../Library'
 import { border, borderBottom, marginHorizontal } from '../../../styles'
 import { colors } from '../../../constants'
-import { queries, fragments } from '../../../graphql'
+import { fragments } from '../../../graphql'
 
 const Item = fragments.Contact(
   class Item extends PureComponent {
@@ -138,6 +138,11 @@ export default class ListScreen extends Component {
 
   render () {
     const { contactsID } = this.state
+    const {
+      screenProps: {
+        context: { queries },
+      },
+    } = this.props
     return (
       <Screen style={[{ backgroundColor: colors.white }]}>
         <Pagination

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

@@ -4,7 +4,7 @@ import React, { PureComponent } from 'react'
 import { Pagination, RelayContext } from '../../../relay'
 import { Text, Flex, Screen, Header } from '../../Library'
 import { colors } from '../../../constants'
-import { fragments, queries } from '../../../graphql'
+import { fragments } from '../../../graphql'
 import { merge } from '../../../helpers'
 import { shadow } from '../../../styles'
 import { conversation as utils } from '../../../utils'
@@ -163,11 +163,16 @@ export default class Detail extends PureComponent {
 
   render () {
     const conversation = this.props.navigation.getParam('conversation')
-    const { navigation } = this.props
+    const {
+      navigation,
+      screenProps: {
+        context: { queries, subscriptions },
+      },
+    } = this.props
+
     return (
       <Screen style={{ backgroundColor: colors.white, paddingTop: 0 }}>
         <Pagination
-          context={this.props.screenProps.context}
           direction='forward'
           query={queries.EventList.graphql}
           variables={merge([
@@ -179,7 +184,7 @@ export default class Detail extends PureComponent {
               },
             },
           ])}
-          subscriptions={[this.props.screenProps.context.subscriptions.conversationNewMessage(conversation)]}
+          subscriptions={[subscriptions.conversationNewMessage]}
           fragment={fragments.EventList}
           alias='EventList'
           renderItem={props => <Message {...props} navigation={navigation} />}
@@ -195,7 +200,10 @@ export default class Detail extends PureComponent {
             backgroundColor: colors.white,
           }}
         >
-          <Input navigation={this.props.navigation} />
+          <Input
+            navigation={this.props.navigation}
+            screenProps={this.props.screenProps}
+          />
         </View>
       </Screen>
     )

client/react-native/common/components/Screens/Settings/Devtools/Network/Peers.js

@@ -69,13 +69,15 @@ export default class Peers extends Component {
   }
 
   componentWillMount () {
-    this.props.screenProps.context.subscriptions.monitorPeers.subscribe({
-      iterator: undefined,
-      updater: (store, data) => {
-        const peer = data.MonitorPeers
-        this.addPeer(peer)
-      },
-    })
+    this.subscriber = this.props.screenProps.context.subscriptions.monitorPeers.subscribe(
+      {
+        iterator: undefined,
+        updater: (store, data) => {
+          const peer = data.MonitorPeers
+          this.addPeer(peer)
+        },
+      }
+    )
   }
 
   componentDidMount () {
@@ -88,7 +90,7 @@ export default class Peers extends Component {
   }
 
   componentWillUnmount () {
-    this.props.screenProps.context.subscriptions.monitorPeers.dispose()
+    this.subscriber.unsubscribe()
   }
 
   fetchPeers = () => {
@@ -109,9 +111,15 @@ export default class Peers extends Component {
     return (
       <View style={styles.peer}>
         {peer.connection === Connection.CONNECTED ? (
-          <Text style={styles.connected}>{peer.id.slice(0, 30)}...</Text>
+          <Text style={styles.connected}>
+            {peer.id.slice(0, 30)}
+            ...
+          </Text>
         ) : (
-          <Text style={styles.notConnected}>{peer.id.slice(0, 30)}...</Text>
+          <Text style={styles.notConnected}>
+            {peer.id.slice(0, 30)}
+            ...
+          </Text>
         )}
       </View>
     )

client/react-native/common/graphql/mutations/ContactRemove.js

@@ -50,5 +50,7 @@ export default context => (input, configs) =>
       ...contact.default,
       ...input,
     },
-    configs
+    {
+      ...configs,
+    }
   )

client/react-native/common/graphql/mutations/ContactRequest.js

@@ -32,6 +32,7 @@ const ContactRequestMutation = graphql`
     }
   }
 `
+
 export default context => (input, configs) =>
   commit(
     context.environment,
@@ -41,5 +42,5 @@ export default context => (input, configs) =>
       ...contact.default,
       ...input,
     },
-    configs,
+    configs
   )

client/react-native/common/graphql/mutations/ConversationAddMessage.js

@@ -3,7 +3,7 @@ import { graphql } from 'react-relay'
 import { commit } from '../../relay'
 import { conversation } from '../../utils'
 import { merge } from '../../helpers'
-import { updaters } from '..'
+// import { updaters } from '..'
 
 const ConversationAddMessageMutation = graphql`
   mutation ConversationAddMessageMutation(
@@ -39,17 +39,18 @@ export default context => (input, configs) =>
       { conversation: conversation.default, message: { text: '' } },
       input,
     ]),
-    {
-      updater: (store, data) => {
-        updaters.eventList[0](store, {
-          filter: {
-            conversationId: data.ConversationAddMessage.conversationId,
-            kind: data.ConversationAddMessage.kind,
-          },
-        })
-          .add('EventEdge', data.ConversationAddMessage.id)
-          .before()
-      },
-      ...configs,
-    }
+    // {
+    //   updater: (store, data) => {
+    //     updaters.eventList[0](store, {
+    //       filter: {
+    //         conversationId: data.ConversationAddMessage.conversationId,
+    //         kind: data.ConversationAddMessage.kind,
+    //       },
+    //     })
+    //       .add('EventEdge', data.ConversationAddMessage.id)
+    //       .before()
+    //   },
+    //   ...configs,
+    // }
+    configs
   )

client/react-native/common/graphql/mutations/ConversationCreate.js

@@ -1,7 +1,7 @@
 import { graphql } from 'react-relay'
 
 import { commit } from '../../relay'
-import { updaters } from '..'
+// import { updaters } from '..'
 
 const ConversationCreateMutation = graphql`
   mutation ConversationCreateMutation(
@@ -57,14 +57,15 @@ export default context => (input, configs) =>
     ConversationCreateMutation,
     'ConversationCreate',
     input,
-    {
-      updater: (store, data) => {
-        updaters.conversationList.forEach(updater =>
-          updater(store)
-            .add('ConversationEdge', data.ConversationCreate.id)
-            .after()
-        )
-      },
-      ...configs,
-    }
+    // {
+    //   updater: (store, data) => {
+    //     updaters.conversationList.forEach(updater =>
+    //       updater(store)
+    //         .add('ConversationEdge', data.ConversationCreate.id)
+    //         .after()
+    //     )
+    //   },
+    //   ...configs,
+    // }
+    configs
   )

client/react-native/common/graphql/mutations/ConversationInvite.js

@@ -1,7 +1,7 @@
 import { graphql } from 'react-relay'
 
 import { commit } from '../../relay'
-import { updaters } from '..'
+// import { updaters } from '..'
 
 const ConversationInviteMutation = graphql`
   mutation ConversationInviteMutation(
@@ -56,14 +56,15 @@ export default context => (input, configs) =>
     ConversationInviteMutation,
     'ConversationInvite',
     input,
-    {
-      updater: (store, data) => {
-        updaters.conversationList.forEach(updater =>
-          updater(store)
-            .add('ConversationEdge', data.ConversationInvite.id)
-            .after()
-        )
-      },
-      ...configs,
-    }
+    // {
+    //   updater: (store, data) => {
+    //     updaters.conversationList.forEach(updater =>
+    //       updater(store)
+    //         .add('ConversationEdge', data.ConversationInvite.id)
+    //         .after()
+    //     )
+    //   },
+    //   ...configs,
+    // }
+    configs,
   )

client/react-native/common/graphql/subscriptions/ConversationNewMessage.js

@@ -1,17 +1,15 @@
 import EventStream from './EventStream'
 
-export default conversation => ({
-  ...EventStream,
+export default context => ({
+  ...EventStream(context),
   subscribe: ({ updater }) =>
-    EventStream.subscribe({
-      updater: (store, data) => {
-        console.log('RECEIVED_EVENT')
-        if (
-          data.EventStream.kind === 302 &&
-          data.EventStream.conversationId === conversation.id
-        ) {
-          return updater && updater(store, data.EventStream)
-        }
-      },
+    EventStream(context).subscribe({
+      updater:
+        updater &&
+        ((store, data) => {
+          if (data.EventStream.kind === 302) {
+            return updater(store, data.EventStream)
+          }
+        }),
     }),
 })

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

@@ -50,13 +50,13 @@ const createPagination = ({
   children,
   direction = 'forward',
   fragment,
-  connection,
+  alias,
   query,
 }) =>
   Relay.createPaginationContainer(PaginationContainer, fragment, {
     direction,
     getConnectionFromProps: props => {
-      return props.data[connection]
+      return props.data[alias]
     },
     getFragmentVariables: (prevVars, totalCount) => {
       return {
@@ -107,7 +107,6 @@ export default class Pagination extends PureComponent {
                 </Flex.Rows>
               )
             case state.success:
-              console.log(state)
               return <Container {...state} retry={retry} {...this.props} />
             case state.error:
               return null

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

@@ -21,40 +21,20 @@ const logStyle = {
 //   installRelayDevTools()
 // }
 
-const setupSubscription = ({ getIp, getPort }) => async (
+const setupSubscription = ({ ip, port }) => (
   config,
   variables,
   cacheConfig,
   observer
 ) => {
-  try {
-    const query = config.text
-    const subscriptionClient = new SubscriptionClient(
-      `ws://${await getIp()}:${await getPort()}/query`,
-      {
-        reconnect: true,
-      }
-    )
-
-    const onNext = result => {
-      observer.onNext(result)
-    }
-
-    const onError = error => {
-      observer.onError(error)
-    }
-
-    const onComplete = () => {
-      observer.onCompleted()
-    }
+  const query = config.text
+  const client = new SubscriptionClient(`ws://${ip}:${port}/query`, {
+    reconnect: true,
+  })
 
-    subscriptionClient
-      .request({ query, variables })
-      .subscribe(onNext, onError, onComplete)
-  } catch (err) {
-    console.error(err)
-  }
-  // client.unsubscribe()
+  const observable = client.request({ query, variables })
+  observable.subscribe(observer.onNext, observer.onError, observer.onCompleted)
+  return observable
 }
 
 const perfLogger = (msg, req, res) => {
@@ -104,7 +84,10 @@ const setupMiddlewares = async ({ getIp, getPort }) => [
 export const setup = async ({ getIp, getPort }) =>
   new Environment({
     network: new RelayNetworkLayer(await setupMiddlewares({ getIp, getPort }), {
-      subscribeFn: await setupSubscription({ getIp, getPort }),
+      subscribeFn: setupSubscription({
+        ip: await getIp(),
+        port: await getPort(),
+      }),
     }),
     store: new Store(new RecordSource()),
   })

client/react-native/common/relay/fragment-helper.js

@@ -2,7 +2,6 @@ import Relay from 'react-relay'
 
 export class ConnectionHelper {
   constructor (selection, metadata) {
-    console.log(metadata)
     Object.keys(selection).forEach(k => (this[k] = selection[k]))
     Object.keys(metadata).forEach(k => (this[k] = metadata[k]))
   }
@@ -17,7 +16,6 @@ export class ConnectionHelper {
     _.concreteType
 
   get key () {
-    console.log('key')
     return this.name.replace(/^__/g, '').replace(/_connection$/g, '')
   }
 }
@@ -37,7 +35,6 @@ export class FragmentHelper {
   getSelection = alias => this.selections.find(_ => _.alias === alias)
 
   getConnection = (alias, _) => {
-    console.log('getConnection')
     return alias == null
       ? this.getDefaultConnection()
       : (_ = this.getSelection(alias)) &&
@@ -49,7 +46,6 @@ export class FragmentHelper {
   }
 
   getDefaultConnection = _ => {
-    console.log('getDefaultConnection')
     return (
       (_ = this.selections.find(_ => _.concreteType.match(/Connection$/g))) &&
       new ConnectionHelper(_, this.metadata.connection[0])