From 954a286e3681f9c3414c8089ae495870e5822cfc Mon Sep 17 00:00:00 2001
From: Maria Rushkova <66270386+mrushkova@users.noreply.github.com>
Date: Thu, 20 Jan 2022 14:08:48 +0100
Subject: [PATCH] Leaving chats (#198)
---
packages/react-chat/src/components/Chat.tsx | 2 +
.../src/components/Chat/ChatCreation.tsx | 9 +---
.../src/components/Form/ChannelMenu.tsx | 18 +++++--
.../src/components/Icons/CheckIcon.tsx | 4 --
.../src/components/Icons/DeleteIcon.tsx | 34 +++++++++++++
.../src/components/Icons/LeftIcon.tsx | 4 ++
.../src/components/Modals/LeavingModal.tsx | 48 +++++++++++++++++++
.../src/hooks/messenger/useGroupChats.ts | 22 ++++++---
8 files changed, 118 insertions(+), 23 deletions(-)
create mode 100644 packages/react-chat/src/components/Icons/DeleteIcon.tsx
create mode 100644 packages/react-chat/src/components/Modals/LeavingModal.tsx
diff --git a/packages/react-chat/src/components/Chat.tsx b/packages/react-chat/src/components/Chat.tsx
index 5bfbf222..fff1d895 100644
--- a/packages/react-chat/src/components/Chat.tsx
+++ b/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() {
+
);
}
diff --git a/packages/react-chat/src/components/Chat/ChatCreation.tsx b/packages/react-chat/src/components/Chat/ChatCreation.tsx
index 8d7f2f5f..a0d57735 100644
--- a/packages/react-chat/src/components/Chat/ChatCreation.tsx
+++ b/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)
- : setChannel({
- id: newGroup[0],
- name: newGroup[0],
- type: "dm",
- description: `Chatkey: ${newGroup[0]} `,
- });
+ createGroupChat(newGroup);
setChatState(ChatState.ChatBody);
}
},
diff --git a/packages/react-chat/src/components/Form/ChannelMenu.tsx b/packages/react-chat/src/components/Form/ChannelMenu.tsx
index 2593d4bb..25dfe24a 100644
--- a/packages/react-chat/src/components/Form/ChannelMenu.tsx
+++ b/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 (
@@ -83,12 +86,19 @@ export const ChannelMenu = ({
{" "}
)}
diff --git a/packages/react-chat/src/components/Icons/CheckIcon.tsx b/packages/react-chat/src/components/Icons/CheckIcon.tsx
index 1feca904..d6da69d7 100644
--- a/packages/react-chat/src/components/Icons/CheckIcon.tsx
+++ b/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};
}
diff --git a/packages/react-chat/src/components/Icons/DeleteIcon.tsx b/packages/react-chat/src/components/Icons/DeleteIcon.tsx
new file mode 100644
index 00000000..f1ab68e0
--- /dev/null
+++ b/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 (
+
+
+
+ );
+};
+
+const Icon = styled.svg`
+ fill: ${({ theme }) => theme.tertiary};
+
+ &.red {
+ fill: ${({ theme }) => theme.redColor};
+ }
+`;
diff --git a/packages/react-chat/src/components/Icons/LeftIcon.tsx b/packages/react-chat/src/components/Icons/LeftIcon.tsx
index b7e8d9df..1eab4dfe 100644
--- a/packages/react-chat/src/components/Icons/LeftIcon.tsx
+++ b/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};
+ }
`;
diff --git a/packages/react-chat/src/components/Modals/LeavingModal.tsx b/packages/react-chat/src/components/Modals/LeavingModal.tsx
new file mode 100644
index 00000000..16a02c12
--- /dev/null
+++ b/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 (
+
+
+
+ {activeChannel.type === "dm" ? "Delete chat" : "Leave group"}
+
+
+
+
+ Are you sure you want to{" "}
+ {activeChannel.type === "dm"
+ ? "delete this chat"
+ : "leave this group"}
+ ?
+
+
+
+ {
+ removeChannel(activeChannel.id);
+ setModal(false);
+ }}
+ >
+ {activeChannel.type === "dm" ? "Delete" : "Leave"}
+
+
+
+ );
+ else {
+ return null;
+ }
+};
diff --git a/packages/react-chat/src/hooks/messenger/useGroupChats.ts b/packages/react-chat/src/hooks/messenger/useGroupChats.ts
index f6819765..54373ac3 100644
--- a/packages/react-chat/src/hooks/messenger/useGroupChats.ts
+++ b/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 = {
- id: chat.chatId,
- name: chat.name ?? chat.chatId.slice(0, 10),
- type: "group",
- description: `${chat.members.length} members`,
- members: members,
- };
+ const channel: ChannelData =
+ chat.members.length > 2
+ ? {
+ id: chat.chatId,
+ name: chat.name ?? chat.chatId.slice(0, 10),
+ 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 };
});