Refactor channel data (#114)

2021-11-05 14:33:30 +01:00 · 2021-11-05 14:33:30 +01:00 · ee91965c32
parent 61c27f0721
commit ee91965c32
9 changed files with 85 additions and 117 deletions
--- 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);
                }}
              />
--- 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 (
    <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>
  );
--- 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({
                )}

                <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}
--- a/packages/react-chat/src/components/Chat/ChatCreation.tsx
+++ b/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[]) => {
--- 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<Identity | undefined>(undefined);
-  const [activeChannel, setActiveChannel] = useState<ChannelData>({
-    id: "",
-    name: "",
-    description: "",
-  });

  if (identity) {
    return (
-      <MessengerProvider
-        identity={identity}
-        communityKey={communityKey}
-        activeChannel={activeChannel.id}
-      >
-        <Chat
-          communityKey={communityKey}
-          activeChannel={activeChannel}
-          setActiveChannel={setActiveChannel}
-          identity={identity}
-        />
+      <MessengerProvider identity={identity} communityKey={communityKey}>
+        <Chat communityKey={communityKey} identity={identity} />
      </MessengerProvider>
    );
  } else {
--- 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()}
            <AddPictureInputWrapper>
              <AddIcon />
              <AddPictureInput
--- a/packages/react-chat/src/components/NarrowMode/NarrowChannels.tsx
+++ b/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) => {
-          setActiveChannel(e);
-          setShowChannels(false);
-        }}
-        activeChannelId={activeChannelId}
-        channels={channels}
+        onCommunityClick={() => setShowChannels(false)}
        membersList={membersList}
        groupList={groupList}
        setCreateChat={setCreateChat}
--- a/packages/react-chat/src/contexts/messengerProvider.tsx
+++ b/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} />;
 }
--- 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<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,
  };
 }