From a5905536fa760438475c5174a2d08f18acde9c68 Mon Sep 17 00:00:00 2001
From: Vincent <vincent@loki.network>
Date: Wed, 26 Feb 2020 15:39:02 +1100
Subject: [PATCH] Onload scroll to unread

---
 preload.js                                    |  1 +
 stylesheets/_session_theme.scss               |  2 +-
 ts/components/conversation/Timestamp.tsx      | 11 +++++++++-
 ts/components/session/SessionConversation.tsx | 20 +++++++------------
 4 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/preload.js b/preload.js
index 0c0b2ad4a..f30490ef7 100644
--- a/preload.js
+++ b/preload.js
@@ -61,6 +61,7 @@ window.isBeforeVersion = (toCheck, baseVersion) => {
 };
 
 window.CONSTANTS = {
+  SECS_IN_DAY: 60*60*24,
   MAX_LOGIN_TRIES: 3,
   MAX_PASSWORD_LENGTH: 32,
   MAX_USERNAME_LENGTH: 20,
diff --git a/stylesheets/_session_theme.scss b/stylesheets/_session_theme.scss
index 1dffb5817..574c36d95 100644
--- a/stylesheets/_session_theme.scss
+++ b/stylesheets/_session_theme.scss
@@ -41,7 +41,7 @@
       @include session-color-subtle($session-color-white);
     }
     @at-root .dark-theme #{&} {
-      background-color: $session-shade-8;
+      background-color: $session-shade-5;
     }
   }
 
diff --git a/ts/components/conversation/Timestamp.tsx b/ts/components/conversation/Timestamp.tsx
index f44915499..76937c0c6 100644
--- a/ts/components/conversation/Timestamp.tsx
+++ b/ts/components/conversation/Timestamp.tsx
@@ -56,6 +56,15 @@ export class Timestamp extends React.Component<Props> {
       return null;
     }
 
+    // Use relative time for under 24hrs ago.
+    const now = Math.floor(Date.now());
+    const messageAgeInDays = (now - timestamp) / (1000 * window.CONSTANTS.SECS_IN_DAY);
+    const daysBeforeRelativeTiming = 1;
+    
+    const dateString = messageAgeInDays > daysBeforeRelativeTiming
+      ? formatRelativeTime(timestamp, { i18n, extended })
+      : moment(timestamp).fromNow();
+
     return (
       <span
         className={classNames(
@@ -65,7 +74,7 @@ export class Timestamp extends React.Component<Props> {
         )}
         title={moment(timestamp).format('llll')}
       >
-        {formatRelativeTime(timestamp, { i18n, extended })}
+        {dateString}
       </span>
     );
   }
diff --git a/ts/components/session/SessionConversation.tsx b/ts/components/session/SessionConversation.tsx
index 82bd62ccd..5cb0b0dc1 100644
--- a/ts/components/session/SessionConversation.tsx
+++ b/ts/components/session/SessionConversation.tsx
@@ -139,9 +139,8 @@ export class SessionConversation extends React.Component<any, State> {
 
   public renderMessages() {
     const { messages } = this.state;
-    
-    // IF MESSAGE IS THE TOP OF UNREAD, THEN INSERT AN UNREAD BANNER
 
+    // FIXME VINCE: IF MESSAGE IS THE TOP OF UNREAD, THEN INSERT AN UNREAD BANNER
 
     return (
       <>{
@@ -218,8 +217,6 @@ export class SessionConversation extends React.Component<any, State> {
   }
 
 
-  
-
   public renderMessage(messageProps: any, firstMessageOfSeries: boolean, quoteProps?: any) {
 
     return (
@@ -311,8 +308,8 @@ export class SessionConversation extends React.Component<any, State> {
 
     // If we have pulled messages in the last interval, don't bother rescanning
     // This avoids getting messages on every re-render.
-    if (timestamp >= messageFetchTimestamp + fetchInterval) {
-      return;
+    if (timestamp - messageFetchTimestamp < fetchInterval) {
+      return { newTopMessage: undefined, previousTopMessage: undefined };
     }
 
     const msgCount = numMessages || window.CONSTANTS.DEFAULT_MESSAGE_FETCH_COUNT + this.state.unreadCount;
@@ -341,9 +338,6 @@ export class SessionConversation extends React.Component<any, State> {
 
     this.setState({ messages, messageFetchTimestamp });
 
-    console.log(`[vince][messages] Previous Top Message: `, previousTopMessage);
-    console.log(`[vince][messages] New Top Message: `, newTopMessage);
-
     return { newTopMessage, previousTopMessage };
   }
 
@@ -373,9 +367,9 @@ export class SessionConversation extends React.Component<any, State> {
       const numMessages = this.state.messages.length + window.CONSTANTS.DEFAULT_MESSAGE_FETCH_COUNT;
       
       // Prevent grabbing messags with scroll more frequently than once per 5s.
-      // const messageFetchInterval = 5;
-      // const previousTopMessage = (await this.getMessages(numMessages, messageFetchInterval))?.previousTopMessage;
-      // this.scrollToMessage(previousTopMessage);
+      const messageFetchInterval = 5;
+      const previousTopMessage = (await this.getMessages(numMessages, messageFetchInterval))?.previousTopMessage;
+      previousTopMessage && this.scrollToMessage(previousTopMessage);
     }
   }
 
@@ -391,7 +385,7 @@ export class SessionConversation extends React.Component<any, State> {
     topUnreadMessage?.scrollIntoView();
   }
 
-  public scrollToBottom(firstLoad = false) {
+  public scrollToBottom(instant = false) {
     // FIXME VINCE: Smooth scrolling that isn't slow@!
     // this.messagesEndRef.current?.scrollIntoView(
     //   { behavior: firstLoad ? 'auto' : 'smooth' }