fix(rn): pagination + DebugStateBar

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

client/react-native/.babelrc

@@ -8,7 +8,7 @@
     "@babel/plugin-syntax-export-namespace-from",
     "@babel/plugin-proposal-async-generator-functions",
     "transform-export-extensions",
-    "transform-inline-environment-variables"
+    "transform-inline-environment-variables",
     "@babel/plugin-proposal-optional-chaining",
     "@babel/plugin-proposal-nullish-coalescing-operator"
   ],

client/react-native/Makefile

@@ -129,7 +129,7 @@ deps.logs:
 
 ### Build release/debug part ###
 .PHONY: debug.react-native
-debug.react-native:
+debug.react-native: deps
 	react-native start --reset-cache
 
 .PHONY: patch.android
@@ -215,12 +215,15 @@ log.ios:
 .PHONY .IGNORE: clean.bundler_and_pkgs
 clean.bundler_and_pkgs:
 	$(LERNA) clean -y
-	cd $(ROOT)					\
-		&& rm -rf node_modules	\
-		&& watchman watch-del-all
-	rm -rf $$TMPDIR/metro-*
-	rm -rf $$TMPDIR/react-*
-	rm -rf $$TMPDIR/haste-*
+	cd $(ROOT) \
+		&& rm -rf \
+			node_modules \
+			$$TMPDIR/react-native-packager-cache-* \
+			$$TMPDIR/metro-* \
+			$$TMPDIR/react-* \
+			$$TMPDIR/haste-* \
+		&& watchman watch-del-all \
+		&& npm cache clean --force
 
 .PHONY .IGNORE: clean.android
 clean.android:

client/react-native/app/bridge/rpc/rpc.grpcweb.js

@@ -2,13 +2,18 @@ import grpc from 'grpc-web'
 import { getServiceName } from './utils'
 import Stream from 'stream'
 
-const url = new URL(window && window.location ? window.location.href : '')
-const host =
-  url.searchParams.get('daemon-host') ||
-  url.searchParams.get('host') ||
-  '127.0.0.1'
-const port =
-  url.searchParams.get('daemon-port') || url.searchParams.get('port') || '8989'
+let [host, port] = ['127.0.0.1', '8989']
+if (window && window.location && window.location.href) {
+  const url = new URL(window && window.location ? window.location.href : '')
+  host =
+    url.searchParams.get('daemon-host') ||
+    url.searchParams.get('host') ||
+    '127.0.0.1'
+  port =
+    url.searchParams.get('daemon-port') ||
+    url.searchParams.get('port') ||
+    '8989'
+}
 export const DefautlHostname = `http://${host}:${port}`
 
 const { MethodInfo } = grpc.AbstractClientBase
@@ -50,14 +55,22 @@ const stream = (client, hostname) => async (method, request, metadata) => {
     writableObjectMode: true,
   }).wrap(stream)
 
+  let status = null
   // fix that onEnd is not called
-  stream.on('status', status => {
+  stream.on('status', _ => {
+    status = _
     if (status.code === 0) {
       stream.cancel()
-      ptStream.end()
     }
   })
-  stream.on('error', () => {})
+
+  stream.on('error', err => {
+    if (status && status.code === 0) {
+      ptStream.push(null)
+    } else {
+      ptStream.destroy(err)
+    }
+  })
 
   return ptStream
 }

client/react-native/app/bridge/service/entity/event.js

@@ -0,0 +1,6 @@
+import pbjs from 'protobufjs/light'
+import jsonDescriptor from './event.pb.json'
+
+const root = pbjs.Root.fromJSON(jsonDescriptor)
+export const Event = root.lookup('berty.entity.Event')
+export default Event

client/react-native/app/bridge/service/entity/kind.js

@@ -0,0 +1,6 @@
+import pbjs from 'protobufjs/light'
+import jsonDescriptor from './kind.pb.json'
+
+const root = pbjs.Root.fromJSON(jsonDescriptor)
+export const Kind = root.lookup('berty.entity.Kind')
+export default Kind

client/react-native/app/common/helpers/promiseWithTimeout.js

@@ -0,0 +1,11 @@
+export default (promise, timeoutValue, timeoutPromise) =>
+  new Promise((resolve, reject) => {
+    const timeout = setTimeout(
+      () => timeoutPromise().catch(reject),
+      timeoutValue
+    )
+    promise.then(result => {
+      clearTimeout(timeout)
+      resolve(result)
+    })
+  })

client/react-native/app/container/container.gen.js

@@ -164,7 +164,6 @@ class EventListServiceNodePagination extends StreamPagination {
   get store() {
     return this.props.context.entity.event
   }
-
   get method() {
     return this.props.context.node.service.eventList
   }
@@ -183,7 +182,6 @@ class EventUnseenServiceNodePagination extends StreamPagination {
   get store() {
     return this.props.context.entity.event
   }
-
   get method() {
     return this.props.context.node.service.eventUnseen
   }
@@ -272,7 +270,6 @@ class ContactListServiceNodePagination extends StreamPagination {
   get store() {
     return this.props.context.entity.contact
   }
-
   get method() {
     return this.props.context.node.service.contactList
   }
@@ -319,7 +316,6 @@ class ConversationListServiceNodePagination extends StreamPagination {
   get store() {
     return this.props.context.entity.conversation
   }
-
   get method() {
     return this.props.context.node.service.conversationList
   }

client/react-native/app/container/stream.js

@@ -43,8 +43,7 @@ export class Stream extends Component {
     const queue = []
 
     stream.on('data', response => {
-      this.props.response(queue, response)
-      this.setStateDebounce({ queue })
+      this.setStateDebounce({ queue: this.props.response(queue, response) })
     })
   }
 
@@ -152,14 +151,9 @@ export class StreamPagination extends Stream {
     }
 
     // if item must be at end check that it has been forced
-    if (
-      !change.force &&
-      newIndex === this.queue.length &&
-      // FIXME: we should not have to do this
-      this.queue.length !== 0
-    ) {
+    if (!change.force && newIndex === this.queue.length) {
       if (this.queue.length < this.paginate.first) {
-        this.invokeDebounce()
+        this.invoke()
       }
       return
     }
@@ -186,12 +180,17 @@ export class StreamPagination extends Stream {
     }
   }
 
-  observeMutex = new Mutex()
-  observe = async change => {
-    this.observeMutex.acquire().then(unlock => {
-      this.change(change)
-      unlock()
-    })
+  observe = change => {
+    this.change(change)
+    if (this.queue.length) {
+      if (this.queue[this.queue.length - 1] % this.paginate.first === 0) {
+        this.cursor = this.queue[this.queue.length - 1][
+          Case.camel(this.paginate.orderBy || 'id')
+        ]
+      }
+    } else {
+      this.cursor = ''
+    }
     this.smartForceUpdate()
   }
 
@@ -244,7 +243,6 @@ export class StreamPagination extends Stream {
 
   invokeHashTable = {}
 
-  invokeDebounce = debounce(1000, this.invoke)
   invoke = async () => {
     const queue = []
 
@@ -270,14 +268,12 @@ export class StreamPagination extends Stream {
 
     stream.on('end', () => {
       this.loading = false
-
-      if (queue.length !== 0) {
-        this.cursor =
-          queue[queue.length - 1][Case.camel(this.paginate.orderBy || 'id')]
-      }
-
+      this.cursor = this.queue.length
+        ? this.queue[this.queue.length - 1][
+            Case.camel(this.paginate.orderBy || 'id')
+          ]
+        : ''
       this.smartForceUpdate()
-
       this.invokeHashTable[requestHash] = false
     })
   }

client/react-native/app/main/index.js

@@ -1,7 +1,7 @@
+import 'node-libs-react-native/globals'
 import '@berty/common/helpers/crash-handler.js'
 import '@berty/common/helpers/patch-web.js'
 import '@berty/common/helpers/patch-electron.js'
-import 'node-libs-react-native/globals'
 
 import { Platform, AppRegistry } from 'react-native'
 import React from 'react'

client/react-native/app/template/container/container.gen.js.hbs

@@ -43,29 +43,26 @@ import { Component } from 'react'
             }
           }
 
-          {{#if (hasOwn resolvedRequestType.fields 'paginate')}}
-            {{#with (lookup 'berty.node.CommitLog.Entity')}}
-              {{#each fields}}
-                {{#if (eq resolvedType.name ../../resolvedResponseType.name)}}
-                  {{#with ../../this}}
+          {{#with (lookup 'berty.node.CommitLog.Entity')}}
+            {{#each fields}}
+              {{#if (eq resolvedType.name ../../resolvedResponseType.name)}}
+                {{#with ../../this}}
+                  {{#if (hasOwn resolvedRequestType.fields 'paginate')}}
                     @withStoreContext
                     class {{name}}ServiceNodePagination extends StreamPagination {
-
                       get store () {
                         return this.props.context.entity.{{case 'camel' resolvedResponseType.name}}
                       }
-
                       get method () {
                         return this.props.context.node.service.{{case 'camel' name}}
                       }
                     }
                     {{name}}ServiceNode.Pagination = {{name}}ServiceNodePagination
-                  {{/with}}
-                {{/if}}
-              {{/each}}
-            {{/with}}
-          {{/if}}
-
+                  {{/if}}
+                {{/with}}
+              {{/if}}
+            {{/each}}
+          {{/with}}
 
         {{else}}