fix: fix bad badge color when one timeout occur

Signed-off-by: Sacha Froment <sfroment42@gmail.com>

123

Signed-off-by: Sacha Froment <sfroment42@gmail.com>

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

@@ -6,7 +6,6 @@ import { padding, borderBottom, paddingBottom } from '../../styles'
 import { isRTL } from '../../i18n'
 import RelayContext from '../../relay/RelayContext'
 import Icon from './Icon'
-// import multiaddr from 'multiaddr'
 
 const [defaultTextColor, defaultBackColor] = [colors.black, colors.white]
 
@@ -23,6 +22,7 @@ class StateBadge extends PureComponent {
       listenInterfaceAddrs: [],
       timeouted: false,
       requestTimeout: 1000,
+      color: colors.black,
     }
 
     this.fetchListenAddrs()
@@ -47,21 +47,25 @@ class StateBadge extends PureComponent {
         })
         .catch((err) => reject(err))
         .finally(() => clearTimeout(timer))
-    }).then((listenAddrs) => setTimeout(caller, watchTime))
+    })
       .catch((err) => console.log('GetListenAddrsFailed with', err))
+      .finally(() => setTimeout(caller, watchTime))
   }
 
   fetchListenAddrs = () => {
     const { context } = this.props
-    this.reqTimeoutOrRetry(this.fetchListenAddrs, context.queries.GetListenAddrs.fetch, (e) => this.setState({ listenAddrs: e.addrs }))
+    this.reqTimeoutOrRetry(this.fetchListenAddrs, context.queries.GetListenAddrs.fetch,
+      (e) => this.setState({ listenAddrs: e.addrs, timeouted: false }, this.setColor)
+    )
   }
 
   fetchListenInterfaceAddrs = () => {
     const { context } = this.props
-    this.reqTimeoutOrRetry(this.fetchListenInterfaceAddrs, context.queries.GetListenInterfaceAddrs.fetch, (e) => this.setState({ listenInterfaceAddrs: e.addrs }))
+    this.reqTimeoutOrRetry(this.fetchListenInterfaceAddrs, context.queries.GetListenInterfaceAddrs.fetch,
+      (e) => this.setState({ listenInterfaceAddrs: e.addrs, timeouted: false }, this.setColor))
   }
 
-  render () {
+  setColor = () => {
     const { listenAddrs, listenInterfaceAddrs, timeouted } = this.state
     let color = colors.black
 
@@ -72,8 +76,6 @@ class StateBadge extends PureComponent {
         try {
           const splited = v.split('/')
           if (splited[1] === 'ip4' && splited[2] !== '127.0.0.1') {
-          // const addr = multiaddr(v).nodeAddress()
-          // if (addr.address !== '127.0.0.1') {
             color = colors.green
           }
         } catch (e) {
@@ -86,6 +88,11 @@ class StateBadge extends PureComponent {
     if (timeouted) {
       color = colors.red
     }
+    this.setState({ color })
+  }
+
+  render () {
+    const { color } = this.state
 
     return (<Icon style={{ color }} name={'material-checkbox-blank-circle'} />)
   }
@@ -169,9 +176,12 @@ export default class Header extends PureComponent {
               middle
               size={5}
             >
-              <RelayContext.Consumer>
-                {context => <StateBadge context={context} />}
-              </RelayContext.Consumer>
+              {navigation.state.routeName === 'chats/list'
+                ? <RelayContext.Consumer>
+                  {context => <StateBadge context={context} />}
+                </RelayContext.Consumer>
+                : null
+              }
               {title}
             </Text>
             {rightBtn ? <View>{rightBtn}</View> : null}

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

@@ -1,7 +1,4 @@
-import { withNamespaces } from 'react-i18next'
-import I18n from 'i18next'
 import React, { PureComponent } from 'react'
-
 import { Avatar, EmptyList, Flex, Header, Screen, Text, Icon } from '../../Library'
 import { BertyP2pKindInputKind } from '../../../graphql/enums.gen'
 import { Pagination, QueryReducer, RelayContext } from '../../../relay'
@@ -12,7 +9,6 @@ import { parseEmbedded } from '../../../helpers/json'
 import { conversation as utils } from '../../../utils'
 import { withNamespaces } from 'react-i18next'
 import I18n from 'i18next'
-import RelayContext from '../../../relay/RelayContext'
 
 class StateBadge extends PureComponent {
   constructor (props) {
@@ -25,10 +21,14 @@ class StateBadge extends PureComponent {
     this.getPing()
   }
 
+  componentWillUnmount () {
+    clearInterval(this.state.setint)
+  }
+
   getPing = () => {
     const { other, context } = this.props
     other.contact.devices.forEach(element => {
-      context.queries.GetTagInfo.fetch({ str: element.contactId })
+      context.queries.Libp2PPing.fetch({ str: element.contactId })
         .then(
           (e) => {
             console.log('fetch ret', e)
@@ -39,7 +39,7 @@ class StateBadge extends PureComponent {
             }
           }
         ).catch(
-          (e) => console.error('err', e)
+          (e) => console.warn('err', e)
         )
     })
   }
@@ -49,7 +49,6 @@ class StateBadge extends PureComponent {
   }
 }
 
-
 const Message = withNamespaces()(({ data, t, ...props }) => {
   switch (data.kind) {
     case BertyP2pKindInputKind.ConversationNewMessage:

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

@@ -0,0 +1,15 @@
+import { fetchQuery, graphql } from 'react-relay'
+
+const query = graphql`
+  query Libp2PPingQuery($str: String!) {
+    Libp2PPing(str: $str) {
+      ret
+    }
+  }
+`
+
+export default context => ({
+  graphql: query,
+  fetch: async variables =>
+    (await fetchQuery(context.environment, query, variables)).Libp2PPing,
+})

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

@@ -1,4 +1,4 @@
-export GetTagInfo from './GetTagInfo'
+export Libp2PPing from './Libp2PPing'
 export GetListenAddrs from './GetListenAddrs'
 export GetListenInterfaceAddrs from './GetListenInterfaceAddrs'
 export ConversationList from './ConversationList'

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

@@ -79,13 +79,7 @@ const setupMiddlewares = async ({ getIp, getPort }) => [
   retryMiddleware({
     allowMutations: true,
     fetchTimeout: 5000,
-    retryDelays: (attempt) => {
-      console.log(attempt)
-      if (attempt === 5) {
-        return false
-      }
-      return 3000
-    },
+    retryDelays: attempt => Math.pow(2, attempt + 4) * 100,
     beforeRetry: async ({
       forceRetry,
       abort,
@@ -94,6 +88,9 @@ const setupMiddlewares = async ({ getIp, getPort }) => [
       lastError,
       req,
     }) => {
+      if (attempt > 5) {
+        abort()
+      }
       req.fetchOpts.url = `http://${await getIp()}:${await getPort()}/query`
 
       // eslint-disable-next-line