From 4711dc620f585065fed4ddd480b2a1751bf3d37b Mon Sep 17 00:00:00 2001 From: Maria Rushkova <66270386+mrushkova@users.noreply.github.com> Date: Mon, 25 Oct 2021 14:05:06 +0200 Subject: [PATCH] Add dialogues (#93) --- .../src/components/Channels/Channels.tsx | 46 +++++++++++++++++++ .../src/components/Channels/EmptyChannel.tsx | 16 +++++-- packages/react-chat/src/components/Chat.tsx | 11 ++++- .../src/components/Chat/ChatBody.tsx | 6 +++ .../src/components/Members/Member.tsx | 21 +++++++-- .../src/components/Members/Members.tsx | 13 +++++- .../src/components/Members/MembersList.tsx | 4 ++ .../components/NarrowMode/NarrowChannels.tsx | 5 ++ .../components/NarrowMode/NarrowMembers.tsx | 3 ++ packages/react-chat/src/models/ChannelData.ts | 2 +- 10 files changed, 116 insertions(+), 11 deletions(-) diff --git a/packages/react-chat/src/components/Channels/Channels.tsx b/packages/react-chat/src/components/Channels/Channels.tsx index 9504e184..6d984f19 100644 --- a/packages/react-chat/src/components/Channels/Channels.tsx +++ b/packages/react-chat/src/components/Channels/Channels.tsx @@ -11,6 +11,7 @@ interface ChannelsProps { onCommunityClick: (val: ChannelData) => void; activeChannelId: string; channels: ChannelData[]; + membersList: string[]; } export function Channels({ @@ -19,6 +20,7 @@ export function Channels({ clearNotifications, activeChannelId, channels, + membersList, }: ChannelsProps) { useEffect(() => { const channel = channels.find((channel) => channel.id === activeChannelId); @@ -47,6 +49,30 @@ export function Channels({ }} /> ))} + + {membersList.length > 0 && ( + + {membersList.map((member) => ( + { + onCommunityClick({ + id: member, + name: member.slice(0, 10), + description: "Contact", + }); + }} + /> + ))} + + )} ); } @@ -60,3 +86,23 @@ export const ChannelList = styled.div` width: 0; } `; + +const Dialogues = styled.div` + display: flex; + flex-direction: column; + padding-top: 16px; + margin-top: 16px; + position: relative; + + &::before { + content: ""; + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + width: calc(100% - 24px); + height: 1px; + background-color: ${({ theme }) => theme.primary}; + opacity: 0.1; + } +`; diff --git a/packages/react-chat/src/components/Channels/EmptyChannel.tsx b/packages/react-chat/src/components/Channels/EmptyChannel.tsx index 60f44b64..b424b8e5 100644 --- a/packages/react-chat/src/components/Channels/EmptyChannel.tsx +++ b/packages/react-chat/src/components/Channels/EmptyChannel.tsx @@ -24,9 +24,17 @@ export function EmptyChannel({ channel }: EmptyChannelProps) { {channel.name} - - Welcome to the beginning of the #{channel.name} channel! - + + {channel.description === "Contact" ? ( + + Any messages you send here are encrypted and can only be read by you + and {channel.name}. + + ) : ( + + Welcome to the beginning of the #{channel.name} channel! + + )} ); } @@ -62,6 +70,8 @@ const ChannelNameEmpty = styled(ChannelName)` const EmptyText = styled.p` display: inline-block; color: ${({ theme }) => theme.secondary}; + max-width: 310px; + text-align: center; & > span { color: ${({ theme }) => theme.primary}; diff --git a/packages/react-chat/src/components/Chat.tsx b/packages/react-chat/src/components/Chat.tsx index e9669fb7..010d045b 100644 --- a/packages/react-chat/src/components/Chat.tsx +++ b/packages/react-chat/src/components/Chat.tsx @@ -36,6 +36,8 @@ export function Chat({ }); const [showMembers, setShowMembers] = useState(true); const [showChannels, setShowChannels] = useState(true); + const [membersList, setMembersList] = useState([]); + const narrow = useNarrow(); const { @@ -110,6 +112,7 @@ export function Chat({ onCommunityClick={(e) => setActiveChannel(e)} activeChannelId={activeChannel?.id ?? ""} channels={channels} + membersList={membersList} /> )} @@ -132,9 +135,15 @@ export function Chat({ loadingMessages={loadingMessages} clearNotifications={clearNotifications} channels={channels} + membersList={membersList} + setMembersList={setMembersList} /> {showMembers && !narrow && ( - + )} void; channels: ChannelData[]; + membersList: string[]; + setMembersList: any; } export function ChatBody({ @@ -60,6 +62,8 @@ export function ChatBody({ loadingMessages, clearNotifications, channels, + membersList, + setMembersList, }: ChatBodyProps) { const narrow = useNarrow(); const [showChannelsList, setShowChannelsList] = useState(false); @@ -154,6 +158,7 @@ export function ChatBody({ setShowChannels={setShowChannelsList} activeChannelId={activeChannelId} clearNotifications={clearNotifications} + membersList={membersList} /> )} {showMembersList && narrow && ( @@ -161,6 +166,7 @@ export function ChatBody({ community={community} setShowChannels={setShowChannelsList} setShowMembersList={setShowMembersList} + setMembersList={setMembersList} /> )} diff --git a/packages/react-chat/src/components/Members/Member.tsx b/packages/react-chat/src/components/Members/Member.tsx index 234a525c..08eae260 100644 --- a/packages/react-chat/src/components/Members/Member.tsx +++ b/packages/react-chat/src/components/Members/Member.tsx @@ -7,9 +7,10 @@ import { UserIcon } from "../Icons/UserIcon"; interface MemberProps { member: string; - isOnline: boolean; + isOnline?: boolean; setShowChannels: (val: boolean) => void; setShowMembers?: (val: boolean) => void; + setMembersList?: any; } export function Member({ @@ -17,6 +18,7 @@ export function Member({ isOnline, setShowChannels, setShowMembers, + setMembersList, }: MemberProps) { const narrow = useNarrow(); @@ -25,11 +27,22 @@ export function Member({ if (setShowMembers) setShowMembers(false); }, [setShowMembers]); + const startDialog = (member: string) => { + setMembersList((prevMembers: string[]) => { + if (prevMembers.find((chat) => chat === member)) { + return prevMembers; + } else { + return [...prevMembers, member]; + } + }); + setShowChannels(true); + }; + return ( - narrow && setShowMembers ? switchMemberList() : setShowChannels(true) - } + onClick={() => { + narrow && setShowMembers ? switchMemberList() : startDialog(member); + }} > void; + setMembersList: any; } -export function Members({ community, setShowChannels }: MembersProps) { +export function Members({ + community, + setShowChannels, + setMembersList, +}: MembersProps) { return ( Members - + ); } diff --git a/packages/react-chat/src/components/Members/MembersList.tsx b/packages/react-chat/src/components/Members/MembersList.tsx index 78c8b762..f9c4a43e 100644 --- a/packages/react-chat/src/components/Members/MembersList.tsx +++ b/packages/react-chat/src/components/Members/MembersList.tsx @@ -10,12 +10,14 @@ interface MembersListProps { community: CommunityData; setShowChannels: (val: boolean) => void; setShowMembers?: (val: boolean) => void; + setMembersList: any; } export function MembersList({ community, setShowChannels, setShowMembers, + setMembersList, }: MembersListProps) { return ( @@ -39,6 +41,7 @@ export function MembersList({ isOnline={false} setShowChannels={setShowChannels} setShowMembers={setShowMembers} + setMembersList={setMembersList} /> ))} @@ -51,6 +54,7 @@ export function MembersList({ isOnline={false} setShowChannels={setShowChannels} setShowMembers={setShowMembers} + setMembersList={setMembersList} /> ))} diff --git a/packages/react-chat/src/components/NarrowMode/NarrowChannels.tsx b/packages/react-chat/src/components/NarrowMode/NarrowChannels.tsx index 3eb9e2af..47ab363a 100644 --- a/packages/react-chat/src/components/NarrowMode/NarrowChannels.tsx +++ b/packages/react-chat/src/components/NarrowMode/NarrowChannels.tsx @@ -14,6 +14,8 @@ interface NarrowChannelsProps { setShowChannels: (val: boolean) => void; clearNotifications: (id: string) => void; channels: ChannelData[]; + + membersList: string[]; } export function NarrowChannels({ @@ -24,6 +26,8 @@ export function NarrowChannels({ setShowChannels, clearNotifications, channels, + + membersList, }: NarrowChannelsProps) { return ( @@ -37,6 +41,7 @@ export function NarrowChannels({ }} activeChannelId={activeChannelId} channels={channels} + membersList={membersList} /> ); diff --git a/packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx b/packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx index 4c078740..dbe07daa 100644 --- a/packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx +++ b/packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx @@ -10,12 +10,14 @@ interface NarrowMembersProps { community: CommunityData; setShowChannels: (val: boolean) => void; setShowMembersList: (val: boolean) => void; + setMembersList: any; } export function NarrowMembers({ community, setShowChannels, setShowMembersList, + setMembersList, }: NarrowMembersProps) { return ( @@ -24,6 +26,7 @@ export function NarrowMembers({ community={community} setShowChannels={setShowChannels} setShowMembers={setShowMembersList} + setMembersList={setMembersList} /> ); diff --git a/packages/react-chat/src/models/ChannelData.ts b/packages/react-chat/src/models/ChannelData.ts index 02ce3b73..83d3dad9 100644 --- a/packages/react-chat/src/models/ChannelData.ts +++ b/packages/react-chat/src/models/ChannelData.ts @@ -1,7 +1,7 @@ export type ChannelData = { id: string; name: string; - description: string; + description?: string; icon?: string; isMuted?: boolean; };