diff --git a/app/views/ThreadMessagesView/index.js b/app/views/ThreadMessagesView/index.js index 33001d915..eb664d672 100644 --- a/app/views/ThreadMessagesView/index.js +++ b/app/views/ThreadMessagesView/index.js @@ -71,12 +71,10 @@ class ThreadMessagesView extends React.Component { } componentWillUnmount() { + console.countReset(`${ this.constructor.name }.render calls`); if (this.mountInteraction && this.mountInteraction.cancel) { this.mountInteraction.cancel(); } - if (this.loadInteraction && this.loadInteraction.cancel) { - this.loadInteraction.cancel(); - } if (this.syncInteraction && this.syncInteraction.cancel) { this.syncInteraction.cancel(); } @@ -89,13 +87,14 @@ class ThreadMessagesView extends React.Component { } // eslint-disable-next-line react/sort-comp - subscribeData = () => { + subscribeData = async() => { try { const db = database.active; - this.subObservable = db.collections + const subscription = await db.collections .get('subscriptions') - .findAndObserve(this.rid); - this.subSubscription = this.subObservable + .find(this.rid); + const observable = subscription.observe(); + this.subSubscription = observable .subscribe((data) => { this.subscription = data; }); @@ -116,14 +115,14 @@ class ThreadMessagesView extends React.Component { } }); } catch (e) { - log(e); + // Do nothing } } // eslint-disable-next-line react/sort-comp init = () => { if (!this.subscription) { - return; + this.load(); } try { const lastThreadSync = new Date(); @@ -138,6 +137,13 @@ class ThreadMessagesView extends React.Component { } updateThreads = async({ update, remove, lastThreadSync }) => { + // if there's no subscription, manage data on this.state.messages + // note: sync will never be called without subscription + if (!this.subscription) { + this.setState(({ messages }) => ({ messages: [...messages, ...update] })); + return; + } + try { const db = database.active; const threadsCollection = db.collections.get('threads'); @@ -198,13 +204,10 @@ class ThreadMessagesView extends React.Component { rid: this.rid, count: API_FETCH_COUNT, offset: messages.length }); if (result.success) { - this.loadInteraction = InteractionManager.runAfterInteractions(() => { - this.updateThreads({ update: result.threads, lastThreadSync }); - - this.setState({ - loading: false, - end: result.count < API_FETCH_COUNT - }); + this.updateThreads({ update: result.threads, lastThreadSync }); + this.setState({ + loading: false, + end: result.count < API_FETCH_COUNT }); } } catch (e) { @@ -319,6 +322,7 @@ class ThreadMessagesView extends React.Component { } render() { + console.count(`${ this.constructor.name }.render calls`); const { loading, messages } = this.state; const { theme } = this.props; @@ -335,7 +339,7 @@ class ThreadMessagesView extends React.Component { renderItem={this.renderItem} style={[styles.list, { backgroundColor: themes[theme].backgroundColor }]} contentContainerStyle={styles.contentContainer} - keyExtractor={item => item.id} + keyExtractor={item => item._id} onEndReached={this.load} onEndReachedThreshold={0.5} maxToRenderPerBatch={5}