From b8b3d2374145b0f7666590a9bc8e536208749d83 Mon Sep 17 00:00:00 2001 From: Szymon Szlachtowicz <38212223+Szymx95@users.noreply.github.com> Date: Fri, 29 Oct 2021 11:08:21 +0200 Subject: [PATCH] Add fetch metadata provider (#103) --- packages/react-chat/src/components/Chat.tsx | 4 ---- .../src/components/Chat/ChatBody.tsx | 4 ---- .../components/Chat/ChatMessageContent.tsx | 5 ++-- .../src/components/Chat/ChatMessages.tsx | 9 +------- .../react-chat/src/components/ChatLoader.tsx | 5 +--- .../react-chat/src/components/ReactChat.tsx | 14 +++++------ .../src/contexts/fetchMetadataProvider.tsx | 23 +++++++++++++++++++ .../src/contexts/messengerProvider.tsx | 4 ++-- 8 files changed, 36 insertions(+), 32 deletions(-) create mode 100644 packages/react-chat/src/contexts/fetchMetadataProvider.tsx diff --git a/packages/react-chat/src/components/Chat.tsx b/packages/react-chat/src/components/Chat.tsx index b7f582bd..8f1f1b74 100644 --- a/packages/react-chat/src/components/Chat.tsx +++ b/packages/react-chat/src/components/Chat.tsx @@ -5,7 +5,6 @@ import styled from "styled-components"; import { useMessengerContext } from "../contexts/messengerProvider"; import { useNarrow } from "../contexts/narrowProvider"; import { ChannelData } from "../models/ChannelData"; -import { Metadata } from "../models/Metadata"; import { uintToImgUrl } from "../utils/uintToImgUrl"; import { Channels } from "./Channels/Channels"; @@ -18,7 +17,6 @@ import { CommunitySkeleton } from "./Skeleton/CommunitySkeleton"; interface ChatProps { communityKey: string; - fetchMetadata?: (url: string) => Promise; identity: Identity; setActiveChannel: (channel: ChannelData) => void; activeChannel: ChannelData; @@ -26,7 +24,6 @@ interface ChatProps { export function Chat({ communityKey, - fetchMetadata, identity, setActiveChannel, activeChannel, @@ -109,7 +106,6 @@ export function Chat({ community={communityData} showCommunity={!showChannels} onCommunityClick={showModal} - fetchMetadata={fetchMetadata} channels={channels} membersList={membersList} setMembersList={setMembersList} diff --git a/packages/react-chat/src/components/Chat/ChatBody.tsx b/packages/react-chat/src/components/Chat/ChatBody.tsx index 4aa4b758..fa63c49a 100644 --- a/packages/react-chat/src/components/Chat/ChatBody.tsx +++ b/packages/react-chat/src/components/Chat/ChatBody.tsx @@ -6,7 +6,6 @@ import { useMessengerContext } from "../../contexts/messengerProvider"; import { useNarrow } from "../../contexts/narrowProvider"; import { ChannelData } from "../../models/ChannelData"; import { CommunityData } from "../../models/CommunityData"; -import { Metadata } from "../../models/Metadata"; import { Channel } from "../Channels/Channel"; import { EmptyChannel } from "../Channels/EmptyChannel"; import { Community } from "../Community"; @@ -30,7 +29,6 @@ interface ChatBodyProps { setActiveChannel: (val: ChannelData) => void; activeChannelId: string; onCommunityClick: () => void; - fetchMetadata?: (url: string) => Promise; channels: ChannelData[]; membersList: string[]; setMembersList: any; @@ -47,7 +45,6 @@ export function ChatBody({ setActiveChannel, activeChannelId, onCommunityClick, - fetchMetadata, channels, membersList, setMembersList, @@ -125,7 +122,6 @@ export function ChatBody({ ) : ( diff --git a/packages/react-chat/src/components/Chat/ChatMessageContent.tsx b/packages/react-chat/src/components/Chat/ChatMessageContent.tsx index d35ee1b5..5194f782 100644 --- a/packages/react-chat/src/components/Chat/ChatMessageContent.tsx +++ b/packages/react-chat/src/components/Chat/ChatMessageContent.tsx @@ -2,10 +2,10 @@ import { decode } from "html-entities"; import React, { useEffect, useMemo, useState } from "react"; import styled from "styled-components"; +import { useFetchMetadata } from "../../contexts/fetchMetadataProvider"; import { ChatMessage } from "../../models/ChatMessage"; import { Metadata } from "../../models/Metadata"; import { ImageMenu } from "../Form/ImageMenu"; - /* eslint-disable no-useless-escape */ const regEx = /(?:(?:http|https):\/\/)?(?:[-a-z0-9]+\.)+[a-z]+(?::\d+)?(?:(?:\/[-\+~%/\.\w]+)?\/?(?:[&?][-\+=&;%@\.\w]+)?(?:#[\w-]+)?)?/gi; @@ -13,17 +13,16 @@ const regEx = type ChatMessageContentProps = { message: ChatMessage; - fetchMetadata?: (url: string) => Promise; setImage: (image: string) => void; setLinkOpen: (link: string) => void; }; export function ChatMessageContent({ message, - fetchMetadata, setImage, setLinkOpen, }: ChatMessageContentProps) { + const fetchMetadata = useFetchMetadata(); const { content, image } = useMemo(() => message, [message]); const [elements, setElements] = useState<(string | React.ReactElement)[]>([ content, diff --git a/packages/react-chat/src/components/Chat/ChatMessages.tsx b/packages/react-chat/src/components/Chat/ChatMessages.tsx index bc1ab613..b1579070 100644 --- a/packages/react-chat/src/components/Chat/ChatMessages.tsx +++ b/packages/react-chat/src/components/Chat/ChatMessages.tsx @@ -3,7 +3,6 @@ import styled from "styled-components"; import { useMessengerContext } from "../../contexts/messengerProvider"; import { ChatMessage } from "../../models/ChatMessage"; -import { Metadata } from "../../models/Metadata"; import { equalDate } from "../../utils"; import { LoadingIcon } from "../Icons/LoadingIcon"; import { UserIcon } from "../Icons/UserIcon"; @@ -16,14 +15,9 @@ import { ChatMessageContent } from "./ChatMessageContent"; type ChatMessagesProps = { messages: ChatMessage[]; activeChannelId: string; - fetchMetadata?: (url: string) => Promise; }; -export function ChatMessages({ - messages, - activeChannelId, - fetchMetadata, -}: ChatMessagesProps) { +export function ChatMessages({ messages, activeChannelId }: ChatMessagesProps) { const { loadPrevDay, loadingMessages } = useMessengerContext(); const [scrollOnBot, setScrollOnBot] = useState(true); const ref = useRef(null); @@ -108,7 +102,6 @@ export function ChatMessages({ diff --git a/packages/react-chat/src/components/ChatLoader.tsx b/packages/react-chat/src/components/ChatLoader.tsx index 8b7659a2..819827a9 100644 --- a/packages/react-chat/src/components/ChatLoader.tsx +++ b/packages/react-chat/src/components/ChatLoader.tsx @@ -3,17 +3,15 @@ import { Identity } from "status-communities/dist/cjs"; import { MessengerProvider } from "../contexts/messengerProvider"; import { ChannelData } from "../models/ChannelData"; -import { Metadata } from "../models/Metadata"; import { Chat } from "./Chat"; import { IdentityLoader } from "./Form/IdentityLoader"; interface ChatLoaderProps { communityKey: string; - fetchMetadata?: (url: string) => Promise; } -export function ChatLoader({ communityKey, fetchMetadata }: ChatLoaderProps) { +export function ChatLoader({ communityKey }: ChatLoaderProps) { const [identity, setIdentity] = useState(undefined); const [activeChannel, setActiveChannel] = useState({ id: "", @@ -32,7 +30,6 @@ export function ChatLoader({ communityKey, fetchMetadata }: ChatLoaderProps) { communityKey={communityKey} activeChannel={activeChannel} setActiveChannel={setActiveChannel} - fetchMetadata={fetchMetadata} identity={identity} /> diff --git a/packages/react-chat/src/components/ReactChat.tsx b/packages/react-chat/src/components/ReactChat.tsx index 3379b328..d04d144d 100644 --- a/packages/react-chat/src/components/ReactChat.tsx +++ b/packages/react-chat/src/components/ReactChat.tsx @@ -2,6 +2,7 @@ import React, { useRef } from "react"; import { ThemeProvider } from "styled-components"; import styled from "styled-components"; +import { FetchMetadataProvider } from "../contexts/fetchMetadataProvider"; import { NarrowProvider } from "../contexts/narrowProvider"; import { Metadata } from "../models/Metadata"; import { GlobalStyle } from "../styles/GlobalStyle"; @@ -24,13 +25,12 @@ export function ReactChat({ return ( - - - - + + + + + + ); diff --git a/packages/react-chat/src/contexts/fetchMetadataProvider.tsx b/packages/react-chat/src/contexts/fetchMetadataProvider.tsx new file mode 100644 index 00000000..c96fc4f4 --- /dev/null +++ b/packages/react-chat/src/contexts/fetchMetadataProvider.tsx @@ -0,0 +1,23 @@ +import React, { createContext, useContext } from "react"; + +const FetchMetadataContext = createContext< + ((link: string) => Promise) | undefined +>(undefined); + +export function useFetchMetadata() { + return useContext(FetchMetadataContext); +} + +interface FetchMetadataProviderProps { + children: React.ReactNode; + fetchMetadata?: (link: string) => Promise; +} + +export function FetchMetadataProvider({ + children, + fetchMetadata, +}: FetchMetadataProviderProps) { + return ( + + ); +} diff --git a/packages/react-chat/src/contexts/messengerProvider.tsx b/packages/react-chat/src/contexts/messengerProvider.tsx index 9f8285b2..5b8da444 100644 --- a/packages/react-chat/src/contexts/messengerProvider.tsx +++ b/packages/react-chat/src/contexts/messengerProvider.tsx @@ -19,7 +19,7 @@ export function useMessengerContext() { return useContext(MessengerContext); } -interface NarrowProviderProps { +interface MessengerProviderProps { children: React.ReactNode; activeChannel: string; communityKey?: string; @@ -31,7 +31,7 @@ export function MessengerProvider({ activeChannel, communityKey, identity, -}: NarrowProviderProps) { +}: MessengerProviderProps) { const messenger = useMessenger(activeChannel, communityKey, identity); return ; }