fix(rn): subscribers

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

client/react-native/common/components/Library/ContactList.js

@@ -4,7 +4,7 @@ import { Separator, ListItem } from '.'
 
 export default class ContactList extends PureComponent {
   sortContacts = (contactList, sortKey) => {
-    return contactList.sort((a, b) => {
+    return contactList.map(_ => _).sort((a, b) => {
       let an = a[sortKey].toLowerCase()
       let bn = b[sortKey].toLowerCase()
       return an < bn ? -1 : an > bn ? 1 : 0

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

@@ -199,7 +199,9 @@ export default class List extends PureComponent {
     try {
       const { contactsID } = this.state
       await mutations.conversationCreate.commit({ contactsID })
-      this.props.navigation.goBack(null)
+      const retry = this.props.navigation.getParam('retry')
+      retry && retry()
+      this.props.navigation.getParam('goBack')()
     } catch (err) {
       console.error(err)
     }

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

@@ -1,9 +1,9 @@
 import React, { PureComponent } from 'react'
 import { TouchableOpacity, FlatList } from 'react-native'
-import { Text, Flex, Screen } from '../../Library'
 import { colors } from '../../../constants'
 import { queries, mutations, subscriptions } from '../../../graphql'
 import { QueryReducer } from '../../../relay'
+import { Text, Flex, Screen } from '../../Library'
 
 const Message = props => (
   <Text
@@ -30,118 +30,131 @@ const getTitle = ({ title, members } = this.props) =>
     return `${before}${displayName}`
   })
 
-export default class Detail extends PureComponent {
-  static navigationOptions = ({ navigation }) => ({
-    headerTitle: (
-      <Text large>{getTitle(navigation.getParam('conversation'))}</Text>
-    ),
-    headerLeft: (
-      <TouchableOpacity onPress={() => navigation.goBack(null)}>
-        <Text padding large icon='arrow-left' />
-      </TouchableOpacity>
-    ),
-  })
+class List extends PureComponent {
+  componentDidMount () {
+    const { id } = this.props.navigation.getParam('conversation')
+    this.subscriber = subscriptions.conversationNewMessage.subscribe({
+      updater: (store, data) => {
+        if (data.conversationId === id) {
+          this.props.retry && this.props.retry()
+        }
+      },
+    })
+  }
+  componentWillUnmount () {
+    this.subscriber.unsubscribe()
+  }
 
+  render () {
+    const { data, loading, retry } = this.props
+    return (
+      <FlatList
+        style={{ paddingBottom: 60 }}
+        data={(data.EventList || []).filter(
+          event => event.kind === 'ConversationNewMessage'
+        )}
+        refreshing={loading}
+        onRefresh={retry}
+        renderItem={data => (
+          <Message
+            key={data.item.id}
+            data={data.item}
+            separators={data.separators}
+          />
+        )}
+      />
+    )
+  }
+}
+
+class Input extends PureComponent {
   state = {
-    conversation: this.props.navigation.getParam('conversation'),
-    members: this.props.navigation.getParam('conversation').members,
-    messages: [],
     input: '',
   }
 
-  onSubmit = async (data, retry) => {
+  onSubmit = async retry => {
     try {
-      const { conversation, text } = this.state
+      const conversation = this.props.navigation.getParam('conversation')
+      const { input } = this.state
       await mutations.conversationAddMessage.commit({
         conversationID: conversation.id,
-        message: text,
+        message: input,
       })
-      this.retry && this.retry()
+      this.props.retry && this.props.retry()
     } catch (err) {
       console.error(err)
     }
   }
 
-  componentDidMount () {
-    const {
-      conversation: { id },
-    } = this.state
-    this.subscriber = subscriptions.conversationNewMessage.subscribe({
-      updater: (store, data) => {
-        if (data.conversationId === id) {
-          this.retry && this.retry()
-        }
-      },
-    })
+  render () {
+    return (
+      <Text
+        left
+        middle
+        padding
+        margin
+        flex
+        rounded='circle'
+        icon='edit-2'
+        input={{
+          returnKeyType: 'send',
+          onChangeText: input => this.setState({ input }),
+          placeholder: 'Write a secure message...',
+        }}
+        height={36}
+        background={colors.grey8}
+        color={colors.grey5}
+        onSubmit={this.onSubmit}
+      />
+    )
   }
+}
 
-  componentWillUnmount () {
-    this.subscriber.unsubscribe()
-  }
+export default class Detail extends PureComponent {
+  static navigationOptions = ({ navigation }) => ({
+    headerTitle: (
+      <Text large>{getTitle(navigation.getParam('conversation'))}</Text>
+    ),
+    headerLeft: (
+      <TouchableOpacity onPress={() => navigation.goBack(null)}>
+        <Text padding large icon='arrow-left' />
+      </TouchableOpacity>
+    ),
+  })
 
   render () {
-    const {
-      conversation: { id },
-    } = this.state
+    const conversation = this.props.navigation.getParam('conversation')
     return (
       <Screen style={{ backgroundColor: colors.white }}>
-        <Flex.Rows>
-          <QueryReducer
-            query={queries.EventList}
-            variables={{ conversationID: id }}
-          >
-            {(state, retry) =>
-              (this.retry = retry) && (
-                <FlatList
-                  style={{ paddingBottom: 60 }}
-                  data={state.data.EventList.filter(
-                    event => event.kind === 'ConversationNewMessage'
-                  )}
-                  refreshing={state.type === state.loading}
-                  onRefresh={retry}
-                  renderItem={data => (
-                    <Message
-                      key={data.item.id}
-                      data={data.item}
-                      separators={data.separators}
-                    />
-                  )}
-                />
-              )
-            }
-          </QueryReducer>
-          <Flex.Rows
-            style={{
-              position: 'absolute',
-              bottom: 0,
-              left: 0,
-              right: 0,
-              backgroundColor: colors.white,
-              height: 60,
-            }}
-          >
-            <Flex.Cols style={{ height: 60 }} space='center'>
-              <Text
-                left
-                middle
-                padding
-                margin
-                flex
-                rounded='circle'
-                icon='edit-2'
-                input={{
-                  returnKeyType: 'send',
-                  onChangeText: text => this.setState({ text }),
-                  placeholder: 'Write a secure message...',
-                }}
-                height={36}
-                background={colors.grey8}
-                color={colors.grey5}
-                onSubmit={this.onSubmit}
+        <QueryReducer
+          query={queries.EventList}
+          variables={{ conversationID: conversation.id }}
+        >
+          {(state, retry) => (
+            <Flex.Rows>
+              <List
+                navigation={this.props.navigation}
+                data={state.data}
+                loading={state.type === state.loading}
+                retry={retry}
               />
-            </Flex.Cols>
-          </Flex.Rows>
-        </Flex.Rows>
+              <Flex.Rows
+                style={{
+                  position: 'absolute',
+                  bottom: 0,
+                  left: 0,
+                  right: 0,
+                  backgroundColor: colors.white,
+                  height: 60,
+                }}
+              >
+                <Flex.Cols style={{ height: 60 }} space='center'>
+                  <Input navigation={this.props.navigation} retry={retry} />
+                </Flex.Cols>
+              </Flex.Rows>
+            </Flex.Rows>
+          )}
+        </QueryReducer>
       </Screen>
     )
   }

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

@@ -45,8 +45,40 @@ class List extends PureComponent {
     // )
   }
 
+  state = {
+    search: '',
+  }
+
+  searchHandler = search => this.setState({ search })
+
+  filter = ContactList => {
+    const { search } = this.state
+    if (search === '') {
+      return ContactList
+    } else {
+      return ContactList.filter(
+        entry =>
+          entry.displayName.toLowerCase().indexOf(search.toLowerCase()) > -1
+      )
+    }
+  }
+
+  componentDidMount () {
+    this.props.navigation.setParams({
+      searchHandler: this.searchHandler,
+      retry: () => this.props.retry && this.props.retry(),
+    })
+    this.subscribers = [
+      subscriptions.conversationInvite.subscribe({
+        updater: (store, data) => this.props.retry && this.props.retry(),
+      }),
+    ]
+  }
+
   render () {
-    const { data, navigation, loading, retry } = this.props
+    const { navigation, state, retry } = this.props
+    const { data } = state
+    const loading = state.type === state.loading
     return (
       <FlatList
         data={data.ConversationList || []}
@@ -78,21 +110,21 @@ export default class ListScreen extends PureComponent {
         titleIcon='message-circle'
         rightBtnIcon='edit'
         searchBar
-        searchHandler={text => console.log(text)} // Placeholder
-        onPressRightBtn={() => navigation.push('Add')}
+        searchHandler={navigation.getParam('searchHandler')} // Placeholder
+        onPressRightBtn={() =>
+          navigation.push('Add', {
+            goBack: () => {
+              navigation.goBack(null)
+              const retry = navigation.getParam('retry')
+              retry && retry()
+            },
+          })
+        }
       />
     ),
     tabBarVisible: true,
   })
 
-  componentDidMount () {
-    this.subscribers = [
-      subscriptions.conversationInvite.subscribe({
-        updater: (store, data) => this.retry && this.retry(),
-      }),
-    ]
-  }
-
   render () {
     const { navigation } = this.props
     return (
@@ -106,16 +138,9 @@ export default class ListScreen extends PureComponent {
             }
           `}
         >
-          {(state, retry) =>
-            (this.retry = retry) && (
-              <List
-                navigation={navigation}
-                data={state.data}
-                loading={state.type === state.loading}
-                retry={retry}
-              />
-            )
-          }
+          {(state, retry) => {
+            return <List navigation={navigation} state={state} retry={retry} />
+          }}
         </QueryReducer>
       </Screen>
     )