fix(rn): settings list

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

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

@@ -1,5 +1,5 @@
 import { observer } from 'mobx-react'
-import { observe } from 'mobx'
+import { observe, action } from 'mobx'
 import { Stream, StreamPagination } from './stream'
 import { Unary } from './unary'
 import { Entity } from './entity'
@@ -10,125 +10,125 @@ import { Component } from 'react'
 @observer
 export class ConfigEntity extends Entity {
   fetch = () => {
-    const { context, id } = this.props
-    return context.node.service.config({ id })
+    const { context, children, ...input } = this.props
+    return context.node.service.config(input)
   }
 
-  get entity () {
-    const { context, id } = this.props
-    return context.entity.config.get(id)
+  get store () {
+    const { context } = this.props
+    return context.entity.config
   }
 }
 
 @withStoreContext
 @observer
 export class ContactEntity extends Entity {
-  fetch = () => {
-    const { context, id } = this.props
-    return context.node.service.contact({ id })
+  @action.bound fetch () {
+    const { context, children, ...input } = this.props
+    return context.node.service.contact(input)
   }
 
-  get entity () {
-    const { context, id } = this.props
-    return context.entity.contact.get(id)
+  get store () {
+    const { context } = this.props
+    return context.entity.contact
   }
 }
 
 @withStoreContext
 @observer
 export class DeviceEntity extends Entity {
   fetch = () => {
-    const { context, id } = this.props
-    return context.node.service.device({ id })
+    const { context, children, ...input } = this.props
+    return context.node.service.device(input)
   }
 
-  get entity () {
-    const { context, id } = this.props
-    return context.entity.device.get(id)
+  get store () {
+    const { context } = this.props
+    return context.entity.device
   }
 }
 
 @withStoreContext
 @observer
 export class ConversationEntity extends Entity {
   fetch = () => {
-    const { context, id } = this.props
-    return context.node.service.conversation({ id })
+    const { context, children, ...input } = this.props
+    return context.node.service.conversation(input)
   }
 
-  get entity () {
-    const { context, id } = this.props
-    return context.entity.conversation.get(id)
+  get store () {
+    const { context } = this.props
+    return context.entity.conversation
   }
 }
 
 @withStoreContext
 @observer
 export class ConversationMemberEntity extends Entity {
   fetch = () => {
-    const { context, id } = this.props
-    return context.node.service.conversationMember({ id })
+    const { context, children, ...input } = this.props
+    return context.node.service.conversationMember(input)
   }
 
-  get entity () {
-    const { context, id } = this.props
-    return context.entity.conversationMember.get(id)
+  get store () {
+    const { context } = this.props
+    return context.entity.conversationMember
   }
 }
 
 @withStoreContext
 @observer
 export class EventEntity extends Entity {
   fetch = () => {
-    const { context, id } = this.props
-    return context.node.service.event({ id })
+    const { context, children, ...input } = this.props
+    return context.node.service.event(input)
   }
 
-  get entity () {
-    const { context, id } = this.props
-    return context.entity.event.get(id)
+  get store () {
+    const { context } = this.props
+    return context.entity.event
   }
 }
 
 @withStoreContext
 @observer
 export class DevicePushConfigEntity extends Entity {
   fetch = () => {
-    const { context, id } = this.props
-    return context.node.service.devicePushConfig({ id })
+    const { context, children, ...input } = this.props
+    return context.node.service.devicePushConfig(input)
   }
 
-  get entity () {
-    const { context, id } = this.props
-    return context.entity.devicePushConfig.get(id)
+  get store () {
+    const { context } = this.props
+    return context.entity.devicePushConfig
   }
 }
 
 @withStoreContext
 @observer
 export class DevicePushIdentifierEntity extends Entity {
   fetch = () => {
-    const { context, id } = this.props
-    return context.node.service.devicePushIdentifier({ id })
+    const { context, children, ...input } = this.props
+    return context.node.service.devicePushIdentifier(input)
   }
 
-  get entity () {
-    const { context, id } = this.props
-    return context.entity.devicePushIdentifier.get(id)
+  get store () {
+    const { context } = this.props
+    return context.entity.devicePushIdentifier
   }
 }
 
 @withStoreContext
 @observer
 export class SenderAliasEntity extends Entity {
   fetch = () => {
-    const { context, id } = this.props
-    return context.node.service.senderAlias({ id })
+    const { context, children, ...input } = this.props
+    return context.node.service.senderAlias(input)
   }
 
-  get entity () {
-    const { context, id } = this.props
-    return context.entity.senderAlias.get(id)
+  get store () {
+    const { context } = this.props
+    return context.entity.senderAlias
   }
 }
 

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

@@ -1,12 +1,38 @@
 import { Component } from 'react'
+import { deepEqual, deepFilterEqual } from './helper'
 
 export class Entity extends Component {
+  componentDidMount () {
+    if (this.entity == null) {
+      this.fetch()
+    }
+  }
+
+  componentWillReceiveProps (props) {
+    if (!deepEqual(props, this.props)) {
+      this.fetch()
+    }
+  }
+
+  get entity () {
+    const { context, children, id, ...filter } = this.props
+
+    if (id) {
+      return this.store.get(id)
+    }
+    for (const [, data] of this.store) {
+      if (deepFilterEqual(filter, data)) {
+        return data
+      }
+    }
+    return null
+  }
+
   render () {
     const { children } = this.props
     if (this.entity) {
       return children(this.entity)
     }
-    this.fetch()
     return children()
   }
 }

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

@@ -0,0 +1,48 @@
+export const deepFilterEqual = (a, b, opts = { exclude: [] }) => {
+  const { exclude } = opts
+  if (!a) {
+    return true
+  }
+  if (typeof a !== typeof b) {
+    return false
+  }
+  switch (typeof a) {
+    case 'object':
+      if (Array.isArray(a)) {
+        return a.every(av => b.some(bv => deepFilterEqual(av, bv)))
+      }
+      return Object.keys(a).every(
+        k =>
+          exclude.some(excludeKey => excludeKey === k) ||
+          deepFilterEqual(a[k], b[k])
+      )
+    default:
+      return a === b
+  }
+}
+
+export const deepEqual = (a, b, opts = { exclude: [] }) => {
+  const { exclude } = opts
+  if (typeof a !== typeof b) {
+    return false
+  }
+  switch (typeof a) {
+    case 'object':
+      if (Array.isArray(a)) {
+        if (!Array.isArray(b)) {
+          return false
+        }
+        return a.every(av => b.some(bv => deepFilterEqual(av, bv)))
+      }
+      if (Array.isArray(b)) {
+        return false
+      }
+      return Object.keys(a).every(
+        k =>
+          exclude.some(excludeKey => excludeKey === k) ||
+          deepFilterEqual(a[k], b[k])
+      )
+    default:
+      return a === b
+  }
+}

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

@@ -2,6 +2,7 @@ import { Mutex } from 'async-mutex'
 import { debounce, throttle } from 'throttle-debounce'
 import { Component } from 'react'
 import objectHash from 'object-hash'
+import { deepFilterEqual } from './helper'
 
 export class Stream extends Component {
   get method () {
@@ -54,29 +55,6 @@ export class Stream extends Component {
   }
 }
 
-const deepFilterEqual = (a, b, opts = { exclude: [] }) => {
-  const { exclude } = opts
-  if (!a) {
-    return true
-  }
-  if (typeof a !== typeof b) {
-    return false
-  }
-  switch (typeof a) {
-    case 'object':
-      if (Array.isArray(a)) {
-        return a.every(av => b.some(bv => deepFilterEqual(av, bv)))
-      }
-      return Object.keys(a).every(
-        k =>
-          exclude.some(excludeKey => excludeKey === k) ||
-          deepFilterEqual(a[k], b[k])
-      )
-    default:
-      return a === b
-  }
-}
-
 export class StreamPagination extends Stream {
   queue = []
   cursor = ''

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

@@ -18,13 +18,13 @@ import { Component } from 'react'
             @observer
             export class {{name}}Entity extends Entity {
               fetch = () => {
-                const { context, id } = this.props
-                return context.node.service.{{case 'camel' name}}({ id })
+                const { context, children, ...input } = this.props
+                return context.node.service.{{case 'camel' name}}(input)
               }
 
-              get entity () {
-                const { context, id } = this.props
-                return context.entity.{{case 'camel' name}}.get(id)
+              get store () {
+                const { context } = this.props
+                return context.entity.{{case 'camel' name}}
               }
             }
           {{/if}}

client/react-native/app/view/screen/Settings/List.js

@@ -1,12 +1,15 @@
 import React, { PureComponent } from 'react'
 
-import { Menu, Screen, Avatar, Header } from '@berty/component'
+import { Menu, Screen, Avatar, Header, Loader } from '@berty/component'
 import { colors } from '@berty/common/constants'
 import { UpdateContext, installUpdate } from '@berty/update'
 import { withNamespaces } from 'react-i18next'
 import I18n from 'i18next'
+import { withStoreContext } from '@berty/store/context'
+import { Store } from '@berty/container'
 
 @withNamespaces()
+@withStoreContext
 class List extends PureComponent {
   static navigationOptions = ({ navigation }) => ({
     header: (
@@ -112,20 +115,28 @@ class List extends PureComponent {
   }
 
   render () {
-    const { navigation, currentUser, t } = this.props
+    const { navigation, t } = this.props
 
     return (
       <Screen>
-        <UpdateContext.Consumer>
-          {({ availableUpdate }) => (
-            <List.Menu
-              navigation={navigation}
-              data={currentUser}
-              availableUpdate={availableUpdate}
-              t={t}
-            />
-          )}
-        </UpdateContext.Consumer>
+        <Store.Entity.Contact status={42}>
+          {data =>
+            data ? (
+              <UpdateContext.Consumer>
+                {({ availableUpdate }) => (
+                  <List.Menu
+                    navigation={navigation}
+                    data={data}
+                    availableUpdate={availableUpdate}
+                    t={t}
+                  />
+                )}
+              </UpdateContext.Consumer>
+            ) : (
+              <Loader />
+            )
+          }
+        </Store.Entity.Contact>
       </Screen>
     )
   }