Add fetch metadata provider (#103)

This commit is contained in:
Szymon Szlachtowicz 2021-10-29 11:08:21 +02:00 committed by GitHub
parent 08e7ea2ab0
commit b8b3d23741
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 36 additions and 32 deletions

View File

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

View File

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

View File

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

View File

@ -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({
messages,
activeChannelId,
fetchMetadata,
}: ChatMessagesProps) {
export function ChatMessages({ messages, activeChannelId }: 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}
/>

View File

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

View File

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

View File

@ -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} />
);
}

View File

@ -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} />;
}