From 27b81243fcdb598ba9aa1a2aacc56580a648ae19 Mon Sep 17 00:00:00 2001
From: Maria Rushkova <66270386+mrushkova@users.noreply.github.com>
Date: Thu, 20 Jan 2022 02:17:02 +0100
Subject: [PATCH] Group img preview (#196)

* Add group img preview

* Cut group default name

* Clear modal form
---
 .../src/components/Modals/EditModal.tsx       | 23 +++++++++++++++----
 .../src/hooks/messenger/useGroupChats.ts      |  2 +-
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/packages/react-chat/src/components/Modals/EditModal.tsx b/packages/react-chat/src/components/Modals/EditModal.tsx
index df89226a..6d3a8a5b 100644
--- a/packages/react-chat/src/components/Modals/EditModal.tsx
+++ b/packages/react-chat/src/components/Modals/EditModal.tsx
@@ -22,6 +22,8 @@ export const EditModalName = "editModal";
 
 export const EditModal = () => {
   const { activeChannel, changeGroupChatName } = useMessengerContext();
+  const { setModal } = useModal(EditModalName);
+
   const [groupName, setGroupName] = useState("");
   const [image, setImage] = useState("");
 
@@ -31,12 +33,16 @@ export const EditModal = () => {
     }
   };
 
-  const { setModal } = useModal(EditModalName);
-
   const handleUpload = () => {
     if (activeChannel) {
-      activeChannel.icon = image;
-      changeGroupChatName(groupName, activeChannel.id);
+      if (image) {
+        activeChannel.icon = image; // Need function to send image to waku
+        setImage("");
+      }
+      if (groupName) {
+        changeGroupChatName(groupName, activeChannel.id);
+        setGroupName("");
+      }
       setModal(false);
     }
   };
@@ -64,10 +70,11 @@ export const EditModal = () => {
         </NameSection>
         <LogoSection>
           <Label>Group image</Label>
-          <GroupLogo icon={image || activeChannel?.icon}>
+          <GroupLogo icon={activeChannel?.icon}>
             {!activeChannel?.icon &&
               !image &&
               activeChannel?.name?.slice(0, 1)?.toUpperCase()}
+            {image && <LogoPreview src={image} />}
             <AddPictureInputWrapper>
               <AddIcon />
               <AddPictureInput
@@ -128,6 +135,12 @@ const GroupLogo = styled(ChannelLogo)`
   margin-right: 0;
 `;
 
+const LogoPreview = styled.img`
+  width: 128px;
+  height: 128px;
+  border-radius: 50%;
+`;
+
 const AddPictureInputWrapper = styled(AddWrapper)`
   top: 0;
   right: 8px;
diff --git a/packages/react-chat/src/hooks/messenger/useGroupChats.ts b/packages/react-chat/src/hooks/messenger/useGroupChats.ts
index 104c1492..f6819765 100644
--- a/packages/react-chat/src/hooks/messenger/useGroupChats.ts
+++ b/packages/react-chat/src/hooks/messenger/useGroupChats.ts
@@ -38,7 +38,7 @@ export function useGroupChats(
           .map(contactFromId);
         const channel: ChannelData = {
           id: chat.chatId,
-          name: chat.name ?? chat.chatId,
+          name: chat.name ?? chat.chatId.slice(0, 10),
           type: "group",
           description: `${chat.members.length} members`,
           members: members,