webview render: Refer to state.flags instead of message.flags.

This is part of fixing #2676.  As discussed in the PR thread #2843,
the `flags` property on a message object in our Redux store never
changes after we first receive the message, and instead we maintain an
updated version under the separate top-level state subtree `flags`;
but we've been using the message object's stale `flags` for rendering
the message in the message list.

This change switches to using the up-to-date flags from `state.flags`,
via the `getFlags` selector, instead.  Now when the user stars or
unstars a message, we still don't yet update the message list (that's
for a followup commit); but now at least the next message list we
render from scratch will reflect the update.

In making this change, we get a bit of a head start because we already
invoke `getFlags` to populate the `flags` prop of `MessageList` (in
its `connect` call), which gets passed down to `renderMessagesAsHtml`.
So we just need to use it there, and adapt the layers underneath to
take the different data format found in `state.flags`.

Of the two spots where we actually use `flags` in message rendering:

 * `messageTagsAsHtml` gets a bit simpler; it only needs to know
   whether or not the message is starred, so we just pass it a boolean
   for that.

 * `messageDiv` actually uses the flags as a list of strings (for now)
   to generate HTML data-* attributes, so we make a little helper
   function for it to just compute that list.

[greg: explained more context in commit message]

Author: jackrzhang

src/webview/__tests__/webViewHandleUpdates-test.js

@@ -1,4 +1,5 @@
 import { getInputMessages } from '../webViewHandleUpdates';
+import { flagsStateToStringList } from '../html/messageAsHtml';
 
 describe('getInputMessages', () => {
   test('missing prev and next props returns no messages', () => {
@@ -57,11 +58,13 @@ describe('getInputMessages', () => {
     const prevProps = {
       auth: { realm: '' },
       messages: [],
+      flags: { starred: {} },
       renderedMessages: [{ key: 0, data: [], message: {} }],
     };
     const nextProps = {
       auth: { realm: '' },
       messages: [],
+      flags: { starred: {} },
       renderedMessages: [
         {
           key: 0,
@@ -103,12 +106,14 @@ describe('getInputMessages', () => {
       typingUsers: [],
       messages: [],
       renderedMessages: [{ key: 0, data: [], message: {} }],
+      flags: { starred: {} },
     };
     const nextProps = {
       auth: { realm: '' },
       fetching: { older: false, newer: true },
       typingUsers: [{ id: 10 }],
       messages: [],
+      flags: { starred: {} },
       renderedMessages: [
         {
           key: 0,
@@ -124,3 +129,25 @@ describe('getInputMessages', () => {
     expect(messages[0].type).toEqual('content');
   });
 });
+
+describe('flagsStateToStringList', () => {
+  const flags = {
+    read: {
+      1: true,
+      2: true,
+    },
+    starred: {
+      1: true,
+      3: true,
+    },
+    mentions: {},
+    // ...
+    // the actual store keeps track of many more flags
+  };
+
+  test("returns a string list of flags for some message, given some FlagsState and the message's id", () => {
+    expect(flagsStateToStringList(flags, 1)).toEqual(['read', 'starred']);
+    expect(flagsStateToStringList(flags, 2)).toEqual(['read']);
+    expect(flagsStateToStringList(flags, 3)).toEqual(['starred']);
+  });
+});

src/webview/html/messageAsHtml.js

@@ -5,12 +5,17 @@ import { shortTime } from '../../utils/date';
 import messageTagsAsHtml from './messageTagsAsHtml';
 import messageReactionListAsHtml from './messageReactionListAsHtml';
 
-const messageDiv = (id: number, msgClass: string, flags: Object): string =>
+export const flagsStateToStringList = (flags: FlagsState, id: number): string[] =>
+  Object.keys(flags).filter(key => flags[key][id]);
+
+const messageDiv = (id: number, msgClass: string, flags: FlagsState): string =>
   template`<div
      class="message ${msgClass}"
      id="msg-${id}"
      data-msg-id="${id}"
-     $!${flags.map(flag => template`data-${flag}="true" `).join('')}
+     $!${flagsStateToStringList(flags, id)
+       .map(flag => template`data-${flag}="true" `)
+       .join('')}
     >`;
 
 const messageSubheader = ({
@@ -66,7 +71,7 @@ const messageBody = ({
   timeEdited,
 }: {
   content: string,
-  flags: Object,
+  flags: FlagsState,
   id: number,
   isOutbox: boolean,
   ownEmail: string,
@@ -76,7 +81,7 @@ const messageBody = ({
 }) => template`
 $!${content}
 $!${isOutbox ? '<div class="loading-spinner outbox-spinner"></div>' : ''}
-$!${messageTagsAsHtml(flags, timeEdited)}
+$!${messageTagsAsHtml(!!flags.starred[id], timeEdited)}
 $!${messageReactionListAsHtml(reactions, id, ownEmail, realmEmoji)}
 `;
 

src/webview/html/messageTagsAsHtml.js

@@ -2,8 +2,7 @@
 import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
 import template from './template';
 
-export default (flags: Object, timeEdited: ?number): string => {
-  const isStarred = flags.indexOf('starred') > -1;
+export default (isStarred: boolean, timeEdited: ?number): string => {
   if (timeEdited === undefined && !isStarred) {
     return '';
   }
@@ -12,7 +11,7 @@ export default (flags: Object, timeEdited: ?number): string => {
 
   return template`<div class="message-tags">
   $!${timeEdited ? template`<span class="message-tag">edited ${editedTime} ago</span>` : ''}
-  $!${flags.indexOf('starred') > -1 ? '<span class="message-tag">starred</span>' : ''}
+  $!${isStarred ? '<span class="message-tag">starred</span>' : ''}
 </div>
 `;
 };

src/webview/html/renderMessagesAsHtml.js

@@ -10,6 +10,7 @@ export default ({
   auth,
   subscriptions,
   realmEmoji,
+  flags,
   renderedMessages,
   narrow,
   twentyFourHourTime,
@@ -37,8 +38,7 @@ export default ({
               fromName: message.sender_full_name,
               fromEmail: message.sender_email,
               content: message.match_content || message.content,
-              // $FlowFixMe: about to be fixed by #2922
-              flags: message.flags || [],
+              flags,
               timestamp: message.timestamp,
               avatarUrl: message.avatar_url || getGravatarFromEmail(message.sender_email),
               timeEdited: message.last_edit_timestamp,