Leaving chats (#198)

packages/react-chat/src/components/Chat.tsx

@@ -13,6 +13,7 @@ import { AgreementModal } from "./Modals/AgreementModal";
 import { CoinbaseModal } from "./Modals/CoinbaseModal";
 import { CommunityModal } from "./Modals/CommunityModal";
 import { EditModal } from "./Modals/EditModal";
+import { LeavingModal } from "./Modals/LeavingModal";
 import { LogoutModal } from "./Modals/LogoutModal";
 import { ProfileFoundModal } from "./Modals/ProfileFoundModal";
 import { ProfileModal } from "./Modals/ProfileModal";
@@ -38,6 +39,7 @@ function Modals() {
       <AgreementModal />
       <ProfileFoundModal />
       <UserCreationStartModal />
+      <LeavingModal />
     </>
   );
 }

packages/react-chat/src/components/Chat/ChatCreation.tsx

@@ -68,14 +68,7 @@ export function ChatCreation({
       if (identity) {
         const newGroup = group.slice();
         newGroup.push(bufToHex(identity.publicKey));
-        group.length > 1
+        createGroupChat(newGroup);
-          ? createGroupChat(newGroup)
-          : setChannel({
-              id: newGroup[0],
-              name: newGroup[0],
-              type: "dm",
-              description: `Chatkey: ${newGroup[0]} `,
-            });
         setChatState(ChatState.ChatBody);
       }
     },

packages/react-chat/src/components/Form/ChannelMenu.tsx

@@ -7,11 +7,13 @@ import { useNarrow } from "../../contexts/narrowProvider";
 import { ChannelData } from "../../models/ChannelData";
 import { AddMemberIconSvg } from "../Icons/AddMemberIcon";
 import { CheckSvg } from "../Icons/CheckIcon";
+import { DeleteIcon } from "../Icons/DeleteIcon";
 import { EditSvg } from "../Icons/EditIcon";
 import { LeftIconSvg } from "../Icons/LeftIcon";
 import { MembersSmallSvg } from "../Icons/MembersSmallIcon";
 import { MuteSvg } from "../Icons/MuteIcon";
 import { EditModalName } from "../Modals/EditModal";
+import { LeavingModalName } from "../Modals/LeavingModal";
 
 import { DropdownMenu, MenuItem, MenuText } from "./DropdownMenu";
 
@@ -29,8 +31,9 @@ export const ChannelMenu = ({
   setEditGroup,
 }: ChannelMenuProps) => {
   const narrow = useNarrow();
-  const { clearNotifications, removeChannel } = useMessengerContext();
+  const { clearNotifications } = useMessengerContext();
   const { setModal } = useModal(EditModalName);
+  const { setModal: setLeavingModal } = useModal(LeavingModalName);
 
   return (
     <DropdownMenu closeMenu={setShowChannelMenu}>
@@ -83,12 +86,19 @@ export const ChannelMenu = ({
           {" "}
           <MenuItem
             onClick={() => {
-              removeChannel(channel.id);
+              setLeavingModal(true);
               setShowChannelMenu(false);
             }}
           >
-            <LeftIconSvg width={16} height={16} />
+            {channel.type === "group" && (
-            <MenuText>Leave Group</MenuText>
+              <LeftIconSvg width={16} height={16} className="red" />
+            )}
+            {channel.type === "dm" && (
+              <DeleteIcon width={16} height={16} className="red" />
+            )}
+            <MenuText className="red">
+              {channel.type === "group" ? "Leave Group" : "Delete Chat"}
+            </MenuText>
           </MenuItem>
         </MenuSection>
       )}

packages/react-chat/src/components/Icons/CheckIcon.tsx

@@ -33,10 +33,6 @@ export const CheckIcon = () => {
 const Icon = styled.svg`
   fill: ${({ theme }) => theme.tertiary};
 
-  &:hover {
-    fill: ${({ theme }) => theme.bodyBackgroundColor};
-  }
-
   &.green {
     fill: ${({ theme }) => theme.greenColor};
   }

packages/react-chat/src/components/Icons/DeleteIcon.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import styled from "styled-components";
+
+type DeleteIconProps = {
+  width: number;
+  height: number;
+  className?: string;
+};
+
+export const DeleteIcon = ({ width, height, className }: DeleteIconProps) => {
+  return (
+    <Icon
+      width={width}
+      height={height}
+      viewBox="0 0 16 16"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.26191 1.5C5.47293 1.5 4.83333 2.13959 4.83333 2.92857C4.83333 3.33621 4.50288 3.66667 4.09524 3.66667H2C1.72386 3.66667 1.5 3.89052 1.5 4.16667C1.5 4.44281 1.72386 4.66667 2 4.66667H2.49251C2.66109 4.66667 2.80314 4.79253 2.82342 4.95989L3.71566 12.3209C3.87795 13.6597 5.0143 14.6667 6.36295 14.6667H9.63705C10.9857 14.6667 12.1221 13.6597 12.2843 12.3209L13.1766 4.95989C13.1969 4.79253 13.3389 4.66667 13.5075 4.66667H14C14.2761 4.66667 14.5 4.44281 14.5 4.16667C14.5 3.89052 14.2761 3.66667 14 3.66667H11.9048C11.4971 3.66667 11.1667 3.33621 11.1667 2.92857C11.1667 2.13959 10.5271 1.5 9.7381 1.5L6.26191 1.5ZM9.80586 3.66667C10.0501 3.66667 10.2156 3.40724 10.1826 3.16524C10.1721 3.08786 10.1667 3.00885 10.1667 2.92857C10.1667 2.69188 9.97479 2.5 9.7381 2.5L6.2619 2.5C6.02521 2.5 5.83333 2.69188 5.83333 2.92857C5.83333 3.00885 5.82789 3.08786 5.81736 3.16524C5.78441 3.40725 5.9499 3.66667 6.19414 3.66667L9.80586 3.66667ZM11.9048 4.66667C12.0643 4.66667 12.1879 4.80617 12.1687 4.96453L11.2916 12.2006C11.1902 13.0373 10.48 13.6667 9.63705 13.6667H6.36295C5.52004 13.6667 4.80983 13.0373 4.7084 12.2006L3.8313 4.96453C3.81211 4.80616 3.93572 4.66667 4.09524 4.66667L11.9048 4.66667Z"
+      />
+    </Icon>
+  );
+};
+
+const Icon = styled.svg`
+  fill: ${({ theme }) => theme.tertiary};
+
+  &.red {
+    fill: ${({ theme }) => theme.redColor};
+  }
+`;

packages/react-chat/src/components/Icons/LeftIcon.tsx

@@ -27,4 +27,8 @@ const Icon = styled.svg`
   &.black {
     fill: ${({ theme }) => theme.primary};
   }
+
+  &.red {
+    fill: ${({ theme }) => theme.redColor};
+  }
 `;

packages/react-chat/src/components/Modals/LeavingModal.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+
+import { useMessengerContext } from "../../contexts/messengerProvider";
+import { useModal } from "../../contexts/modalProvider";
+import { ButtonNo } from "../Buttons/buttonStyle";
+
+import { Modal } from "./Modal";
+import { ButtonSection, Heading, Section, Text } from "./ModalStyle";
+
+export const LeavingModalName = "LeavingModal";
+
+export const LeavingModal = () => {
+  const { setModal } = useModal(LeavingModalName);
+  const { activeChannel, removeChannel } = useMessengerContext();
+
+  if (activeChannel)
+    return (
+      <Modal name={LeavingModalName}>
+        <Section>
+          <Heading>
+            {activeChannel.type === "dm" ? "Delete chat" : "Leave group"}
+          </Heading>
+        </Section>
+        <Section>
+          <Text>
+            Are you sure you want to{" "}
+            {activeChannel.type === "dm"
+              ? "delete this chat"
+              : "leave this group"}
+            ?
+          </Text>
+        </Section>
+        <ButtonSection>
+          <ButtonNo
+            onClick={() => {
+              removeChannel(activeChannel.id);
+              setModal(false);
+            }}
+          >
+            {activeChannel.type === "dm" ? "Delete" : "Leave"}
+          </ButtonNo>
+        </ButtonSection>
+      </Modal>
+    );
+  else {
+    return null;
+  }
+};

packages/react-chat/src/hooks/messenger/useGroupChats.ts

@@ -36,13 +36,21 @@ export function useGroupChats(
         const members = chat.members
           .map((member) => member.id)
           .map(contactFromId);
-        const channel: ChannelData = {
+        const channel: ChannelData =
-          id: chat.chatId,
+          chat.members.length > 2
-          name: chat.name ?? chat.chatId.slice(0, 10),
+            ? {
-          type: "group",
+                id: chat.chatId,
-          description: `${chat.members.length} members`,
+                name: chat.name ?? chat.chatId.slice(0, 10),
-          members: members,
+                type: "group",
-        };
+                description: `${chat.members.length} members`,
+                members: members,
+              }
+            : {
+                id: chat.chatId,
+                name: chat.members[0].id,
+                type: "dm",
+                description: `Chatkey: ${chat.members[0].id}`,
+              };
         setChannels((prev) => {
           return { ...prev, [channel.id]: channel };
         });