From ee91965c3218a9c7c0024e23d220b33be21e1278 Mon Sep 17 00:00:00 2001 From: Szymon Szlachtowicz <38212223+Szymx95@users.noreply.github.com> Date: Fri, 5 Nov 2021 14:33:30 +0100 Subject: [PATCH] Refactor channel data (#114) --- .../src/components/Channels/Channels.tsx | 36 ++++++++++------- packages/react-chat/src/components/Chat.tsx | 39 +------------------ .../src/components/Chat/ChatBody.tsx | 23 +++-------- .../src/components/Chat/ChatCreation.tsx | 5 +-- .../react-chat/src/components/ChatLoader.tsx | 19 +-------- .../src/components/Modals/EditModal.tsx | 21 +++++----- .../components/NarrowMode/NarrowChannels.tsx | 14 +------ .../src/contexts/messengerProvider.tsx | 10 +++-- .../src/hooks/messenger/useMessenger.ts | 35 ++++++++++++++++- 9 files changed, 85 insertions(+), 117 deletions(-) diff --git a/packages/react-chat/src/components/Channels/Channels.tsx b/packages/react-chat/src/components/Channels/Channels.tsx index 6e891b23..547b0d4b 100644 --- a/packages/react-chat/src/components/Channels/Channels.tsx +++ b/packages/react-chat/src/components/Channels/Channels.tsx @@ -1,31 +1,32 @@ -import React, { useEffect } from "react"; +import React, { useEffect, useMemo } from "react"; import styled from "styled-components"; import { useMessengerContext } from "../../contexts/messengerProvider"; -import { ChannelData } from "../../models/ChannelData"; import { EditIcon } from "../Icons/EditIcon"; import { Channel } from "./Channel"; interface ChannelsProps { - onCommunityClick: (val: ChannelData) => void; - activeChannelId: string; - channels: ChannelData[]; membersList: string[]; groupList: string[][]; setCreateChat: (val: boolean) => void; + onCommunityClick?: () => void; } export function Channels({ - onCommunityClick, - activeChannelId, - channels, membersList, groupList, setCreateChat, + onCommunityClick, }: ChannelsProps) { - const { clearNotifications, notifications } = useMessengerContext(); - + const { + clearNotifications, + notifications, + activeChannel, + setActiveChannel, + channels, + } = useMessengerContext(); + const activeChannelId = useMemo(() => activeChannel.id, [activeChannel]); useEffect(() => { const channel = channels.find((channel) => channel.id === activeChannelId); if (channel) { @@ -49,7 +50,10 @@ export function Channels({ : undefined } onClick={() => { - onCommunityClick(channel); + setActiveChannel(channel); + if (onCommunityClick) { + onCommunityClick(); + } setCreateChat(false); }} /> @@ -75,11 +79,14 @@ export function Channels({ isActive={group.join("") === activeChannelId} isMuted={false} onClick={() => { - onCommunityClick({ + setActiveChannel({ id: group.join(""), name: group.join(", ").slice(0, 10), }); setCreateChat(false); + if (onCommunityClick) { + onCommunityClick(); + } }} /> ))} @@ -96,11 +103,14 @@ export function Channels({ isActive={member === activeChannelId} isMuted={false} onClick={() => { - onCommunityClick({ + setActiveChannel({ id: member, name: member.slice(0, 10), description: "Contact", }); + if (onCommunityClick) { + onCommunityClick(); + } setCreateChat(false); }} /> diff --git a/packages/react-chat/src/components/Chat.tsx b/packages/react-chat/src/components/Chat.tsx index 8a76d8b9..b05be34f 100644 --- a/packages/react-chat/src/components/Chat.tsx +++ b/packages/react-chat/src/components/Chat.tsx @@ -1,10 +1,9 @@ -import React, { useEffect, useMemo, useState } from "react"; +import React, { useMemo, useState } from "react"; import { Identity } from "status-communities/dist/cjs"; import styled from "styled-components"; import { useMessengerContext } from "../contexts/messengerProvider"; import { useNarrow } from "../contexts/narrowProvider"; -import { ChannelData } from "../models/ChannelData"; import { uintToImgUrl } from "../utils/uintToImgUrl"; import { Channels } from "./Channels/Channels"; @@ -19,16 +18,9 @@ import { CommunitySkeleton } from "./Skeleton/CommunitySkeleton"; interface ChatProps { communityKey: string; identity: Identity; - setActiveChannel: (channel: ChannelData) => void; - activeChannel: ChannelData; } -export function Chat({ - communityKey, - identity, - setActiveChannel, - activeChannel, -}: ChatProps) { +export function Chat({ communityKey, identity }: ChatProps) { const [showMembers, setShowMembers] = useState(true); const [showChannels, setShowChannels] = useState(true); const [membersList, setMembersList] = useState([]); @@ -63,24 +55,6 @@ export function Chat({ } }, [community]); - const channels = useMemo(() => { - if (community?.chats) { - return Array.from(community.chats.values()).map((chat) => { - return { - id: chat.id, - name: chat.communityChat?.identity?.displayName ?? "", - description: chat.communityChat?.identity?.description ?? "", - }; - }); - } else { - return []; - } - }, [community]); - - useEffect(() => { - if (channels.length > 0) setActiveChannel(channels[0]); - }, [channels]); - return ( {showChannels && !narrow && ( @@ -91,9 +65,6 @@ export function Chat({ )} setActiveChannel(e)} - activeChannelId={activeChannel?.id ?? ""} - channels={channels} membersList={membersList} groupList={groupList} setCreateChat={setCreateChat} @@ -104,16 +75,12 @@ export function Chat({ {!createChat && ( setShowMembers(!showMembers)} showMembers={showMembers} community={communityData} showCommunity={!showChannels} onCommunityClick={showModal} onEditClick={showEditModal} - channels={channels} membersList={membersList} groupList={groupList} setMembersList={setMembersList} @@ -134,7 +101,6 @@ export function Chat({ community={communityData} setMembersList={setMembersList} setGroupList={setGroupList} - setActiveChannel={setActiveChannel} setCreateChat={setCreateChat} /> )} @@ -152,7 +118,6 @@ export function Chat({ setIsEditVisible(false)} - channel={activeChannel} /> ); diff --git a/packages/react-chat/src/components/Chat/ChatBody.tsx b/packages/react-chat/src/components/Chat/ChatBody.tsx index 8a05a9da..8ef47ffc 100644 --- a/packages/react-chat/src/components/Chat/ChatBody.tsx +++ b/packages/react-chat/src/components/Chat/ChatBody.tsx @@ -4,7 +4,6 @@ import styled from "styled-components"; import { useMessengerContext } from "../../contexts/messengerProvider"; import { useNarrow } from "../../contexts/narrowProvider"; -import { ChannelData } from "../../models/ChannelData"; import { CommunityData } from "../../models/CommunityData"; import { Channel } from "../Channels/Channel"; import { EmptyChannel } from "../Channels/EmptyChannel"; @@ -24,16 +23,12 @@ import { ChatMessages } from "./ChatMessages"; interface ChatBodyProps { identity: Identity; - channel: ChannelData; community: CommunityData | undefined; onClick: () => void; showMembers: boolean; showCommunity: boolean; - setActiveChannel: (val: ChannelData) => void; - activeChannelId: string; onCommunityClick: () => void; onEditClick: () => void; - channels: ChannelData[]; membersList: string[]; groupList: [][]; setMembersList: any; @@ -43,23 +38,19 @@ interface ChatBodyProps { export function ChatBody({ identity, - channel, community, onClick, showMembers, showCommunity, - setActiveChannel, - activeChannelId, onCommunityClick, onEditClick, - channels, membersList, groupList, setMembersList, setGroupList, setCreateChat, }: ChatBodyProps) { - const { messenger, messages } = useMessengerContext(); + const { messenger, messages, activeChannel } = useMessengerContext(); const narrow = useNarrow(); const [showChannelsList, setShowChannelsList] = useState(false); const [showMembersList, setShowMembersList] = useState(false); @@ -92,7 +83,6 @@ export function ChatBody({ community={community} setMembersList={setMembersList} setGroupList={setGroupList} - setActiveChannel={setActiveChannel} setCreateChat={setCreateChat} editGroup={editGroup} /> @@ -115,7 +105,7 @@ export function ChatBody({ )} } {showChannelMenu && ( ) : ( ) ) : ( - + )} @@ -175,11 +165,8 @@ export function ChatBody({ {showChannelsList && narrow && ( void; setCreateChat: (val: boolean) => void; editGroup?: boolean; } @@ -26,14 +24,13 @@ export function ChatCreation({ community, setMembersList, setGroupList, - setActiveChannel, setCreateChat, editGroup, }: ChatCreationProps) { const [query, setQuery] = useState(""); const [styledGroup, setStyledGroup] = useState([]); - const { contacts } = useMessengerContext(); + const { contacts, setActiveChannel } = useMessengerContext(); const addMember = (member: string) => { setStyledGroup((prevMembers: string[]) => { diff --git a/packages/react-chat/src/components/ChatLoader.tsx b/packages/react-chat/src/components/ChatLoader.tsx index 819827a9..0b7d2a44 100644 --- a/packages/react-chat/src/components/ChatLoader.tsx +++ b/packages/react-chat/src/components/ChatLoader.tsx @@ -2,7 +2,6 @@ import React, { useState } from "react"; import { Identity } from "status-communities/dist/cjs"; import { MessengerProvider } from "../contexts/messengerProvider"; -import { ChannelData } from "../models/ChannelData"; import { Chat } from "./Chat"; import { IdentityLoader } from "./Form/IdentityLoader"; @@ -13,25 +12,11 @@ interface ChatLoaderProps { export function ChatLoader({ communityKey }: ChatLoaderProps) { const [identity, setIdentity] = useState(undefined); - const [activeChannel, setActiveChannel] = useState({ - id: "", - name: "", - description: "", - }); if (identity) { return ( - - + + ); } else { diff --git a/packages/react-chat/src/components/Modals/EditModal.tsx b/packages/react-chat/src/components/Modals/EditModal.tsx index 713eed20..cf55e74f 100644 --- a/packages/react-chat/src/components/Modals/EditModal.tsx +++ b/packages/react-chat/src/components/Modals/EditModal.tsx @@ -1,7 +1,7 @@ import React, { useState } from "react"; import styled from "styled-components"; -import { ChannelData } from "../../models/ChannelData"; +import { useMessengerContext } from "../../contexts/messengerProvider"; import { buttonStyles } from "../Buttons/buttonStyle"; import { ChannelLogo } from "../Channels/Channel"; import { AddIcon } from "../Icons/AddIcon"; @@ -10,11 +10,8 @@ import { textMediumStyles } from "../Text"; import { BasicModalProps, Modal } from "./Modal"; import { Heading, Section } from "./ModalStyle"; -interface EditModalProps extends BasicModalProps { - channel: ChannelData; -} - -export const EditModal = ({ isVisible, onClose, channel }: EditModalProps) => { +export const EditModal = ({ isVisible, onClose }: BasicModalProps) => { + const { activeChannel } = useMessengerContext(); const [groupName, setGroupName] = useState(""); const [image, setImage] = useState(""); @@ -25,8 +22,8 @@ export const EditModal = ({ isVisible, onClose, channel }: EditModalProps) => { }; const handleUpload = () => { - channel.icon = image; - channel.name = groupName; + activeChannel.icon = image; + activeChannel.name = groupName; onClose(); }; @@ -57,12 +54,14 @@ export const EditModal = ({ isVisible, onClose, channel }: EditModalProps) => { style={{ backgroundImage: image ? `url(${image}` - : channel.icon - ? `url(${channel.icon}` + : activeChannel.icon + ? `url(${activeChannel.icon}` : "", }} > - {!channel.icon && !image && channel.name.slice(0, 1).toUpperCase()} + {!activeChannel.icon && + !image && + activeChannel.name.slice(0, 1).toUpperCase()} void; - activeChannelId: string; setShowChannels: (val: boolean) => void; - channels: ChannelData[]; membersList: string[]; groupList: string[][]; setCreateChat: (val: boolean) => void; @@ -19,10 +15,7 @@ interface NarrowChannelsProps { export function NarrowChannels({ community, - setActiveChannel, - activeChannelId, setShowChannels, - channels, membersList, groupList, setCreateChat, @@ -31,12 +24,7 @@ export function NarrowChannels({ { - setActiveChannel(e); - setShowChannels(false); - }} - activeChannelId={activeChannelId} - channels={channels} + onCommunityClick={() => setShowChannels(false)} membersList={membersList} groupList={groupList} setCreateChat={setCreateChat} diff --git a/packages/react-chat/src/contexts/messengerProvider.tsx b/packages/react-chat/src/contexts/messengerProvider.tsx index 5b8da444..e80de05e 100644 --- a/packages/react-chat/src/contexts/messengerProvider.tsx +++ b/packages/react-chat/src/contexts/messengerProvider.tsx @@ -13,6 +13,12 @@ const MessengerContext = createContext({ loadingMessages: false, community: undefined, contacts: [], + activeChannel: { + id: "", + name: "", + }, + channels: [], + setActiveChannel: () => undefined, }); export function useMessengerContext() { @@ -21,17 +27,15 @@ export function useMessengerContext() { interface MessengerProviderProps { children: React.ReactNode; - activeChannel: string; communityKey?: string; identity?: Identity; } export function MessengerProvider({ children, - activeChannel, communityKey, identity, }: MessengerProviderProps) { - const messenger = useMessenger(activeChannel, communityKey, identity); + const messenger = useMessenger(communityKey, identity); return ; } diff --git a/packages/react-chat/src/hooks/messenger/useMessenger.ts b/packages/react-chat/src/hooks/messenger/useMessenger.ts index de25855b..bf93d7ac 100644 --- a/packages/react-chat/src/hooks/messenger/useMessenger.ts +++ b/packages/react-chat/src/hooks/messenger/useMessenger.ts @@ -7,6 +7,7 @@ import { Messenger, } from "status-communities/dist/cjs"; +import { ChannelData } from "../../models/ChannelData"; import { ChatMessage } from "../../models/ChatMessage"; import { Contact } from "../../models/Contact"; import { createCommunity } from "../../utils/createCommunity"; @@ -28,13 +29,23 @@ export type MessengerType = { loadingMessages: boolean; community: Community | undefined; contacts: Contact[]; + channels: ChannelData[]; + activeChannel: ChannelData; + setActiveChannel: (channel: ChannelData) => void; }; export function useMessenger( - chatId: string, communityKey: string | undefined, identity: Identity | undefined ) { + const [activeChannel, setActiveChannel] = useState({ + id: "", + name: "", + description: "", + }); + + const chatId = useMemo(() => activeChannel.id, [activeChannel]); + const [messenger, setMessenger] = useState(undefined); const [internalContacts, setInternalContacts] = useState<{ @@ -114,6 +125,25 @@ export function useMessenger( [chatId, messenger] ); + const channels = useMemo(() => { + if (community?.chats) { + return Array.from(community.chats.values()).map((chat) => { + return { + id: chat.id, + name: chat.communityChat?.identity?.displayName ?? "", + description: chat.communityChat?.identity?.description ?? "", + type: "channel", + }; + }); + } else { + return []; + } + }, [community]); + + useEffect(() => { + if (channels.length > 0) setActiveChannel(channels[0]); + }, [channels]); + return { messenger, messages, @@ -124,5 +154,8 @@ export function useMessenger( loadingMessages, community, contacts, + channels, + activeChannel, + setActiveChannel, }; }