Add fetch metadata provider (#103)

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<Metadata | undefined>;
   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}

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<Metadata | undefined>;
   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({
                   <ChatMessages
                     messages={messages}
                     activeChannelId={activeChannelId}
-                    fetchMetadata={fetchMetadata}
                   />
                 ) : (
                   <LoadingSkeleton />

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<Metadata | undefined>;
   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,

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<Metadata | undefined>;
 };
 
-export function ChatMessages({
+export function ChatMessages({ messages, activeChannelId }: ChatMessagesProps) {
-  messages,
-  activeChannelId,
-  fetchMetadata,
-}: ChatMessagesProps) {
   const { loadPrevDay, loadingMessages } = useMessengerContext();
   const [scrollOnBot, setScrollOnBot] = useState(true);
   const ref = useRef<HTMLHeadingElement>(null);
@@ -108,7 +102,6 @@ export function ChatMessages({
                 <MessageText>
                   <ChatMessageContent
                     message={message}
-                    fetchMetadata={fetchMetadata}
                     setImage={setImage}
                     setLinkOpen={setLink}
                   />

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<Metadata | undefined>;
 }
 
-export function ChatLoader({ communityKey, fetchMetadata }: ChatLoaderProps) {
+export function ChatLoader({ communityKey }: ChatLoaderProps) {
   const [identity, setIdentity] = useState<Identity | undefined>(undefined);
   const [activeChannel, setActiveChannel] = useState<ChannelData>({
     id: "",
@@ -32,7 +30,6 @@ export function ChatLoader({ communityKey, fetchMetadata }: ChatLoaderProps) {
           communityKey={communityKey}
           activeChannel={activeChannel}
           setActiveChannel={setActiveChannel}
-          fetchMetadata={fetchMetadata}
           identity={identity}
         />
       </MessengerProvider>

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 (
     <ThemeProvider theme={theme}>
       <NarrowProvider myRef={ref}>
-        <Wrapper ref={ref}>
+        <FetchMetadataProvider fetchMetadata={fetchMetadata}>
-          <GlobalStyle />
+          <Wrapper ref={ref}>
-          <ChatLoader
+            <GlobalStyle />
-            communityKey={communityKey}
+            <ChatLoader communityKey={communityKey} />
-            fetchMetadata={fetchMetadata}
+          </Wrapper>
-          />
+        </FetchMetadataProvider>
-        </Wrapper>
       </NarrowProvider>
     </ThemeProvider>
   );

packages/react-chat/src/contexts/fetchMetadataProvider.tsx

@@ -0,0 +1,23 @@
+import React, { createContext, useContext } from "react";
+
+const FetchMetadataContext = createContext<
+  ((link: string) => Promise<any>) | undefined
+>(undefined);
+
+export function useFetchMetadata() {
+  return useContext(FetchMetadataContext);
+}
+
+interface FetchMetadataProviderProps {
+  children: React.ReactNode;
+  fetchMetadata?: (link: string) => Promise<any>;
+}
+
+export function FetchMetadataProvider({
+  children,
+  fetchMetadata,
+}: FetchMetadataProviderProps) {
+  return (
+    <FetchMetadataContext.Provider value={fetchMetadata} children={children} />
+  );
+}

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 <MessengerContext.Provider value={messenger} children={children} />;
 }