Refactor community data (#115)

This commit is contained in:
Szymon Szlachtowicz 2021-11-05 15:50:40 +01:00 committed by GitHub
parent ee91965c32
commit faffa272e1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 19 additions and 33 deletions

View File

@ -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}
name={communityData.name}
community={communityData}
subtitle="Public Community"
description={communityData.description}
publicKey={communityKey}
/>
)}
<EditModal

View File

@ -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 {

View File

@ -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}
icon={icon}
subtitle={`${members} members`}
community={community}
subtitle={`${community.members} members`}
/>
</button>
</>

View File

@ -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;
name: string;
community: CommunityData;
subtitle: string;
className?: string;
}
export const CommunityIdentity = ({
icon,
name,
community,
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>

View File

@ -14,32 +14,26 @@ import { textSmallStyles } from "../Text";
import { BasicModalProps, Modal } from "./Modal";
import { Section, Text } from "./ModalStyle";
interface CommunityModalProps extends BasicModalProps, CommunityIdentityProps {
description: string;
publicKey: string;
}
interface CommunityModalProps extends BasicModalProps, CommunityIdentityProps {}
export const CommunityModal = ({
isVisible,
onClose,
icon,
name,
community,
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.

View File

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