Merge pull request #3122 from urbit/lf/chat-unreads-jank

chat-js: unread counts sweep

pkg/interface/src/apps/chat/app.tsx

@@ -73,6 +73,7 @@ export default class ChatApp extends React.Component<ChatAppProps, {}> {
       unreads[stat] = Boolean(unread);
       if (
         unread &&
+        stat in associations.chat &&
         (selectedGroups.length === 0 ||
           selectedGroups
             .map((e) => {

pkg/interface/src/apps/chat/components/chat.tsx

@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { Component, Fragment } from "react";
 import _ from "lodash";
 import moment from "moment";
 
@@ -359,6 +359,10 @@ export class ChatScreen extends Component<ChatScreenProps, ChatScreenState> {
       props.pendingMessages.get(props.station) || []
     ).map((value) => ({ ...value, pending: true }));
 
+    if(unread !== 0) {
+      unread += pendingMessages.length;
+    }
+
     messages = pendingMessages.concat(messages);
 
     const messageElements = messages.map((msg, i) => {
@@ -389,10 +393,9 @@ export class ChatScreen extends Component<ChatScreenProps, ChatScreenState> {
       );
       if (unread > 0 && i === unread - 1) {
         return (
-          <>
+          <Fragment key={msg.uid}>
             {messageElem}
             <div
-              key={"unreads" + msg.uid}
               ref={this.setUnreadMarker}
               className="mv2 green2 flex items-center f9"
             >
@@ -409,19 +412,18 @@ export class ChatScreen extends Component<ChatScreenProps, ChatScreenState> {
                 className="b--green2 ma0 bt-0"
               />
             </div>
-          </>
+          </Fragment>
         );
       } else if (dayBreak) {
         return (
-          <>
+          <Fragment key={msg.uid}>
             {messageElem}
             <div
-              key={"daybreak" + msg.uid}
               className="pv3 gray2 b--gray2 flex items-center justify-center f9 "
             >
               <p>{moment(_.get(messages[i], when)).calendar()}</p>
             </div>
-          </>
+          </Fragment>
         );
       } else {
         return messageElem;