Add communityData to useMessenger (#118)

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

@@ -1,9 +1,7 @@
-import React, { useMemo, useState } from "react";
+import React, { useState } from "react";
 import styled from "styled-components";
 
-import { useMessengerContext } from "../contexts/messengerProvider";
 import { useNarrow } from "../contexts/narrowProvider";
-import { uintToImgUrl } from "../utils/uintToImgUrl";
 
 import { Channels } from "./Channels/Channels";
 import { ChatBody } from "./Chat/ChatBody";
@@ -12,7 +10,6 @@ import { Community } from "./Community";
 import { Members } from "./Members/Members";
 import { CommunityModal } from "./Modals/CommunityModal";
 import { EditModal } from "./Modals/EditModal";
-import { CommunitySkeleton } from "./Skeleton/CommunitySkeleton";
 
 export function Chat() {
   const [showMembers, setShowMembers] = useState(true);
@@ -29,36 +26,11 @@ export function Chat() {
   const [isEditVisible, setIsEditVisible] = useState(false);
   const showEditModal = () => setIsEditVisible(true);
 
-  const { community } = useMessengerContext();
-  const communityData = useMemo(() => {
-    if (community?.description) {
-      return {
-        id: community.publicKeyStr,
-        name: community.description.identity?.displayName ?? "",
-        icon: uintToImgUrl(
-          community.description?.identity?.images?.thumbnail.payload ??
-            new Uint8Array()
-        ),
-        members: 0,
-        membersList: Object.keys(community.description.proto.members),
-        description: community.description.identity?.description ?? "",
-      };
-    } else {
-      return undefined;
-    }
-  }, [community]);
-
   return (
     <ChatWrapper>
       {showChannels && !narrow && (
         <ChannelsWrapper>
-          {communityData ? (
+          <StyledCommunity onClick={showModal} />
-            <StyledCommunity onClick={showModal} community={communityData} />
-          ) : (
-            <SkeletonWrapper>
-              <CommunitySkeleton />
-            </SkeletonWrapper>
-          )}
           <Channels
             membersList={membersList}
             groupList={groupList}
@@ -71,7 +43,6 @@ export function Chat() {
         <ChatBody
           onClick={() => setShowMembers(!showMembers)}
           showMembers={showMembers}
-          community={communityData}
           showCommunity={!showChannels}
           onCommunityClick={showModal}
           onEditClick={showEditModal}
@@ -88,22 +59,18 @@ export function Chat() {
           setMembersList={setMembersList}
         />
       )}
-      {createChat && communityData && (
+      {createChat && (
         <ChatCreation
-          community={communityData}
           setMembersList={setMembersList}
           setGroupList={setGroupList}
           setCreateChat={setCreateChat}
         />
       )}
-      {communityData && (
+      <CommunityModal
-        <CommunityModal
+        isVisible={isModalVisible}
-          isVisible={isModalVisible}
+        onClose={() => setIsModalVisible(false)}
-          onClose={() => setIsModalVisible(false)}
+        subtitle="Public Community"
-          community={communityData}
+      />
-          subtitle="Public Community"
-        />
-      )}
       <EditModal
         isVisible={isEditVisible}
         onClose={() => setIsEditVisible(false)}
@@ -128,10 +95,6 @@ const ChannelsWrapper = styled.div`
   flex-direction: column;
 `;
 
-const SkeletonWrapper = styled.div`
-  margin-bottom: 16px;
-`;
-
 const StyledCommunity = styled(Community)`
   padding: 0 0 0 8px;
   margin: 0 0 16px;

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

@@ -3,7 +3,6 @@ import styled from "styled-components";
 
 import { useMessengerContext } from "../../contexts/messengerProvider";
 import { useNarrow } from "../../contexts/narrowProvider";
-import { CommunityData } from "../../models/CommunityData";
 import { Channel } from "../Channels/Channel";
 import { Community } from "../Community";
 import { ChannelMenu } from "../Form/ChannelMenu";
@@ -20,7 +19,6 @@ import { ChatInput } from "./ChatInput";
 import { ChatMessages } from "./ChatMessages";
 
 interface ChatBodyProps {
-  community: CommunityData | undefined;
   onClick: () => void;
   showMembers: boolean;
   showCommunity: boolean;
@@ -34,7 +32,6 @@ interface ChatBodyProps {
 }
 
 export function ChatBody({
-  community,
   onClick,
   showMembers,
   showCommunity,
@@ -46,7 +43,8 @@ export function ChatBody({
   setGroupList,
   setCreateChat,
 }: ChatBodyProps) {
-  const { messenger, messages, activeChannel } = useMessengerContext();
+  const { messenger, messages, activeChannel, communityData } =
+    useMessengerContext();
   const narrow = useNarrow();
   const [showChannelsList, setShowChannelsList] = useState(false);
   const [showMembersList, setShowMembersList] = useState(false);
@@ -73,9 +71,8 @@ export function ChatBody({
 
   return (
     <ChatBodyWrapper className={className}>
-      {editGroup && community ? (
+      {editGroup && communityData ? (
         <ChatCreation
-          community={community}
           setMembersList={setMembersList}
           setGroupList={setGroupList}
           setCreateChat={setCreateChat}
@@ -88,14 +85,11 @@ export function ChatBody({
           }
         >
           <ChannelWrapper className={className}>
-            {messenger && community ? (
+            {messenger && communityData ? (
               <>
                 {(showCommunity || narrow) && (
                   <CommunityWrap className={className}>
-                    <Community
+                    <Community onClick={onCommunityClick} />
-                      onClick={onCommunityClick}
-                      community={community}
-                    />
                   </CommunityWrap>
                 )}
 
@@ -127,7 +121,7 @@ export function ChatBody({
               <MoreIcon />
             </MoreBtn>
           </MenuWrapper>
-          {!community && <Loading />}
+          {!messenger && !communityData && <Loading />}
           {showChannelMenu && (
             <ChannelMenu
               channel={activeChannel}
@@ -140,11 +134,11 @@ export function ChatBody({
           )}
         </ChatTopbar>
       )}
-      {messenger && community ? (
+      {messenger ? (
         <>
           {!showChannelsList && !showMembersList && (
             <>
-              {messenger && community ? (
+              {messenger && communityData ? (
                 <ChatMessages
                   messages={messages}
                   activeChannelId={activeChannel.id}
@@ -159,7 +153,6 @@ export function ChatBody({
 
           {showChannelsList && narrow && (
             <NarrowChannels
-              community={community.name}
               setShowChannels={setShowChannelsList}
               membersList={membersList}
               groupList={groupList}
@@ -168,7 +161,6 @@ export function ChatBody({
           )}
           {showMembersList && narrow && (
             <NarrowMembers
-              community={community}
               setShowChannels={setShowChannelsList}
               setShowMembersList={setShowMembersList}
               setMembersList={setMembersList}

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

@@ -4,14 +4,12 @@ import styled from "styled-components";
 
 import { useIdentity } from "../../contexts/identityProvider";
 import { useMessengerContext } from "../../contexts/messengerProvider";
-import { CommunityData } from "../../models/CommunityData";
 import { buttonStyles } from "../Buttons/buttonStyle";
 import { CrossIcon } from "../Icons/CrossIcon";
 import { Member } from "../Members/Member";
 import { SearchBlock } from "../SearchBlock";
 import { textMediumStyles } from "../Text";
 interface ChatCreationProps {
-  community: CommunityData;
   setMembersList: any;
   setGroupList: any;
   setCreateChat: (val: boolean) => void;
@@ -19,7 +17,6 @@ interface ChatCreationProps {
 }
 
 export function ChatCreation({
-  community,
   setMembersList,
   setGroupList,
   setCreateChat,
@@ -99,7 +96,6 @@ export function ChatCreation({
                 />
                 {query && (
                   <SearchBlock
-                    community={community}
                     query={query}
                     styledGroup={styledGroup}
                     setStyledGroup={setStyledGroup}

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

@@ -1,24 +1,36 @@
 import React from "react";
+import styled from "styled-components";
 
-import { CommunityData } from "../models/CommunityData";
+import { useMessengerContext } from "../contexts/messengerProvider";
 
 import { CommunityIdentity } from "./CommunityIdentity";
+import { CommunitySkeleton } from "./Skeleton/CommunitySkeleton";
 
 interface CommunityProps {
-  community: CommunityData;
   onClick: () => void;
   className?: string;
 }
 
-export function Community({ community, onClick, className }: CommunityProps) {
+export function Community({ onClick, className }: CommunityProps) {
+  const { communityData } = useMessengerContext();
+
+  if (!communityData) {
+    return (
+      <SkeletonWrapper>
+        <CommunitySkeleton />
+      </SkeletonWrapper>
+    );
+  }
+
   return (
     <>
       <button className={className} onClick={onClick}>
-        <CommunityIdentity
+        <CommunityIdentity subtitle={`${communityData.members} members`} />
-          community={community}
-          subtitle={`${community.members} members`}
-        />
       </button>
     </>
   );
 }
+
+const SkeletonWrapper = styled.div`
+  margin-bottom: 16px;
+`;

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

@@ -1,26 +1,25 @@
 import React from "react";
 import styled from "styled-components";
 
-import { CommunityData } from "../models/CommunityData";
+import { useMessengerContext } from "../contexts/messengerProvider";
 
 import { textMediumStyles } from "./Text";
 
 export interface CommunityIdentityProps {
-  community: CommunityData;
   subtitle: string;
   className?: string;
 }
 
 export const CommunityIdentity = ({
-  community,
   subtitle,
   className,
 }: CommunityIdentityProps) => {
+  const { communityData } = useMessengerContext();
   return (
     <Row className={className}>
-      <Logo src={community.icon} alt={`${name} logo`} />
+      <Logo src={communityData?.icon} alt={`${communityData?.name} logo`} />
       <Column>
-        <Name>{community.name}</Name>
+        <Name>{communityData?.name}</Name>
         <Subtitle>{subtitle}</Subtitle>
       </Column>
     </Row>

packages/react-chat/src/components/Modals/CommunityModal.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 
+import { useMessengerContext } from "../../contexts/messengerProvider";
 import { useNarrow } from "../../contexts/narrowProvider";
 import { DownloadButton } from "../Buttons/DownloadButton";
 import {
@@ -19,21 +20,23 @@ interface CommunityModalProps extends BasicModalProps, CommunityIdentityProps {}
 export const CommunityModal = ({
   isVisible,
   onClose,
-  community,
   subtitle,
 }: CommunityModalProps) => {
   const narrow = useNarrow();
-
+  const { communityData } = useMessengerContext();
   return (
     <Modal isVisible={isVisible} onClose={onClose}>
       <Section>
-        <CommunityIdentity community={community} subtitle={subtitle} />
+        <CommunityIdentity subtitle={subtitle} />
       </Section>
       <Section>
-        <Text>{community.description}</Text>
+        <Text>{communityData?.description}</Text>
       </Section>
       <Section>
-        <CopyInput value={community.id} label="Community public key" />
+        <CopyInput
+          value={communityData?.id ?? ""}
+          label="Community public key"
+        />
         <Hint>
           To access this community, paste community public key in Status desktop
           or mobile app.

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

@@ -6,7 +6,6 @@ import { Channels } from "../Channels/Channels";
 import { NarrowTopbar } from "./NarrowTopbar";
 
 interface NarrowChannelsProps {
-  community: string;
   setShowChannels: (val: boolean) => void;
   membersList: string[];
   groupList: string[][];
@@ -14,7 +13,6 @@ interface NarrowChannelsProps {
 }
 
 export function NarrowChannels({
-  community,
   setShowChannels,
   membersList,
   groupList,
@@ -22,7 +20,7 @@ export function NarrowChannels({
 }: NarrowChannelsProps) {
   return (
     <ListWrapper>
-      <NarrowTopbar list="Channels" community={community} />
+      <NarrowTopbar list="Channels" />
       <Channels
         onCommunityClick={() => setShowChannels(false)}
         membersList={membersList}

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

@@ -1,27 +1,24 @@
 import React from "react";
 import styled from "styled-components";
 
-import { CommunityData } from "../../models/CommunityData";
 import { MembersList } from "../Members/MembersList";
 
 import { NarrowTopbar } from "./NarrowTopbar";
 
 interface NarrowMembersProps {
-  community: CommunityData;
   setShowChannels: (val: boolean) => void;
   setShowMembersList: (val: boolean) => void;
   setMembersList: any;
 }
 
 export function NarrowMembers({
-  community,
   setShowChannels,
   setShowMembersList,
   setMembersList,
 }: NarrowMembersProps) {
   return (
     <ListWrapper>
-      <NarrowTopbar list="Community members" community={community.name} />
+      <NarrowTopbar list="Community members" />
       <MembersList
         setShowChannels={setShowChannels}
         setShowMembers={setShowMembersList}

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

@@ -1,16 +1,18 @@
 import React from "react";
 import styled from "styled-components";
 
+import { useMessengerContext } from "../../contexts/messengerProvider";
+
 interface NarrowTopbarProps {
   list: string;
-  community: string;
 }
 
-export function NarrowTopbar({ list, community }: NarrowTopbarProps) {
+export function NarrowTopbar({ list }: NarrowTopbarProps) {
+  const { communityData } = useMessengerContext();
   return (
     <TopbarWrapper>
       <Heading>{list}</Heading>
-      <SubHeading>{community}</SubHeading>
+      <SubHeading>{communityData?.name}</SubHeading>
     </TopbarWrapper>
   );
 }

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

@@ -1,29 +1,33 @@
 import React, { useMemo } from "react";
 import styled from "styled-components";
 
-import { CommunityData } from "../models/CommunityData";
+import { useMessengerContext } from "../contexts/messengerProvider";
 
 import { Channel } from "./Channels/Channel";
 import { ContactsList } from "./Chat/ChatCreation";
 
 interface SearchBlockProps {
-  community: CommunityData;
   query: string;
   styledGroup: string[];
   setStyledGroup: React.Dispatch<React.SetStateAction<string[]>>;
 }
 
 export const SearchBlock = ({
-  community,
   query,
   styledGroup,
   setStyledGroup,
 }: SearchBlockProps) => {
+  const { communityData } = useMessengerContext();
+
+  if (!communityData) {
+    return null;
+  }
+
   const searchList = useMemo(() => {
-    return community.membersList
+    return communityData.membersList
       .filter((member) => member.includes(query))
       .filter((member) => !styledGroup.includes(member));
-  }, [query, styledGroup, community.membersList]);
+  }, [query, styledGroup, communityData.membersList]);
 
   const addMember = (member: string) => {
     setStyledGroup((prevMembers: string[]) => {
@@ -40,7 +44,7 @@ export const SearchBlock = ({
   return (
     <SearchContacts>
       <ContactsList>
-        {community.membersList
+        {communityData.membersList
           .filter((member) => member.includes(query))
           .filter((member) => !styledGroup.includes(member))
           .map((member) => (

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

@@ -11,7 +11,7 @@ const MessengerContext = createContext<MessengerType>({
   clearNotifications: () => undefined,
   loadPrevDay: async () => undefined,
   loadingMessages: false,
-  community: undefined,
+  communityData: undefined,
   contacts: [],
   activeChannel: {
     id: "",

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

@@ -9,9 +9,11 @@ import {
 
 import { ChannelData } from "../../models/ChannelData";
 import { ChatMessage } from "../../models/ChatMessage";
+import { CommunityData } from "../../models/CommunityData";
 import { Contact } from "../../models/Contact";
 import { createCommunity } from "../../utils/createCommunity";
 import { createMessenger } from "../../utils/createMessenger";
+import { uintToImgUrl } from "../../utils/uintToImgUrl";
 
 import { useLoadPrevDay } from "./useLoadPrevDay";
 import { useMessages } from "./useMessages";
@@ -27,7 +29,7 @@ export type MessengerType = {
   clearNotifications: (id: string) => void;
   loadPrevDay: (id: string) => Promise<void>;
   loadingMessages: boolean;
-  community: Community | undefined;
+  communityData: CommunityData | undefined;
   contacts: Contact[];
   channels: ChannelData[];
   activeChannel: ChannelData;
@@ -144,6 +146,24 @@ export function useMessenger(
     if (channels.length > 0) setActiveChannel(channels[0]);
   }, [channels]);
 
+  const communityData = useMemo(() => {
+    if (community?.description) {
+      return {
+        id: community.publicKeyStr,
+        name: community.description.identity?.displayName ?? "",
+        icon: uintToImgUrl(
+          community.description?.identity?.images?.thumbnail.payload ??
+            new Uint8Array()
+        ),
+        members: 0,
+        membersList: Object.keys(community.description.proto.members),
+        description: community.description.identity?.description ?? "",
+      };
+    } else {
+      return undefined;
+    }
+  }, [community]);
+
   return {
     messenger,
     messages,
@@ -152,7 +172,7 @@ export function useMessenger(
     clearNotifications,
     loadPrevDay,
     loadingMessages,
-    community,
+    communityData,
     contacts,
     channels,
     activeChannel,