status-im
/
dappconnect-sdks
mirror of https://github.com/status-im/dappconnect-sdks.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Leaving chats (#198)

This commit is contained in:
Maria Rushkova 2022-01-20 14:08:48 +01:00 committed by GitHub
parent 5ebaa149c9
commit 954a286e36
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 118 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/react-chat/src/components/Chat.tsx
View File

@ -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 />
</>
);
}

9
packages/react-chat/src/components/Chat/ChatCreation.tsx
View File

@ -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);
}
},

18
packages/react-chat/src/components/Form/ChannelMenu.tsx
View File

@ -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} />
<MenuText>Leave Group</MenuText>
{channel.type === "group" && (
<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>
)}

4
packages/react-chat/src/components/Icons/CheckIcon.tsx
View File

@ -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};
}

34
packages/react-chat/src/components/Icons/DeleteIcon.tsx Normal file
View File

@ -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};
}
`;

4
packages/react-chat/src/components/Icons/LeftIcon.tsx
View File

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

48
packages/react-chat/src/components/Modals/LeavingModal.tsx Normal file
View File

@ -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;
}
};

22
packages/react-chat/src/hooks/messenger/useGroupChats.ts
View File

@ -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 };
});