Refactor community data (#115)
This commit is contained in:
parent
ee91965c32
commit
faffa272e1
|
@ -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
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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>
|
||||
</>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
export type CommunityData = {
|
||||
id: number;
|
||||
id: string;
|
||||
name: string;
|
||||
icon: string;
|
||||
members: number;
|
||||
|
|
Loading…
Reference in New Issue