chat: got scrolling to unread marker working

pkg/interface/src/apps/chat/components/lib/chat-header.js

@@ -54,12 +54,10 @@ export class ChatHeader extends Component {
             </h2>
           </Link>
           <ChatTabBar
-            {...props}
+            location={props.location}
             station={props.station}
-            numPeers={group.length}
             isOwner={deSig(props.match.params.ship) === window.ship}
             popout={props.popout}
-            api={props.api}
           />
         </div>
       </Fragment>

pkg/interface/src/apps/chat/components/lib/chat-message.tsx

@@ -7,11 +7,16 @@ type IMessage = Envelope & { pending?: boolean };
 
 
 export const ChatMessage = (props) => {
-  const unread = 0;
-  const index = props.index;
-  const msg = props.msg;
-  const previousMsg = props.previousMsg;
-  const nextMsg = props.nextMsg;
+  const {
+    msg,
+    previousMsg,
+    nextMsg,
+    isLastUnread,
+    group,
+    association,
+    contacts,
+    unreadRef
+  } = props;
 
   // Render sigil if previous message is not by the same sender
   const aut = ["author"];
@@ -26,24 +31,26 @@ export const ChatMessage = (props) => {
     moment(_.get(nextMsg, when)).format("YYYY.MM.DD") !==
     moment(_.get(msg, when)).format("YYYY.MM.DD");
 
-  return (
+  const messageElem = (
     <Message
       key={msg.uid}
       msg={msg}
-      contacts={props.contacts}
       renderSigil={renderSigil}
       paddingTop={paddingTop}
       paddingBot={paddingBot}
       pending={Boolean(msg.pending)}
-      group={props.group}
-      association={props.association}
+      group={group}
+      contacts={contacts}
+      association={association}
     />
   );
-/*  if (unread > 0 && index === unread - 1) {
+
+  if (props.isLastUnread) {
     return (
       <Fragment key={msg.uid}>
         {messageElem}
-        <div className="mv2 green2 flex items-center f9">
+        <div ref={unreadRef}
+             className="mv2 green2 flex items-center f9">
           <hr className="dn-s ma0 w2 b--green2 bt-0" />
           <p className="mh4">New messages below</p>
           <hr className="ma0 flex-grow-1 b--green2 bt-0" />
@@ -72,6 +79,6 @@ export const ChatMessage = (props) => {
     );
   } else {
     return messageElem;
-  }*/
+  }
 };
 

pkg/interface/src/apps/chat/components/lib/chat-scroll-container.js

@@ -125,4 +125,19 @@ export class ChatScrollContainer extends Component {
       );
     }
   }
+
+  scrollToReference(ref) {
+    this.isTriggeredScroll = true;
+    if (this.scrollRef.current && ref.current) {
+      ref.current.scrollIntoView({ block: 'center' });
+    }
+
+    if (navigator.userAgent.includes("Firefox")) {
+      recalculateScrollTop(
+        this.state.lastScrollHeight,
+        this.scrollContainer
+      );
+    }
+  }
+
 }

pkg/interface/src/apps/chat/components/lib/chat-window.tsx

@@ -8,6 +8,8 @@ import { BacklogElement } from "./backlog-element";
 
 const MAX_BACKLOG_SIZE = 1000;
 const DEFAULT_BACKLOG_SIZE = 200;
+const PAGE_SIZE = 50;
+const INITIAL_LOAD = 20;
 
 
 export class ChatWindow extends Component {
@@ -24,27 +26,33 @@ export class ChatWindow extends Component {
     this.scrollIsAtTop = this.scrollIsAtTop.bind(this);
 
     this.scrollReference = React.createRef();
+    this.unreadReference = React.createRef();
   }
 
   componentDidMount() {
     this.initialFetch();
+
+    if (this.state.numPages === 1 && this.props.unreadCount < INITIAL_LOAD) {
+      this.dismissUnread();
+      this.scrollToBottom();
+    }
   }
 
   initialFetch() {
     const { props } = this;
-    if (props.messages.length <= 0) {
+    if (props.messages.length > 0) {
       const unreadUnloaded = props.unreadCount - props.messages.length;
 
       if (unreadUnloaded <= MAX_BACKLOG_SIZE &&
-          unreadUnloaded + 20 > DEFAULT_BACKLOG_SIZE) {
-        this.fetchBacklog(unreadUnloaded + 20);
+          unreadUnloaded + INITIAL_LOAD > DEFAULT_BACKLOG_SIZE) {
+        this.fetchBacklog(unreadUnloaded + INITIAL_LOAD);
       } else {
         this.fetchBacklog(DEFAULT_BACKLOG_SIZE);
       }
     } else {
       setTimeout(() => {
         this.initialFetch();
-      }, 5000);
+      }, 2000);
     }
   }
 
@@ -55,11 +63,21 @@ export class ChatWindow extends Component {
       props.history.push("/~chat");
     } else if (props.messages.length >= prevProps.messages.length + 10) {
       this.hasAskedForMessages = false;
-      if (props.unreadCount === 0) {
-        return;
+      let numPages = props.unreadCount > 0 ? 
+        Math.ceil(props.unreadCount / PAGE_SIZE) : 1;
+
+      if (this.state.numPages === numPages) {
+        if (props.unreadCount > 20) {
+          this.scrollToUnread();    
+        }
+      } else {
+        this.setState({ numPages }, () => {
+          if (props.unreadCount > 20) {
+            this.scrollToUnread();    
+          }
+        });
       }
-      this.setState({ numPages: Math.ceil(props.unreadCount / 100) });
-    } else if (state.numPages === 1 && props.unreadCount !== 0) {
+    } else if (state.numPages === 1 && this.props.unreadCount < INITIAL_LOAD) {
       this.dismissUnread();
       this.scrollToBottom();
     }
@@ -68,7 +86,7 @@ export class ChatWindow extends Component {
   scrollIsAtTop() {
     const { props, state } = this;
     this.setState({ numPages: state.numPages + 1 }, () => {
-      if (state.numPages * 100 < props.length) {
+      if (state.numPages * PAGE_SIZE < props.length) {
         this.fetchBacklog(DEFAULT_BACKLOG_SIZE);
       }
     });
@@ -89,6 +107,12 @@ export class ChatWindow extends Component {
     }
   }
 
+  scrollToUnread() {
+    if (this.scrollReference.current && this.unreadReference.current) {
+      this.scrollReference.current.scrollToReference(this.unreadReference);
+    }
+  }
+
   dismissUnread() {
     this.props.api.chat.read(this.props.station);
   }
@@ -116,9 +140,9 @@ export class ChatWindow extends Component {
   render() {
     const { props, state } = this;
     const sliceLength = (
-      state.numPages * 100 <
+      state.numPages * PAGE_SIZE <
       props.messages.length + props.pendingMessages.length
-    ) ? state.numPages * 100 :
+    ) ? state.numPages * PAGE_SIZE :
         props.messages.length + props.pendingMessages.length;
 
     const messages =
@@ -145,7 +169,10 @@ export class ChatWindow extends Component {
           />
           { messages.map((msg, i) => (
               <ChatMessage
-                unread={props.unreadCount}
+                unreadRef={this.unreadReference}
+                isLastUnread={
+                  props.unreadCount > 0 && i === props.unreadCount - 1
+                }
                 msg={msg}
                 previousMsg={messages[i - 1]}
                 nextMsg={messages[i + 1]}

pkg/interface/src/reducers/launch-update.ts

@@ -50,7 +50,6 @@ export default class LaunchReducer<S extends LaunchState> {
 
   changeIsShown(json: LaunchUpdate, state: S) {
     const data = _.get(json, 'changeIsShown', false);
-    console.log(json, data);
     if (data) {
       let tile = state.launch.tiles[data.name];
       console.log(tile);