chat: got pagination and scroll locking behavior working properly

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

@@ -96,7 +96,7 @@ export class ChatScreen extends Component<ChatScreenProps, ChatScreenState> {
       props.envelopes.length > 0;
     
     const unreadCount = props.length - props.read;
-    const unreadMsg = unreadCount > 0 && props.envelopes[unread - 1];
+    const unreadMsg = unreadCount > 0 && props.envelopes[unreadCount - 1];
 
     return (
       <div
@@ -120,7 +120,9 @@ export class ChatScreen extends Component<ChatScreenProps, ChatScreenState> {
           pendingMessages={pendingMessages}
           messages={props.envelopes}
           length={props.length}
-          contacts={props.contacts} 
+          contacts={props.contacts}
+          association={props.association}
+          group={props.group}
           ship={props.match.params.ship}
           station={props.station}
           api={props.api} />

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

@@ -7,7 +7,6 @@ type IMessage = Envelope & { pending?: boolean };
 
 
 export const ChatMessage = (props) => {
-
   const unread = 0;
   const index = props.index;
   const msg = props.msg;

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

@@ -28,6 +28,10 @@ export class ChatScrollContainer extends Component {
     };
 
     this.isTriggeredScroll = false;
+
+    this.isAtBottom = true;
+    this.isAtTop = false;
+
     this.containerDidScroll = this.containerDidScroll.bind(this);
 
     this.containerRef = React.createRef();
@@ -45,12 +49,26 @@ export class ChatScrollContainer extends Component {
         });
       }
 
-      props.scrollIsAtTop();
-    } else if (scrollIsAtBottom(e.target) && !this.isTriggeredScroll) {
-      props.scrollIsAtBottom();
-    }
+      if (!this.isAtTop) {
+        props.scrollIsAtTop();
+      }
 
-    this.isTriggeredScroll = false;
+      this.isTriggeredScroll = false;
+      this.isAtBottom = false;
+      this.isAtTop = true;
+    } else if (scrollIsAtBottom(e.target) && !this.isTriggeredScroll) {
+      if (!this.isAtBottom) {
+        props.scrollIsAtBottom();
+      }
+
+      this.isTriggeredScroll = false;
+      this.isAtBottom = true;
+      this.isAtTop = false;
+    } else {
+      this.isAtBottom = false;
+      this.isAtTop = false;
+      this.isTriggeredScroll = false;
+    }
   }
 
   render() {

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

@@ -7,13 +7,12 @@ import { ResubscribeElement } from "./resubscribe-element";
 import { BacklogElement } from "./backlog-element";
 
 const MAX_BACKLOG_SIZE = 1000;
-const DEFAULT_BACKLOG_SIZE = 300;
+const DEFAULT_BACKLOG_SIZE = 200;
 
 
 export class ChatWindow extends Component {
   constructor(props) {
     super(props);
-
     this.state = {
       numPages: 1,
     };
@@ -42,8 +41,11 @@ export class ChatWindow extends Component {
   }
 
   scrollIsAtTop() {
-    this.setState({ numPages: this.state.numPages + 1 }, () => {
-      this.fetchBacklog();
+    const { props, state } = this;
+    this.setState({ numPages: state.numPages + 1 }, () => {
+      if (state.numPages * 100 < props.length) {
+        this.fetchBacklog();
+      }
     });
   }
 
@@ -63,12 +65,12 @@ export class ChatWindow extends Component {
   }
 
   dismissUnread() {
-    //this.props.api.chat.read(this.props.station);
+    this.props.api.chat.read(this.props.station);
   }
 
   fetchBacklog() {
-    const size = DEFAULT_BACKLOG_SIZE;
     const { props } = this;
+    const size = DEFAULT_BACKLOG_SIZE;
 
     if (
       props.messages.length >= props.length ||
@@ -89,15 +91,23 @@ export class ChatWindow extends Component {
 
   render() {
     const { props, state } = this;
+    const sliceLength = (
+      state.numPages * 100 <
+      props.messages.length + props.pendingMessages.length
+    ) ? state.numPages * 100 :
+        props.messages.length + props.pendingMessages.length;
 
-    const messages = props.pendingMessages.concat(props.messages);
+    const messages =
+      props.pendingMessages
+        .concat(props.messages)
+        .slice(0, sliceLength);
 
     return (
       <Fragment>
         <UnreadNotice
           unreadCount={props.unreadCount}
           unreadMsg={props.unreadMsg}
-          onRead={this.dismissUnread} />
+          dismissUnread={this.dismissUnread} />
         <ChatScrollContainer
           scrollIsAtBottom={this.scrollIsAtBottom}
           scrollIsAtTop={this.scrollIsAtTop}>

pkg/interface/src/apps/chat/components/lib/unread-notice.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import moment from 'moment';
 
 export const UnreadNotice = (props) => {
-  const { unreadCount, unreadMsg, onRead } = props;
+  const { unreadCount, unreadMsg, dismissUnread } = props;
 
   if (!unreadMsg || (unreadCount === 0)) {
     return null;
@@ -31,7 +31,7 @@ export const UnreadNotice = (props) => {
           )}
           <span className="green3">{timestamp}</span>
         </p>
-        <div onClick={onRead}
+        <div onClick={dismissUnread}
              className="ml4 inter b--green2 pointer tr lh-copy">
           Mark as Read
         </div>