Refactor community data (#115)

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

@@ -16,11 +16,10 @@ import { EditModal } from "./Modals/EditModal";
 import { CommunitySkeleton } from "./Skeleton/CommunitySkeleton";
 
 interface ChatProps {
-  communityKey: string;
   identity: Identity;
 }
 
-export function Chat({ communityKey, identity }: ChatProps) {
+export function Chat({ identity }: ChatProps) {
   const [showMembers, setShowMembers] = useState(true);
   const [showChannels, setShowChannels] = useState(true);
   const [membersList, setMembersList] = useState([]);
@@ -36,11 +35,10 @@ export function Chat({ communityKey, identity }: ChatProps) {
   const showEditModal = () => setIsEditVisible(true);
 
   const { community } = useMessengerContext();
-
   const communityData = useMemo(() => {
     if (community?.description) {
       return {
-        id: 1,
+        id: community.publicKeyStr,
         name: community.description.identity?.displayName ?? "",
         icon: uintToImgUrl(
           community.description?.identity?.images?.thumbnail.payload ??
@@ -59,7 +57,7 @@ export function Chat({ communityKey, identity }: ChatProps) {
     <ChatWrapper>
       {showChannels && !narrow && (
         <ChannelsWrapper>
-          {community && communityData ? (
+          {communityData ? (
             <StyledCommunity onClick={showModal} community={communityData} />
           ) : (
             <CommunitySkeleton />
@@ -108,11 +106,8 @@ export function Chat({ communityKey, identity }: ChatProps) {
         <CommunityModal
           isVisible={isModalVisible}
           onClose={() => setIsModalVisible(false)}
-          icon={communityData.icon}
+          community={communityData}
-          name={communityData.name}
           subtitle="Public Community"
-          description={communityData.description}
-          publicKey={communityKey}
         />
       )}
       <EditModal

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

@@ -16,7 +16,7 @@ export function ChatLoader({ communityKey }: ChatLoaderProps) {
   if (identity) {
     return (
       <MessengerProvider identity={identity} communityKey={communityKey}>
-        <Chat communityKey={communityKey} identity={identity} />
+        <Chat identity={identity} />
       </MessengerProvider>
     );
   } else {

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

@@ -11,15 +11,12 @@ interface CommunityProps {
 }
 
 export function Community({ community, onClick, className }: CommunityProps) {
-  const { name, icon, members } = community;
-
   return (
     <>
       <button className={className} onClick={onClick}>
         <CommunityIdentity
-          name={name}
+          community={community}
-          icon={icon}
+          subtitle={`${community.members} members`}
-          subtitle={`${members} members`}
         />
       </button>
     </>

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

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

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

@@ -14,32 +14,26 @@ import { textSmallStyles } from "../Text";
 import { BasicModalProps, Modal } from "./Modal";
 import { Section, Text } from "./ModalStyle";
 
-interface CommunityModalProps extends BasicModalProps, CommunityIdentityProps {
+interface CommunityModalProps extends BasicModalProps, CommunityIdentityProps {}
-  description: string;
-  publicKey: string;
-}
 
 export const CommunityModal = ({
   isVisible,
   onClose,
-  icon,
+  community,
-  name,
   subtitle,
-  description,
-  publicKey,
 }: CommunityModalProps) => {
   const narrow = useNarrow();
 
   return (
     <Modal isVisible={isVisible} onClose={onClose}>
       <Section>
-        <CommunityIdentity icon={icon} name={name} subtitle={subtitle} />
+        <CommunityIdentity community={community} subtitle={subtitle} />
       </Section>
       <Section>
-        <Text>{description}</Text>
+        <Text>{community.description}</Text>
       </Section>
       <Section>
-        <CopyInput value={publicKey} label="Community public key" />
+        <CopyInput value={community.id} label="Community public key" />
         <Hint>
           To access this community, paste community public key in Status desktop
           or mobile app.

packages/react-chat/src/models/CommunityData.ts

@@ -1,5 +1,5 @@
 export type CommunityData = {
-  id: number;
+  id: string;
   name: string;
   icon: string;
   members: number;