From 2b0a50282cd6839ac351eb84d763dd26fc223074 Mon Sep 17 00:00:00 2001
From: Maria Rushkova <66270386+mrushkova@users.noreply.github.com>
Date: Mon, 11 Oct 2021 17:09:41 +0200
Subject: [PATCH] Add loading messages button (#58)

---
 packages/react-chat/src/components/Chat.tsx       |  2 --
 .../react-chat/src/components/Chat/ChatBody.tsx   |  5 -----
 .../src/components/Chat/ChatMessages.tsx          | 15 +++++++++++++++
 .../src/components/Icons/LoadingIcon.tsx          | 13 ++++++++++++-
 4 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/packages/react-chat/src/components/Chat.tsx b/packages/react-chat/src/components/Chat.tsx
index eae7cc7f..fbea869c 100644
--- a/packages/react-chat/src/components/Chat.tsx
+++ b/packages/react-chat/src/components/Chat.tsx
@@ -32,7 +32,6 @@ export function Chat({ theme, community, fetchMetadata }: ChatProps) {
     notifications,
     clearNotifications,
     loadNextDay,
-    lastMessage,
   } = useMessenger(
     activeChannel.name,
     channels.map((channel) => channel.name)
@@ -68,7 +67,6 @@ export function Chat({ theme, community, fetchMetadata }: ChatProps) {
         showCommunity={!showChannels}
         loadNextDay={() => loadNextDay(activeChannel.name)}
         onCommunityClick={showModal}
-        lastMessage={lastMessage}
         fetchMetadata={fetchMetadata}
       />
       {showMembers && !narrow && (
diff --git a/packages/react-chat/src/components/Chat/ChatBody.tsx b/packages/react-chat/src/components/Chat/ChatBody.tsx
index f5247c2a..fb72dd83 100644
--- a/packages/react-chat/src/components/Chat/ChatBody.tsx
+++ b/packages/react-chat/src/components/Chat/ChatBody.tsx
@@ -34,7 +34,6 @@ interface ChatBodyProps {
   activeChannelId: number;
   loadNextDay: () => void;
   onCommunityClick: () => void;
-  lastMessage: Date;
   fetchMetadata?: (url: string) => Promise<Metadata | undefined>;
 }
 
@@ -53,7 +52,6 @@ export function ChatBody({
   activeChannelId,
   loadNextDay,
   onCommunityClick,
-  lastMessage,
   fetchMetadata,
 }: ChatBodyProps) {
   const narrow = useNarrow();
@@ -108,9 +106,6 @@ export function ChatBody({
         <>
           {!showChannelsList && !showMembersList && (
             <>
-              <button onClick={loadNextDay}>
-                Last message date {lastMessage.toDateString()}
-              </button>{" "}
               {messages.length > 0 ? (
                 messenger ? (
                   <ChatMessages
diff --git a/packages/react-chat/src/components/Chat/ChatMessages.tsx b/packages/react-chat/src/components/Chat/ChatMessages.tsx
index 1b9f3134..5ab7e0e4 100644
--- a/packages/react-chat/src/components/Chat/ChatMessages.tsx
+++ b/packages/react-chat/src/components/Chat/ChatMessages.tsx
@@ -3,6 +3,7 @@ import styled from "styled-components";
 
 import { ChatMessage } from "../../models/ChatMessage";
 import { Metadata } from "../../models/Metadata";
+import { LoadingIcon } from "../Icons/LoadingIcon";
 import { UserIcon } from "../Icons/UserIcon";
 import { PictureModal } from "../Modals/PictureModal";
 import { textSmallStyles } from "../Text";
@@ -60,6 +61,9 @@ export function ChatMessages({
         onClose={() => setImage("")}
         image={image}
       />
+      <LoadingWrapper>
+        <LoadingIcon className="message" />
+      </LoadingWrapper>
       {messages.map((message, idx) => {
         return (
           <MessageOuterWrapper key={message.date.getTime()}>
@@ -101,6 +105,8 @@ export function ChatMessages({
 }
 
 const MessagesWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
   height: calc(100% - 44px);
   overflow: auto;
   padding: 8px 16px 0;
@@ -184,3 +190,12 @@ const MessageText = styled.div`
   white-space: pre-wrap;
   color: ${({ theme }) => theme.primary};
 `;
+
+const LoadingWrapper = styled.div`
+  display: flex;
+  align-self: center;
+  align-items: center;
+  justify-content: center;
+  background: ${({ theme }) => theme.bodyBackgroundColor};
+  position: relative;
+`;
diff --git a/packages/react-chat/src/components/Icons/LoadingIcon.tsx b/packages/react-chat/src/components/Icons/LoadingIcon.tsx
index 64b8c6d4..e8d3772e 100644
--- a/packages/react-chat/src/components/Icons/LoadingIcon.tsx
+++ b/packages/react-chat/src/components/Icons/LoadingIcon.tsx
@@ -10,12 +10,17 @@ const rotation = keyframes`
   }
 `;
 
-export const LoadingIcon = () => (
+interface LoadingIconProps {
+  className?: string;
+}
+
+export const LoadingIcon = ({ className }: LoadingIconProps) => (
   <Icon
     width="13"
     height="12"
     viewBox="0 0 13 12"
     xmlns="http://www.w3.org/2000/svg"
+    className={className}
   >
     <path
       fillRule="evenodd"
@@ -30,4 +35,10 @@ const Icon = styled.svg`
     fill: ${({ theme }) => theme.primary};
   }
   animation: ${rotation} 2s linear infinite;
+
+  &.message {
+    & > path {
+      fill: ${({ theme }) => theme.secondary};
+    }
+  }
 `;