Refactor channel data (#114)

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

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({
+export function Chat({ communityKey, identity }: ChatProps) {
-  communityKey,
-  identity,
-  setActiveChannel,
-  activeChannel,
-}: 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 (
     <ChatWrapper>
       {showChannels && !narrow && (
@@ -91,9 +65,6 @@ export function Chat({
             <CommunitySkeleton />
           )}
           <Channels
-            onCommunityClick={(e) => setActiveChannel(e)}
-            activeChannelId={activeChannel?.id ?? ""}
-            channels={channels}
             membersList={membersList}
             groupList={groupList}
             setCreateChat={setCreateChat}
@@ -104,16 +75,12 @@ export function Chat({
       {!createChat && (
         <ChatBody
           identity={identity}
-          channel={activeChannel}
-          setActiveChannel={setActiveChannel}
-          activeChannelId={activeChannel.id}
           onClick={() => 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({
       <EditModal
         isVisible={isEditVisible}
         onClose={() => setIsEditVisible(false)}
-        channel={activeChannel}
       />
     </ChatWrapper>
   );

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({
                 )}
 
                 <Channel
-                  channel={channel}
+                  channel={activeChannel}
                   isActive={narrow ? showChannelsList : true}
                   activeView={true}
                   isMuted={false}
@@ -143,7 +133,7 @@ export function ChatBody({
           {!community && <Loading />}
           {showChannelMenu && (
             <ChannelMenu
-              channel={channel}
+              channel={activeChannel}
               messages={messages}
               switchMemberList={switchMemberList}
               setShowChannelMenu={setShowChannelMenu}
@@ -161,13 +151,13 @@ export function ChatBody({
                 messenger && community ? (
                   <ChatMessages
                     messages={messages}
-                    activeChannelId={activeChannelId}
+                    activeChannelId={activeChannel.id}
                   />
                 ) : (
                   <LoadingSkeleton />
                 )
               ) : (
-                <EmptyChannel channel={channel} />
+                <EmptyChannel channel={activeChannel} />
               )}
               <ChatInput />
             </>
@@ -175,11 +165,8 @@ export function ChatBody({
 
           {showChannelsList && narrow && (
             <NarrowChannels
-              channels={channels}
               community={community.name}
-              setActiveChannel={setActiveChannel}
               setShowChannels={setShowChannelsList}
-              activeChannelId={activeChannelId}
               membersList={membersList}
               groupList={groupList}
               setCreateChat={setCreateChat}

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

@@ -4,7 +4,6 @@ import { bufToHex } from "status-communities/dist/cjs/utils";
 import styled from "styled-components";
 
 import { useMessengerContext } from "../../contexts/messengerProvider";
-import { ChannelData } from "../../models/ChannelData";
 import { CommunityData } from "../../models/CommunityData";
 import { buttonStyles } from "../Buttons/buttonStyle";
 import { CrossIcon } from "../Icons/CrossIcon";
@@ -16,7 +15,6 @@ interface ChatCreationProps {
   community: CommunityData;
   setMembersList: any;
   setGroupList: any;
-  setActiveChannel: (val: ChannelData) => 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<string[]>([]);
 
-  const { contacts } = useMessengerContext();
+  const { contacts, setActiveChannel } = useMessengerContext();
 
   const addMember = (member: string) => {
     setStyledGroup((prevMembers: string[]) => {

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<Identity | undefined>(undefined);
-  const [activeChannel, setActiveChannel] = useState<ChannelData>({
-    id: "",
-    name: "",
-    description: "",
-  });
 
   if (identity) {
     return (
-      <MessengerProvider
+      <MessengerProvider identity={identity} communityKey={communityKey}>
-        identity={identity}
+        <Chat communityKey={communityKey} identity={identity} />
-        communityKey={communityKey}
-        activeChannel={activeChannel.id}
-      >
-        <Chat
-          communityKey={communityKey}
-          activeChannel={activeChannel}
-          setActiveChannel={setActiveChannel}
-          identity={identity}
-        />
       </MessengerProvider>
     );
   } else {

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 {
+export const EditModal = ({ isVisible, onClose }: BasicModalProps) => {
-  channel: ChannelData;
+  const { activeChannel } = useMessengerContext();
-}
-
-export const EditModal = ({ isVisible, onClose, channel }: EditModalProps) => {
   const [groupName, setGroupName] = useState("");
   const [image, setImage] = useState("");
 
@@ -25,8 +22,8 @@ export const EditModal = ({ isVisible, onClose, channel }: EditModalProps) => {
   };
 
   const handleUpload = () => {
-    channel.icon = image;
+    activeChannel.icon = image;
-    channel.name = groupName;
+    activeChannel.name = groupName;
     onClose();
   };
 
@@ -57,12 +54,14 @@ export const EditModal = ({ isVisible, onClose, channel }: EditModalProps) => {
             style={{
               backgroundImage: image
                 ? `url(${image}`
-                : channel.icon
+                : activeChannel.icon
-                ? `url(${channel.icon}`
+                ? `url(${activeChannel.icon}`
                 : "",
             }}
           >
-            {!channel.icon && !image && channel.name.slice(0, 1).toUpperCase()}
+            {!activeChannel.icon &&
+              !image &&
+              activeChannel.name.slice(0, 1).toUpperCase()}
             <AddPictureInputWrapper>
               <AddIcon />
               <AddPictureInput

packages/react-chat/src/components/NarrowMode/NarrowChannels.tsx

@@ -1,17 +1,13 @@
 import React from "react";
 import styled from "styled-components";
 
-import { ChannelData } from "../../models/ChannelData";
 import { Channels } from "../Channels/Channels";
 
 import { NarrowTopbar } from "./NarrowTopbar";
 
 interface NarrowChannelsProps {
   community: string;
-  setActiveChannel: (val: ChannelData) => 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({
     <ListWrapper>
       <NarrowTopbar list="Channels" community={community} />
       <Channels
-        onCommunityClick={(e) => {
+        onCommunityClick={() => setShowChannels(false)}
-          setActiveChannel(e);
-          setShowChannels(false);
-        }}
-        activeChannelId={activeChannelId}
-        channels={channels}
         membersList={membersList}
         groupList={groupList}
         setCreateChat={setCreateChat}

packages/react-chat/src/contexts/messengerProvider.tsx

@@ -13,6 +13,12 @@ const MessengerContext = createContext<MessengerType>({
   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 <MessengerContext.Provider value={messenger} children={children} />;
 }

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<ChannelData>({
+    id: "",
+    name: "",
+    description: "",
+  });
+
+  const chatId = useMemo(() => activeChannel.id, [activeChannel]);
+
   const [messenger, setMessenger] = useState<Messenger | undefined>(undefined);
 
   const [internalContacts, setInternalContacts] = useState<{
@@ -114,6 +125,25 @@ export function useMessenger(
     [chatId, messenger]
   );
 
+  const channels = useMemo<ChannelData[]>(() => {
+    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,
   };
 }