Merge pull request #238 from gponsinet/feat/gponsinet/implement-event…

…-subscription feat(rn): implement event subscription
berty · Sep 11, 2018 · 7e8c29f · 7e8c29f
2 parents 459892b + a950cfb
commit 7e8c29f
Show file tree

Hide file tree

Showing 18 changed files with 403 additions and 178 deletions.
diff --git a/client/react-native/common/components/App.js b/client/react-native/common/components/App.js
@@ -1,18 +1,34 @@
 import React, { PureComponent } from 'react'
 import Screens from './Screens'
 import { NativeModules } from 'react-native'
+import { subscriptions } from '../graphql'
 
 const { CoreModule } = NativeModules
 
 export default class App extends PureComponent {
   async componentDidMount () {
     try {
       await CoreModule.start()
+      subscriptions.EventStream.subscribe(function * () {
+        try {
+          while (true) {
+            console.log(yield)
+          }
+        } catch (error) {
+          console.error(error)
+        }
+      })
+      subscriptions.EventStream.start()
     } catch (err) {
       console.error(err)
+      subscriptions.EventStream.dispose()
     }
   }
 
+  componentWillUnmount () {
+    subscriptions.EventStream.dispose()
+  }
+
   render () {
     return <Screens />
   }

diff --git a/client/react-native/common/components/Library/Button.js b/client/react-native/common/components/Library/Button.js
@@ -1,11 +1,6 @@
 import React from 'react'
-import { TouchableOpacity } from 'react-native'
 import { Text } from '../Library'
 
-const Button = ({ onPress, ...props }) => (
-  <TouchableOpacity onPress={onPress}>
-    <Text {...props} />
-  </TouchableOpacity>
-)
+const Button = ({ style, ...props }) => <Text button {...props} />
 
 export default Button
diff --git a/client/react-native/common/components/Library/Text.js b/client/react-native/common/components/Library/Text.js
@@ -1,5 +1,10 @@
 import React from 'react'
-import { View, Text as TextNative, TextInput } from 'react-native'
+import {
+  TouchableOpacity,
+  View,
+  Text as TextNative,
+  TextInput,
+} from 'react-native'
 import { Icon } from '.'
 import {
   tinyText,
@@ -132,29 +137,30 @@ const getJustify = (
 ) => find({ inside: props, from: justify, or: 'center' })
 
 export const BackgroundText = props => {
-  const { background, children } = props
-  return (
-    <View
-      style={[
-        {
-          backgroundColor:
-            (background === true && colors.blackGrey) ||
-            background ||
-            colors.transparent,
-        },
-        getBorderRadius(props),
-        getPadding(props),
-        props.shadow && shadow,
-        props.margin && typeof props.margin === 'boolean'
-          ? margin
-          : { margin: props.margin },
-        props.flex && typeof props.flex === 'boolean'
-          ? { flex: 1 }
-          : { flex: props.flex },
-      ]}
-    >
+  const { background, children, button, onPress } = props
+  const style = [
+    {
+      backgroundColor:
+        (background === true && colors.blackGrey) ||
+        background ||
+        colors.transparent,
+    },
+    getBorderRadius(props),
+    getPadding(props),
+    props.shadow && shadow,
+    props.margin && typeof props.margin === 'boolean'
+      ? margin
+      : { margin: props.margin },
+    props.flex && typeof props.flex === 'boolean'
+      ? { flex: 1 }
+      : { flex: props.flex },
+  ]
+  return button ? (
+    <TouchableOpacity style={style} onPress={onPress}>
       {children}
-    </View>
+    </TouchableOpacity>
+  ) : (
+    <View style={style}>{children}</View>
   )
 }
 

diff --git a/client/react-native/common/components/Screens/Chats/List.js b/client/react-native/common/components/Screens/Chats/List.js
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react'
-import { FlatList, TouchableOpacity, Image } from 'react-native'
+import { FlatList, TouchableOpacity, Image, View } from 'react-native'
 import { Screen, Flex, Text, Separator } from '../../Library'
 import { colors } from '../../../constants'
 import {
@@ -9,90 +9,205 @@ import {
   borderBottom,
 } from '../../../styles'
 import { QueryReducer } from '../../../relay'
-import { queries } from '../../../graphql'
+import { createFragmentContainer, graphql } from 'react-relay'
 
-const Header = ({ navigation }) => (
-  <Flex.Rows
-    size={1}
-    style={[
-      { backgroundColor: colors.white, height: 56 },
-      borderBottom,
-      padding,
-    ]}
-  >
-    <Flex.Cols size={1} align='start' space='between'>
-      <Text icon='message-circle' left large color={colors.black}>
-        Chats
-      </Text>
-    </Flex.Cols>
-  </Flex.Rows>
-)
+class Item extends PureComponent {
+  render () {
+    const { data, navigation } = this.props
+    const { title } = data
+    return (
+      <TouchableOpacity
+        onPress={() => navigation.push('Detail', { conversation: data })}
+        style={{
+          backgroundColor: colors.white,
+          paddingVertical: 16,
+          height: 71,
+        }}
+      >
+        <Flex.Cols align='left'>
+          <Flex.Rows size={1} align='left' style={{ marginLeft: 30 }}>
+            <Image
+              style={{ width: 40, height: 40, borderRadius: 50 }}
+              source={{
+                uri: 'https://api.adorable.io/avatars/285/' + title + '.png',
+              }}
+            />
+          </Flex.Rows>
+          <Flex.Rows size={6} align='left' style={{ marginLeft: 14 }}>
+            <Text color={colors.black} left middle>
+              {title}
+            </Text>
+            <Text color={colors.subtleGrey} tiny>
+              Last message sent 3 hours ago ...
+            </Text>
+          </Flex.Rows>
+        </Flex.Cols>
+      </TouchableOpacity>
+    )
+  }
+}
 
-const Item = ({ data, navigation }) => {
-  const { title } = data
-  return (
-    <TouchableOpacity
-      onPress={() => navigation.push('Detail', { conversation: data })}
-      style={{
-        backgroundColor: colors.white,
-        paddingVertical: 16,
-        height: 71,
-      }}
-    >
-      <Flex.Cols align='left'>
-        <Flex.Rows size={1} align='left' style={{ marginLeft: 30 }}>
-          <Image
-            style={{ width: 40, height: 40, borderRadius: 50 }}
-            source={{
-              uri: 'https://api.adorable.io/avatars/285/' + title + '.png',
-            }}
+class List extends PureComponent {
+  // TODO: implement pagination
+  onEndReached = info => {
+    // if (!this.props.relay.hasMore() || this.props.relay.isLoading()) {
+    //   return
+    // }
+    // this.props.relay.loadMore(
+    //   10, // Fetch the next 10 feed items
+    //   error => {
+    //     console.log(error)
+    //   }
+    // )
+  }
+
+  render () {
+    const { data, navigation, loading, retry } = this.props
+    return (
+      <FlatList
+        data={data.ConversationList || []}
+        style={[paddingLeft, paddingRight]}
+        ItemSeparatorComponent={({ highlighted }) => (
+          <Separator highlighted={highlighted} />
+        )}
+        onEndReached={this.onEndReached}
+        refreshing={loading}
+        onRefresh={retry}
+        renderItem={data => (
+          <ItemContainer
+            key={data.id}
+            data={data.item}
+            separators={data.separators}
+            navigation={navigation}
           />
-        </Flex.Rows>
-        <Flex.Rows size={6} align='left' style={{ marginLeft: 14 }}>
-          <Text color={colors.black} left middle>
-            {title}
-          </Text>
-          <Text color={colors.subtleGrey} tiny>
-            Last message sent 3 hours ago ...
-          </Text>
-        </Flex.Rows>
+        )}
+      />
+    )
+  }
+}
+
+export default class ListScreen extends PureComponent {
+  static Header = ({ navigation }) => (
+    <View
+      style={[
+        { backgroundColor: colors.white, height: 56 },
+        borderBottom,
+        padding,
+      ]}
+    >
+      <Flex.Cols size={1} align='start' space='between'>
+        <Text icon='message-circle' left large color={colors.black}>
+          Chats
+        </Text>
       </Flex.Cols>
-    </TouchableOpacity>
+    </View>
   )
-}
 
-export default class List extends PureComponent {
   static navigationOptions = ({ navigation }) => ({
-    header: <Header navigation={navigation} />,
+    header: <ListScreen.Header navigation={navigation} />,
     tabBarVisible: true,
   })
 
   render () {
     const { navigation } = this.props
     return (
       <Screen style={[{ backgroundColor: colors.white }]}>
-        <QueryReducer query={queries.ConversationList}>
+        <QueryReducer
+          query={graphql`
+            query ListQuery {
+              ConversationList {
+                ...ListItem
+              }
+            }
+          `}
+        >
           {(state, retry) => (
-            <FlatList
-              data={state.data.ConversationList || []}
-              style={[paddingLeft, paddingRight]}
-              ItemSeparatorComponent={({ highlighted }) => (
-                <Separator highlighted={highlighted} />
-              )}
-              refreshing={state.type === state.loading}
-              onRefresh={retry}
-              renderItem={data => (
-                <Item
-                  key={data.id}
-                  data={data.item}
-                  separators={data.separators}
-                  navigation={navigation}
-                />
-              )}
+            <List
+              navigation={navigation}
+              data={state.data}
+              loading={state.type === state.loading}
+              retry={retry}
             />
           )}
         </QueryReducer>
       </Screen>
     )
   }
 }
+
+const ItemContainer = createFragmentContainer(
+  Item,
+  graphql`
+    fragment ListItem on BertyEntityConversation {
+      id
+      createdAt
+      updatedAt
+      title
+      topic
+      members {
+        id
+        status
+        contactId
+      }
+    }
+  `
+)
+
+// TODO: implement pagination
+// const ListPaginationContainer = createPaginationContainer(
+//   List,
+//   {
+//     query: graphql`
+//       fragment List_query on Query {
+//         ConversationList @connection(key: "List_items") {
+//           edges {
+//             node {
+//               ...ListItem
+//             }
+//           }
+//         }
+//       }
+//     `,
+//   },
+//   {
+//     direction: 'forward',
+//     getConnectionFromProps (props) {
+//       return props.query && props.query.items
+//     },
+//     getVariables (props, { cursor }, fragmentVariables) {
+//       return {
+//         cursor,
+//       }
+//     },
+//     variables: { cursor: null },
+//     query: graphql`
+//       query ListPaginationQuery($cursor: String) {
+//         ...List_query
+//       }
+//     `,
+//   }
+// )
+//
+// // eslint-disable-next-line
+// const ListQueryReducer = () => (
+//   <QueryReducer
+//     query={graphql`
+//       query ListQuery($cursor: String) {
+//         ...List_query
+//       }
+//     `}
+//     variables={{ cursor: null }}
+//   >
+//     {(state, retry) => {
+//       switch (state.type) {
+//         default:
+//         case state.loading:
+//           return <List {...state} />
+//         case state.success:
+//           return <ListPaginationContainer {...state} />
+//         case state.error:
+//           return <Text>Error</Text>
+//       }
+//     }}
+//   </QueryReducer>
+// )
diff --git a/client/react-native/common/components/Screens/Contacts/Add/ByPublicKey.js b/client/react-native/common/components/Screens/Contacts/Add/ByPublicKey.js
@@ -27,7 +27,6 @@ class ByPublicKey extends PureComponent {
     const {
       state: { routeName },
     } = navigation
-    console.log(routeName)
     const { contactID, myID } = this.state
     return (
       <Screen style={[{ backgroundColor: colors.white }, paddingVertical]}>