From ba9770999d9411c0f0c1ccb5c0ca0735bdb35778 Mon Sep 17 00:00:00 2001 From: Szymon Szlachtowicz <38212223+Szymx95@users.noreply.github.com> Date: Fri, 5 Nov 2021 19:42:43 +0100 Subject: [PATCH] Add communityData to useMessenger (#118) --- packages/react-chat/src/components/Chat.tsx | 53 +++---------------- .../src/components/Chat/ChatBody.tsx | 24 +++------ .../src/components/Chat/ChatCreation.tsx | 4 -- .../react-chat/src/components/Community.tsx | 26 ++++++--- .../src/components/CommunityIdentity.tsx | 9 ++-- .../src/components/Modals/CommunityModal.tsx | 13 +++-- .../components/NarrowMode/NarrowChannels.tsx | 4 +- .../components/NarrowMode/NarrowMembers.tsx | 5 +- .../components/NarrowMode/NarrowTopbar.tsx | 8 +-- .../react-chat/src/components/SearchBlock.tsx | 16 +++--- .../src/contexts/messengerProvider.tsx | 2 +- .../src/hooks/messenger/useMessenger.ts | 24 ++++++++- 12 files changed, 87 insertions(+), 101 deletions(-) diff --git a/packages/react-chat/src/components/Chat.tsx b/packages/react-chat/src/components/Chat.tsx index dea84ff8..87e3c10b 100644 --- a/packages/react-chat/src/components/Chat.tsx +++ b/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 ( {showChannels && !narrow && ( - {communityData ? ( - - ) : ( - - - - )} + setShowMembers(!showMembers)} showMembers={showMembers} - community={communityData} showCommunity={!showChannels} onCommunityClick={showModal} onEditClick={showEditModal} @@ -88,22 +59,18 @@ export function Chat() { setMembersList={setMembersList} /> )} - {createChat && communityData && ( + {createChat && ( )} - {communityData && ( - setIsModalVisible(false)} - community={communityData} - subtitle="Public Community" - /> - )} + setIsModalVisible(false)} + subtitle="Public Community" + /> 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; diff --git a/packages/react-chat/src/components/Chat/ChatBody.tsx b/packages/react-chat/src/components/Chat/ChatBody.tsx index 30b76e5c..1cb2f43c 100644 --- a/packages/react-chat/src/components/Chat/ChatBody.tsx +++ b/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 ( - {editGroup && community ? ( + {editGroup && communityData ? ( - {messenger && community ? ( + {messenger && communityData ? ( <> {(showCommunity || narrow) && ( - + )} @@ -127,7 +121,7 @@ export function ChatBody({ - {!community && } + {!messenger && !communityData && } {showChannelMenu && ( )} - {messenger && community ? ( + {messenger ? ( <> {!showChannelsList && !showMembersList && ( <> - {messenger && community ? ( + {messenger && communityData ? ( void; @@ -19,7 +17,6 @@ interface ChatCreationProps { } export function ChatCreation({ - community, setMembersList, setGroupList, setCreateChat, @@ -99,7 +96,6 @@ export function ChatCreation({ /> {query && ( void; className?: string; } -export function Community({ community, onClick, className }: CommunityProps) { +export function Community({ onClick, className }: CommunityProps) { + const { communityData } = useMessengerContext(); + + if (!communityData) { + return ( + + + + ); + } + return ( <> ); } + +const SkeletonWrapper = styled.div` + margin-bottom: 16px; +`; diff --git a/packages/react-chat/src/components/CommunityIdentity.tsx b/packages/react-chat/src/components/CommunityIdentity.tsx index 066dcdea..1baddbbd 100644 --- a/packages/react-chat/src/components/CommunityIdentity.tsx +++ b/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 ( - + - {community.name} + {communityData?.name} {subtitle} diff --git a/packages/react-chat/src/components/Modals/CommunityModal.tsx b/packages/react-chat/src/components/Modals/CommunityModal.tsx index 66ae46b2..675e4e27 100644 --- a/packages/react-chat/src/components/Modals/CommunityModal.tsx +++ b/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 (
- +
- {community.description} + {communityData?.description}
- + To access this community, paste community public key in Status desktop or mobile app. diff --git a/packages/react-chat/src/components/NarrowMode/NarrowChannels.tsx b/packages/react-chat/src/components/NarrowMode/NarrowChannels.tsx index d2155293..ca1ec421 100644 --- a/packages/react-chat/src/components/NarrowMode/NarrowChannels.tsx +++ b/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 ( - + setShowChannels(false)} membersList={membersList} diff --git a/packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx b/packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx index 23207814..324b4e1b 100644 --- a/packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx +++ b/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 ( - + {list} - {community} + {communityData?.name} ); } diff --git a/packages/react-chat/src/components/SearchBlock.tsx b/packages/react-chat/src/components/SearchBlock.tsx index 749b0f3e..5aa56856 100644 --- a/packages/react-chat/src/components/SearchBlock.tsx +++ b/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>; } 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 ( - {community.membersList + {communityData.membersList .filter((member) => member.includes(query)) .filter((member) => !styledGroup.includes(member)) .map((member) => ( diff --git a/packages/react-chat/src/contexts/messengerProvider.tsx b/packages/react-chat/src/contexts/messengerProvider.tsx index e80de05e..494e62e7 100644 --- a/packages/react-chat/src/contexts/messengerProvider.tsx +++ b/packages/react-chat/src/contexts/messengerProvider.tsx @@ -11,7 +11,7 @@ const MessengerContext = createContext({ clearNotifications: () => undefined, loadPrevDay: async () => undefined, loadingMessages: false, - community: undefined, + communityData: undefined, contacts: [], activeChannel: { id: "", diff --git a/packages/react-chat/src/hooks/messenger/useMessenger.ts b/packages/react-chat/src/hooks/messenger/useMessenger.ts index bf93d7ac..d1363c0a 100644 --- a/packages/react-chat/src/hooks/messenger/useMessenger.ts +++ b/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; 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,