From d8d3bac04821b3699184926eefe0987339a4d714 Mon Sep 17 00:00:00 2001
From: Szymon Szlachtowicz <38212223+Szymx95@users.noreply.github.com>
Date: Mon, 27 Sep 2021 16:38:17 +0200
Subject: [PATCH] Add chat messages mockup (#14)

---
 packages/react-chat/src/components/Chat.tsx   |  2 +-
 .../src/components/Chat/ChatBody.tsx          | 35 +++++++
 .../src/components/Chat/ChatInput.tsx         | 41 ++++++++
 .../src/components/Chat/ChatMessages.tsx      | 98 +++++++++++++++++++
 .../react-chat/src/components/ChatBody.tsx    | 12 ---
 .../src/components/models/ChatMessage.ts      |  5 +
 6 files changed, 180 insertions(+), 13 deletions(-)
 create mode 100644 packages/react-chat/src/components/Chat/ChatBody.tsx
 create mode 100644 packages/react-chat/src/components/Chat/ChatInput.tsx
 create mode 100644 packages/react-chat/src/components/Chat/ChatMessages.tsx
 delete mode 100644 packages/react-chat/src/components/ChatBody.tsx
 create mode 100644 packages/react-chat/src/components/models/ChatMessage.ts

diff --git a/packages/react-chat/src/components/Chat.tsx b/packages/react-chat/src/components/Chat.tsx
index 810f3f1d..a58d01ca 100644
--- a/packages/react-chat/src/components/Chat.tsx
+++ b/packages/react-chat/src/components/Chat.tsx
@@ -4,7 +4,7 @@ import styled from "styled-components";
 import { Theme } from "../styles/themes";
 
 import { Channels } from "./Channels";
-import { ChatBody } from "./ChatBody";
+import { ChatBody } from "./Chat/ChatBody";
 import { Members } from "./Members";
 
 interface ChatProps {
diff --git a/packages/react-chat/src/components/Chat/ChatBody.tsx b/packages/react-chat/src/components/Chat/ChatBody.tsx
new file mode 100644
index 00000000..5942c25d
--- /dev/null
+++ b/packages/react-chat/src/components/Chat/ChatBody.tsx
@@ -0,0 +1,35 @@
+import React, { useCallback, useState } from "react";
+import styled from "styled-components";
+
+import { ChatMessage } from "../models/ChatMessage";
+
+import { ChatInput } from "./ChatInput";
+import { ChatMessages } from "./ChatMessages";
+
+export function ChatBody() {
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+
+  const addMessage = useCallback(
+    (message: string) => {
+      setMessages((prevMessages) => [
+        ...prevMessages,
+        { sender: "User1", date: new Date(), content: message },
+      ]);
+    },
+    [messages]
+  );
+
+  return (
+    <ChatBodyWrapper>
+      <ChatMessages messages={messages} />
+      <ChatInput addMessage={addMessage} />
+    </ChatBodyWrapper>
+  );
+}
+
+const ChatBodyWrapper = styled.div`
+  flex: 1;
+  height: 100%;
+  max-width: 50%;
+  background: ${({ theme }) => theme.bodyBackgroundColor};
+`;
diff --git a/packages/react-chat/src/components/Chat/ChatInput.tsx b/packages/react-chat/src/components/Chat/ChatInput.tsx
new file mode 100644
index 00000000..cbce3569
--- /dev/null
+++ b/packages/react-chat/src/components/Chat/ChatInput.tsx
@@ -0,0 +1,41 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+
+type ChatInputProps = {
+  addMessage: (message: string) => void;
+};
+
+export function ChatInput({ addMessage }: ChatInputProps) {
+  const [content, setContent] = useState("");
+
+  return (
+    <Input
+      placeholder={"Message"}
+      value={content}
+      onChange={(e) => setContent(e.target.value)}
+      onKeyPress={(e) => {
+        if (e.key == "Enter") {
+          addMessage(content);
+          setContent("");
+        }
+      }}
+    />
+  );
+}
+
+const Input = styled.input`
+  width: 100%;
+  margin-left: 8px;
+  margin-right: 8px;
+  margin-bottom: 4px;
+  height: 40px;
+  background: #eef2f5;
+  border-radius: 36px 16px 4px 36px;
+  border: 0px;
+  padding-left: 12px;
+  outline: none;
+
+  &:focus {
+    border: 1px solid grey;
+  }
+`;
diff --git a/packages/react-chat/src/components/Chat/ChatMessages.tsx b/packages/react-chat/src/components/Chat/ChatMessages.tsx
new file mode 100644
index 00000000..e9d383e6
--- /dev/null
+++ b/packages/react-chat/src/components/Chat/ChatMessages.tsx
@@ -0,0 +1,98 @@
+import React, { useEffect, useRef } from "react";
+import styled from "styled-components";
+
+import { ChatMessage } from "../models/ChatMessage";
+
+type ChatMessagesProps = {
+  messages: ChatMessage[];
+};
+
+export function ChatMessages({ messages }: ChatMessagesProps) {
+  const ref = useRef<HTMLHeadingElement>(null);
+  useEffect(() => {
+    if (ref && ref.current) {
+      ref.current.scrollTop = ref.current.scrollHeight;
+    }
+  }, [messages]);
+
+  return (
+    <MessagesWrapper ref={ref}>
+      {messages.map((message) => (
+        <MessageWrapper key={message.date.toDateString()}>
+          <IconWrapper>
+            <Icon />
+          </IconWrapper>
+          <ContentWrapper>
+            <MessageHeaderWrapper>
+              <UserNameWrapper>{message.sender}</UserNameWrapper>
+              <TimeWrapper>{message.date.toLocaleTimeString()}</TimeWrapper>
+            </MessageHeaderWrapper>
+            <MessageText>{message.content}</MessageText>
+          </ContentWrapper>
+        </MessageWrapper>
+      ))}
+    </MessagesWrapper>
+  );
+}
+
+const MessageText = styled.div`
+  overflow-wrap: anywhere;
+  width: 100%;
+`;
+
+const MessageHeaderWrapper = styled.div`
+  display: flex;
+`;
+
+const TimeWrapper = styled.div`
+  font-family: Inter;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 10px;
+  line-height: 14px;
+  letter-spacing: 0.2px;
+  text-transform: uppercase;
+  color: #939ba1;
+
+  text-align: center;
+  margin-top: auto;
+  margin-bottom: auto;
+  margin-left: 4px;
+`;
+
+const UserNameWrapper = styled.div`
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 15px;
+  line-height: 22px;
+`;
+
+const ContentWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const Icon = styled.div`
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background-color: blue;
+`;
+
+const IconWrapper = styled.div`
+  margin-left: 16px;
+  margin-right: 8px;
+`;
+
+const MessageWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  margin-top: 8px;
+  margin-bottom: 8px;
+`;
+
+const MessagesWrapper = styled.div`
+  height: calc(100% - 44px);
+  overflow: auto;
+`;
diff --git a/packages/react-chat/src/components/ChatBody.tsx b/packages/react-chat/src/components/ChatBody.tsx
deleted file mode 100644
index 08b3f432..00000000
--- a/packages/react-chat/src/components/ChatBody.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-
-export function ChatBody() {
-  return <ChatBodyWrapper>Messages</ChatBodyWrapper>;
-}
-
-const ChatBodyWrapper = styled.div`
-  flex: 1;
-  height: 100%;
-  background: ${({ theme }) => theme.bodyBackgroundColor};
-`;
diff --git a/packages/react-chat/src/components/models/ChatMessage.ts b/packages/react-chat/src/components/models/ChatMessage.ts
new file mode 100644
index 00000000..f598e62f
--- /dev/null
+++ b/packages/react-chat/src/components/models/ChatMessage.ts
@@ -0,0 +1,5 @@
+export type ChatMessage = {
+  content: string;
+  date: Date;
+  sender: string;
+};