From e76eb76ef6b60eaa14d17b0cc7fba7fc5a393e29 Mon Sep 17 00:00:00 2001
From: Maria Rushkova <66270386+mrushkova@users.noreply.github.com>
Date: Tue, 18 Jan 2022 14:06:53 +0100
Subject: [PATCH] Add input to creation (#194)

* Add input to chat creation

* Set chat min-width
---
 packages/react-chat-example/src/index.tsx     |  1 +
 .../src/components/Chat/ChatCreation.tsx      |  8 ++++++
 .../src/components/Chat/ChatInput.tsx         | 27 +++++++++++++++----
 .../src/components/Chat/ChatTopbar.tsx        |  2 +-
 4 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/packages/react-chat-example/src/index.tsx b/packages/react-chat-example/src/index.tsx
index fcde8bf..b63fd3b 100644
--- a/packages/react-chat-example/src/index.tsx
+++ b/packages/react-chat-example/src/index.tsx
@@ -125,6 +125,7 @@ const Bubble = styled.div`
 
 const Drag = styled.div`
   position: absolute;
+  min-width: 375px;
 `;
 
 ReactDOM.render(
diff --git a/packages/react-chat/src/components/Chat/ChatCreation.tsx b/packages/react-chat/src/components/Chat/ChatCreation.tsx
index cee2109..3f6f52f 100644
--- a/packages/react-chat/src/components/Chat/ChatCreation.tsx
+++ b/packages/react-chat/src/components/Chat/ChatCreation.tsx
@@ -14,6 +14,9 @@ import { CrossIcon } from "../Icons/CrossIcon";
 import { Member } from "../Members/Member";
 import { SearchBlock } from "../SearchBlock";
 import { textMediumStyles } from "../Text";
+
+import { ChatInput } from "./ChatInput";
+
 interface ChatCreationProps {
   setEditGroup?: (val: boolean) => void;
   activeChannel?: ChannelData;
@@ -153,6 +156,9 @@ export function ChatCreation({
           </ContactsList>
         </Contacts>
       )}
+      {!activeChannel && (
+        <ChatInput createChat={createChat} group={styledGroup} />
+      )}
     </CreationWrapper>
   );
 }
@@ -255,6 +261,8 @@ const CloseButton = styled.button`
 const Contacts = styled.div`
   display: flex;
   flex-direction: column;
+  flex: 1;
+  overflow: auto;
 `;
 
 const ContactsHeading = styled.p`
diff --git a/packages/react-chat/src/components/Chat/ChatInput.tsx b/packages/react-chat/src/components/Chat/ChatInput.tsx
index 03b8a51..70225b3 100644
--- a/packages/react-chat/src/components/Chat/ChatInput.tsx
+++ b/packages/react-chat/src/components/Chat/ChatInput.tsx
@@ -7,6 +7,7 @@ import React, {
 } from "react";
 import styled from "styled-components";
 
+import { ChatState, useChatState } from "../../contexts/chatStateProvider";
 import { useIdentity } from "../../contexts/identityProvider";
 import { useMessengerContext } from "../../contexts/messengerProvider";
 import { useModal } from "../../contexts/modalProvider";
@@ -31,13 +32,21 @@ import { textMediumStyles, textSmallStyles } from "../Text";
 import { EmojiPicker } from "./EmojiPicker";
 
 interface ChatInputProps {
-  reply: Reply | undefined;
-  setReply: (val: Reply | undefined) => void;
+  reply?: Reply | undefined;
+  setReply?: (val: Reply | undefined) => void;
+  createChat?: (group: string[]) => void;
+  group?: string[];
 }
 
-export function ChatInput({ reply, setReply }: ChatInputProps) {
+export function ChatInput({
+  reply,
+  setReply,
+  createChat,
+  group,
+}: ChatInputProps) {
   const narrow = useNarrow();
   const identity = useIdentity();
+  const setChatState = useChatState()[1];
   const disabled = useMemo(() => !identity, [identity]);
   const { sendMessage, contacts } = useMessengerContext();
   const [content, setContent] = useState("");
@@ -119,7 +128,11 @@ export function ChatInput({ reply, setReply }: ChatInputProps) {
           inputRef.current.innerHTML = "";
         }
         setContent("");
-        setReply(undefined);
+        if (setReply) setReply(undefined);
+        if (createChat && group) {
+          createChat(group);
+          setChatState(ChatState.ChatBody);
+        }
       }
     },
     [content, imageUint]
@@ -245,7 +258,11 @@ export function ChatInput({ reply, setReply }: ChatInputProps) {
             </ReplyTo>
             <ReplyOn>{reply.content}</ReplyOn>
             {reply.image && <ImagePreview src={reply.image} />}
-            <CloseButton onClick={() => setReply(undefined)}>
+            <CloseButton
+              onClick={() => {
+                if (setReply) setReply(undefined);
+              }}
+            >
               {" "}
               <ClearSvg width={20} height={20} className="input" />
             </CloseButton>
diff --git a/packages/react-chat/src/components/Chat/ChatTopbar.tsx b/packages/react-chat/src/components/Chat/ChatTopbar.tsx
index baa7564..175ed02 100644
--- a/packages/react-chat/src/components/Chat/ChatTopbar.tsx
+++ b/packages/react-chat/src/components/Chat/ChatTopbar.tsx
@@ -139,7 +139,7 @@ const Topbar = styled.div`
 const ChannelWrapper = styled.div`
   display: flex;
   align-items: center;
-  max-width: 85%;
+  max-width: 80%;
 
   &.narrow {
     width: calc(100% - 46px);