From 6edadaf3e99a2972144429ce9ef3ce6bbb3d81c3 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Wed, 28 Oct 2020 14:28:10 +1100
Subject: [PATCH] message container use column reverse to order messages from
 bottom to top

---
 stylesheets/_session_conversation.scss               |  2 +-
 stylesheets/themes.scss                              |  2 +-
 .../session/conversation/SessionCompositionBox.tsx   | 12 +++++++++++-
 .../session/conversation/SessionConversation.tsx     |  4 ++--
 .../conversation/SessionConversationMessagesList.tsx |  4 ----
 5 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss
index 73b2fc681..29ee923b2 100644
--- a/stylesheets/_session_conversation.scss
+++ b/stylesheets/_session_conversation.scss
@@ -169,7 +169,7 @@
 .messages-container {
   display: flex;
   flex-grow: 1;
-  flex-direction: column;
+  flex-direction: column-reverse;
   position: relative;
   overflow-y: auto;
   overflow-x: hidden;
diff --git a/stylesheets/themes.scss b/stylesheets/themes.scss
index ee6d3b93b..94e7ba731 100644
--- a/stylesheets/themes.scss
+++ b/stylesheets/themes.scss
@@ -9,7 +9,7 @@ $accentDarkTheme: #00f782;
 $borderLightTheme: #f1f1f1; // search for references on ts TODO: make this exposed on ts
 $borderDarkTheme: rgba($white, 0.06);
 
-$borderAvatarColor: #00000059; // search for references on ts TODO: make this exposed on ts
+$borderAvatarColor: unquote('#00000059'); // search for references on ts TODO: make this exposed on ts
 
 $themes: (
   light: (
diff --git a/ts/components/session/conversation/SessionCompositionBox.tsx b/ts/components/session/conversation/SessionCompositionBox.tsx
index f6b738c05..523fc242d 100644
--- a/ts/components/session/conversation/SessionCompositionBox.tsx
+++ b/ts/components/session/conversation/SessionCompositionBox.tsx
@@ -497,17 +497,20 @@ export class SessionCompositionBox extends React.Component<Props, State> {
       'attachments'
     );
 
+    const linkPreviews = stagedLinkPreview && [_.pick(stagedLinkPreview, 'url', 'image', 'title')] || [];
+
     try {
       const attachments = await this.getFiles();
       await this.props.sendMessage(
         messagePlaintext,
         attachments,
         extractedQuotedMessageProps,
-        [_.pick(stagedLinkPreview, 'url', 'image', 'title')],
+        linkPreviews,
         null,
         {}
       );
 
+
       // Message sending sucess
       this.props.onMessageSuccess();
 
@@ -518,6 +521,13 @@ export class SessionCompositionBox extends React.Component<Props, State> {
       });
       // Empty stagedAttachments
       this.props.clearAttachments();
+      if (stagedLinkPreview && stagedLinkPreview.url) {
+        this.setState({
+          stagedLinkPreview: undefined,
+          ignoredLink: undefined,
+        });
+
+      }
     } catch (e) {
       // Message sending failed
       window.log.error(e);
diff --git a/ts/components/session/conversation/SessionConversation.tsx b/ts/components/session/conversation/SessionConversation.tsx
index f72c021b1..fac307139 100644
--- a/ts/components/session/conversation/SessionConversation.tsx
+++ b/ts/components/session/conversation/SessionConversation.tsx
@@ -342,7 +342,7 @@ export class SessionConversation extends React.Component<Props, State> {
       }
     );
 
-    const messages = messageSet.models.reverse();
+    const messages = messageSet.models;
     const messageFetchTimestamp = Date.now();
 
     this.setState({ messages, messageFetchTimestamp }, () => {
@@ -381,7 +381,7 @@ export class SessionConversation extends React.Component<Props, State> {
     );
 
     // Set first member of series here.
-    const messageModels = messageSet.models.reverse();
+    const messageModels = messageSet.models;
 
     const messages = [];
     let previousSender;
diff --git a/ts/components/session/conversation/SessionConversationMessagesList.tsx b/ts/components/session/conversation/SessionConversationMessagesList.tsx
index 4e640a359..a711274e3 100644
--- a/ts/components/session/conversation/SessionConversationMessagesList.tsx
+++ b/ts/components/session/conversation/SessionConversationMessagesList.tsx
@@ -90,10 +90,6 @@ export class SessionConversationMessagesList extends React.Component<
     )?.messageCollection;
   }
 
-  public async componentWillReceiveProps(nextProps: any) {
-    return;
-  }
-
   public render() {
     const { messages } = this.props;