Cache rendered messages

zulip · Aug 15, 2017 · 2a4bf2e · 2a4bf2e
1 parent 8c126f1
commit 2a4bf2e
Show file tree

Hide file tree

Showing 9 changed files with 40 additions and 53 deletions.
diff --git a/src/message/MessageFull.js b/src/message/MessageFull.js
@@ -30,7 +30,7 @@ const styles = StyleSheet.create({
   },
 });
 
-class MessageFull extends PureComponent {
+export default class MessageFull extends PureComponent {
   props: {
     actions: Actions,
     ownEmail: string,
@@ -96,5 +96,3 @@ class MessageFull extends PureComponent {
     );
   }
 }
-
-export default MessageFull;
diff --git a/src/message/MessageList.js b/src/message/MessageList.js
@@ -6,8 +6,7 @@ import { nullFunction } from '../nullObjects';
 import { LoadingIndicator } from '../common';
 import MessageTyping from '../message/MessageTyping';
 import InfiniteScrollView from './InfiniteScrollView';
-import renderMessages from './renderMessages';
-import type { Actions, TypingState, Message, Narrow } from '../types';
+import type { Actions, TypingState } from '../types';
 
 type Props = {
   actions: Actions,
@@ -18,8 +17,7 @@ type Props = {
   singleFetchProgress: boolean,
   onScroll: () => void,
   typingUsers?: TypingState,
-  messages: Array<Message>,
-  narrow: Narrow,
+  renderedMessages: any[],
 };
 
 export default class MessageList extends PureComponent {
@@ -49,25 +47,19 @@ export default class MessageList extends PureComponent {
       singleFetchProgress,
       onScroll,
       typingUsers,
-      messages,
-      narrow,
+      renderedMessages,
     } = this.props;
 
-    const messageList = renderMessages({
-      messages,
-      narrow,
-    });
-
     // `headerIndices` tell the scroll view which components are headers
     // and are eligible to be docked at the top of the view.
     const headerIndices = [];
-    for (let i = 0; i < messageList.length; i++) {
-      const elem = messageList[i];
+    for (let i = 0; i < renderedMessages.length; i++) {
+      const elem = renderedMessages[i];
       if (elem.props.type === 'header') {
         headerIndices.push(i + 1);
       }
       if (elem.props.type === 'message') {
-        messageList[i] = (
+        renderedMessages[i] = (
           <TaggedView
             key={elem.props.message.id}
             tagID={elem.props.message.id.toString()}
@@ -82,13 +74,13 @@ export default class MessageList extends PureComponent {
       <InfiniteScrollView
         style={styles.messageList}
         automaticallyAdjustContentInset="false"
-        stickyHeaderIndices={headerIndices}
+        stickyHeaderIndices={[]}
         onStartReached={actions.fetchOlder}
         onEndReached={actions.fetchNewer}
         autoScrollToBottom={this.autoScrollToBottom}
         onScroll={onScroll}>
         <LoadingIndicator active={fetchingOlder} caughtUp={caughtUpOlder} />
-        {messageList}
+        {renderedMessages}
         {!singleFetchProgress && fetchingNewer && <LoadingIndicator active />}
         {typingUsers && <MessageTyping users={typingUsers} actions={actions} />}
       </InfiniteScrollView>

diff --git a/src/message/MessageListContainer.js b/src/message/MessageListContainer.js
@@ -9,7 +9,7 @@ import {
   getAuth,
   getFlags,
   getCurrentTypingUsers,
-  getShownMessagesInActiveNarrow,
+  getRenderedMessages,
   getActiveNarrow,
   getCaughtUpForActiveNarrow,
 } from '../selectors';
@@ -40,7 +40,7 @@ class MessageListContainer extends PureComponent {
       fetchingOlder,
       fetchingNewer,
       typingUsers,
-      messages,
+      renderedMessages,
       narrow,
       actions,
     } = this.props;
@@ -52,7 +52,7 @@ class MessageListContainer extends PureComponent {
         fetchingOlder={fetchingOlder}
         fetchingNewer={fetchingNewer}
         typingUsers={typingUsers}
-        messages={messages}
+        renderedMessages={renderedMessages}
         narrow={narrow}
         actions={actions}
       />
@@ -67,7 +67,7 @@ export default connect(
     fetchingOlder: state.chat.fetchingOlder,
     fetchingNewer: state.chat.fetchingNewer,
     typingUsers: getCurrentTypingUsers(state),
-    messages: getShownMessagesInActiveNarrow(state),
+    renderedMessages: getRenderedMessages(state),
     narrow: getActiveNarrow(state),
     flags: getFlags(state),
     auth: getAuth(state),

diff --git a/src/message/__tests__/renderMessages-test.js b/src/message/__tests__/renderMessages-test.js
@@ -6,9 +6,7 @@ describe('renderMessages', () => {
   const narrow = deepFreeze([]);
 
   test('empty messages results in no rendered messages', () => {
-    const props = deepFreeze({ messages: [] });
-
-    const messageList = renderMessages(props);
+    const messageList = renderMessages([]);
     expect(messageList).toEqual([]);
   });
 
@@ -23,7 +21,7 @@ describe('renderMessages', () => {
 
     const expectedComponentKeys = ['time123', 'header1', '1'];
 
-    const messageList = renderMessages({ messages, narrow });
+    const messageList = renderMessages(messages, narrow);
     const messageKeys = messageList.map(x => x.key);
 
     expect(messageKeys).toEqual(expectedComponentKeys);
@@ -62,7 +60,7 @@ describe('renderMessages', () => {
 
     const expectedComponentKeys = ['time123', 'header1', '1', '2', '3'];
 
-    const messageList = renderMessages({ messages, narrow });
+    const messageList = renderMessages(messages, narrow);
     const messageKeys = messageList.map(x => x.key);
 
     expect(messageKeys).toEqual(expectedComponentKeys);
@@ -104,7 +102,7 @@ describe('renderMessages', () => {
 
     const expectedComponentKeys = ['time123', 'header1', '1', '2', '3'];
 
-    const messageList = renderMessages({ messages, narrow });
+    const messageList = renderMessages(messages, narrow);
     const messageKeys = messageList.map(x => x.key);
 
     expect(messageKeys).toEqual(expectedComponentKeys);
@@ -135,7 +133,7 @@ describe('renderMessages', () => {
 
     const expectedComponentTypes = ['time123', 'header1', '1', '2'];
 
-    const messageList = renderMessages({ messages, narrow });
+    const messageList = renderMessages(messages, narrow);
     const messageTypes = messageList.map(x => x.key);
 
     expect(messageTypes).toEqual(expectedComponentTypes);

diff --git a/src/message/messageSelectors.js b/src/message/messageSelectors.js
@@ -0,0 +1,12 @@
+/* @flow */
+import { createSelector } from 'reselect';
+
+import { getActiveNarrow } from '../baseSelectors';
+import { getShownMessagesInActiveNarrow } from '../chat/chatSelectors';
+import renderMessages from './renderMessages';
+
+export const getRenderedMessages = createSelector(
+  getShownMessagesInActiveNarrow,
+  getActiveNarrow,
+  (messages, narrow) => renderMessages(messages, narrow),
+);
diff --git a/src/message/renderMessages.js b/src/message/renderMessages.js
@@ -1,7 +1,7 @@
 /* @flow */
 import React from 'react';
 
-import type { Narrow } from '../types';
+import type { Message, Narrow } from '../types';
 import {
   isTopicNarrow,
   isPrivateOrGroupNarrow,
@@ -14,12 +14,7 @@ import TimeRow from '../message/TimeRow';
 import { isSameRecipient } from '../utils/message';
 import { isSameDay } from '../utils/date';
 
-type Props = {
-  messages: any[],
-  narrow: Narrow,
-};
-
-export default ({ messages, narrow }: Props) => {
+export default (messages: Message[], narrow: Narrow) => {
   const list: Object[] = [];
   let prevItem;
 
@@ -83,5 +78,6 @@ export default ({ messages, narrow }: Props) => {
 
     prevItem = item;
   }
+
   return list;
 };
diff --git a/src/search/SearchMessagesCard.js b/src/search/SearchMessagesCard.js
@@ -10,6 +10,7 @@ import { BRAND_COLOR } from '../styles';
 import { searchNarrow } from '../utils/narrow';
 import MessageList from '../message/MessageList';
 import { getMessages } from '../api';
+import renderMessages from '../message/renderMessages';
 
 const styles = StyleSheet.create({
   empty: {
@@ -27,12 +28,10 @@ const styles = StyleSheet.create({
 
 type Props = {
   actions: Actions,
-  twentyFourHourTime: boolean,
-  subscriptions: any[],
   query: string,
   auth: Auth,
-  flags: Object,
 };
+
 export default class SearchMessagesCard extends PureComponent {
   props: Props;
 
@@ -70,31 +69,28 @@ export default class SearchMessagesCard extends PureComponent {
 
   render() {
     const { isFetching, messages, query } = this.state;
-    const { actions, auth, subscriptions, twentyFourHourTime, flags } = this.props;
+    const { actions } = this.props;
     const noResults = !!query && !isFetching && !messages.length;
 
     if (noResults) {
       return <SearchEmptyState text="No results" />;
     }
 
+    const renderedMessages = renderMessages(messages, []);
+
     return (
       <View style={styles.results}>
         {isFetching &&
           <ActivityIndicator style={styles.activity} color={BRAND_COLOR} size="large" />}
         <ActionSheetProvider>
           <MessageList
             actions={actions}
-            messages={messages}
+            renderedMessages={renderedMessages}
             fetchingOlder={false}
             fetchingNewer={isFetching}
             caughtUpOlder
             caughtUpNewer
             singleFetchProgress
-            narrow={[]}
-            twentyFourHourTime={twentyFourHourTime}
-            subscriptions={subscriptions}
-            auth={auth}
-            flags={flags}
           />
         </ActionSheetProvider>
       </View>

diff --git a/src/search/SearchMessagesContainer.js b/src/search/SearchMessagesContainer.js
@@ -8,12 +8,6 @@ import SearchMessagesCard from './SearchMessagesCard';
 export default connect(
   state => ({
     auth: getAuth(state),
-    isOnline: state.app.isOnline,
-    subscriptions: state.subscriptions,
-    narrow: state.chat.narrow,
-    startReached: state.chat.startReached,
-    streamlistOpened: state.nav.opened,
-    flags: state.flags,
   }),
   boundActions,
 )(SearchMessagesCard);
diff --git a/src/selectors.js b/src/selectors.js
@@ -6,6 +6,7 @@ export * from './conversations/conversationsSelectors';
 export * from './caughtup/caughtUpSelectors';
 export * from './chat/chatSelectors';
 export * from './subscriptions/subscriptionSelectors';
+export * from './message/messageSelectors';
 export * from './nav/navSelectors';
 export * from './nav/navigationSelectors';
 export * from './title/titleSelectors';