Refactor channels (#177)

packages/react-chat/src/components/Channels/Channels.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import styled from "styled-components";
 
 import { ChatState, useChatState } from "../../contexts/chatStateProvider";
@@ -45,43 +45,36 @@ function GenerateChannels({ type, onCommunityClick }: GenerateChannelsProps) {
   );
 }
 
-export function Channels({ onCommunityClick }: ChannelsProps) {
+type ChatsListProps = {
-  const { clearNotifications, clearMentions, notifications, activeChannel } =
+  onCommunityClick?: () => void;
-    useMessengerContext();
+};
-  useEffect(() => {
-    if (activeChannel) {
-      if (notifications[activeChannel.id] > 0) {
-        clearNotifications(activeChannel.id);
-        clearMentions(activeChannel.id);
-      }
-    }
-  }, [notifications, activeChannel]);
-  const setChatState = useChatState()[1];
-  const identity = useIdentity();
 
+function ChatsSideBar({ onCommunityClick }: ChatsListProps) {
+  const setChatState = useChatState()[1];
+  return (
+    <>
+      <ChatsBar>
+        <Heading>Chat</Heading>
+        <EditBtn onClick={() => setChatState(ChatState.ChatCreation)}>
+          <CreateIcon />
+        </EditBtn>
+      </ChatsBar>
+      <ChatsList>
+        <GenerateChannels type={"group"} onCommunityClick={onCommunityClick} />
+        <GenerateChannels type={"dm"} onCommunityClick={onCommunityClick} />
+      </ChatsList>
+    </>
+  );
+}
+
+export function Channels({ onCommunityClick }: ChannelsProps) {
+  const identity = useIdentity();
   return (
     <ChannelList>
       <GenerateChannels type={"channel"} onCommunityClick={onCommunityClick} />
       <Chats>
         {identity ? (
-          <>
+          <ChatsSideBar onCommunityClick={onCommunityClick} />
-            <ChatsBar>
-              <Heading>Chat</Heading>
-              <EditBtn onClick={() => setChatState(ChatState.ChatCreation)}>
-                <CreateIcon />
-              </EditBtn>
-            </ChatsBar>
-            <ChatsList>
-              <GenerateChannels
-                type={"group"}
-                onCommunityClick={onCommunityClick}
-              />
-              <GenerateChannels
-                type={"dm"}
-                onCommunityClick={onCommunityClick}
-              />
-            </ChatsList>
-          </>
         ) : (
           <UserCreation permission={true} />
         )}

packages/react-chat/src/components/Channels/EmptyChannel.tsx

@@ -9,11 +9,11 @@ import { textMediumStyles } from "../Text";
 
 import { ChannelInfo, ChannelLogo, ChannelName } from "./Channel";
 
-type EmptyChannelProps = {
+type ChannelBeggingTextProps = {
   channel: ChannelData;
 };
 
-export function EmptyChannel({ channel }: EmptyChannelProps) {
+function ChannelBeggingText({ channel }: ChannelBeggingTextProps) {
   const identity = useIdentity();
   const { contacts } = useMessengerContext();
   const members = useMemo(() => {
@@ -25,23 +25,18 @@ export function EmptyChannel({ channel }: EmptyChannelProps) {
     }
     return [];
   }, [channel, contacts]);
-  return (
-    <Wrapper>
-      <ChannelInfoEmpty>
-        <ChannelLogoEmpty icon={channel.icon}>
-          {" "}
-          {!channel.icon && channel.name.slice(0, 1).toUpperCase()}
-        </ChannelLogoEmpty>
-        <ChannelNameEmpty active={true} channel={channel} />
-      </ChannelInfoEmpty>
 
-      {channel.type === "dm" ? (
+  switch (channel.type) {
+    case "dm":
+      return (
         <EmptyText>
           Any messages you send here are encrypted and can only be read by you
           and <br />
           <span>{channel.name.slice(0, 10)}</span>.
         </EmptyText>
-      ) : channel.type === "group" ? (
+      );
+    case "group":
+      return (
         <EmptyTextGroup>
           {identity && <span>{utils.bufToHex(identity.publicKey)}</span>}{" "}
           created a group with{" "}
@@ -52,11 +47,32 @@ export function EmptyChannel({ channel }: EmptyChannelProps) {
             </span>
           ))}
         </EmptyTextGroup>
-      ) : (
+      );
+    case "channel":
+      return (
         <EmptyText>
           Welcome to the beginning of the <span>#{channel.name}</span> channel!
         </EmptyText>
-      )}
+      );
+  }
+  return null;
+}
+
+type EmptyChannelProps = {
+  channel: ChannelData;
+};
+
+export function EmptyChannel({ channel }: EmptyChannelProps) {
+  return (
+    <Wrapper>
+      <ChannelInfoEmpty>
+        <ChannelLogoEmpty icon={channel.icon}>
+          {" "}
+          {!channel.icon && channel.name.slice(0, 1).toUpperCase()}
+        </ChannelLogoEmpty>
+        <ChannelNameEmpty active={true} channel={channel} />
+      </ChannelInfoEmpty>
+      <ChannelBeggingText channel={channel} />
     </Wrapper>
   );
 }

packages/react-chat/src/hooks/messenger/useMessenger.ts

@@ -228,6 +228,15 @@ export function useMessenger(
     [messenger, groupChat, activeChannel]
   );
 
+  useEffect(() => {
+    if (activeChannel) {
+      if (notifications[activeChannel.id] > 0) {
+        clearNotifications(activeChannel.id);
+        clearMentions(activeChannel.id);
+      }
+    }
+  }, [notifications, activeChannel]);
+
   return {
     messenger,
     messages,