Add loading state and rename chat component (#205)
This commit is contained in:
parent
2519181953
commit
bcb41c6110
|
@ -1,4 +1,8 @@
|
|||
import { darkTheme, lightTheme, ReactChat } from "@waku/react-chat-sdk";
|
||||
import {
|
||||
DappConnectCommunityChat,
|
||||
darkTheme,
|
||||
lightTheme,
|
||||
} from "@waku/react-chat-sdk";
|
||||
import React, { useRef, useState } from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import styled from "styled-components";
|
||||
|
@ -73,10 +77,10 @@ function DragDiv() {
|
|||
}}
|
||||
/>
|
||||
<FloatingDiv className={showChat ? "" : "hide"}>
|
||||
<ReactChat
|
||||
<DappConnectCommunityChat
|
||||
theme={theme ? lightTheme : darkTheme}
|
||||
communityKey={process.env.COMMUNITY_KEY ?? ""}
|
||||
config={{
|
||||
communityKey: process.env.COMMUNITY_KEY ?? "",
|
||||
environment: process.env.ENV ?? "",
|
||||
dappUrl: "https://0.0.0.0:8080",
|
||||
}}
|
||||
|
|
|
@ -85,7 +85,7 @@ export function ChatBody({
|
|||
editGroup,
|
||||
setEditGroup,
|
||||
}: ChatBodyProps) {
|
||||
const { messenger, activeChannel, communityData } = useMessengerContext();
|
||||
const { activeChannel, loadingMessenger } = useMessengerContext();
|
||||
|
||||
const narrow = useNarrow();
|
||||
const className = useMemo(() => (narrow ? "narrow" : ""), [narrow]);
|
||||
|
@ -106,11 +106,11 @@ export function ChatBody({
|
|||
}
|
||||
}, [narrow]);
|
||||
|
||||
if (messenger && communityData && activeChannel) {
|
||||
if (!loadingMessenger && activeChannel) {
|
||||
return (
|
||||
<Wrapper>
|
||||
<ChatBodyWrapper className={className}>
|
||||
{editGroup && communityData ? (
|
||||
{editGroup ? (
|
||||
<ChatCreation
|
||||
setEditGroup={setEditGroup}
|
||||
activeChannel={activeChannel}
|
||||
|
|
|
@ -63,7 +63,7 @@ export function ChatTopbar({
|
|||
showMembers,
|
||||
setEditGroup,
|
||||
}: ChatTopbarProps) {
|
||||
const { messenger, activeChannel, communityData } = useMessengerContext();
|
||||
const { activeChannel, loadingMessenger } = useMessengerContext();
|
||||
|
||||
const narrow = useNarrow();
|
||||
const [showChannelMenu, setShowChannelMenu] = useState(false);
|
||||
|
@ -77,7 +77,7 @@ export function ChatTopbar({
|
|||
className={narrow && showState !== ChatBodyState.Chat ? "narrow" : ""}
|
||||
>
|
||||
<ChannelWrapper className={narrow ? "narrow" : ""}>
|
||||
{messenger && communityData ? (
|
||||
{!loadingMessenger ? (
|
||||
<>
|
||||
{narrow && (
|
||||
<CommunityWrap className={narrow ? "narrow" : ""}>
|
||||
|
@ -110,7 +110,7 @@ export function ChatTopbar({
|
|||
</TopBtn>
|
||||
{!narrow && <ActivityButton />}
|
||||
</MenuWrapper>
|
||||
{!messenger && !communityData && <Loading />}
|
||||
{loadingMessenger && <Loading />}
|
||||
{showChannelMenu && (
|
||||
<ChannelMenu
|
||||
channel={activeChannel}
|
||||
|
|
|
@ -11,13 +11,17 @@ import {
|
|||
import { Chat } from "./Chat";
|
||||
import { IdentityLoader } from "./Form/IdentityLoader";
|
||||
|
||||
export function ChatLoader() {
|
||||
type ChatLoaderProps = {
|
||||
communityKey: string;
|
||||
};
|
||||
|
||||
export function ChatLoader({ communityKey }: ChatLoaderProps) {
|
||||
const [userCreationState] = useUserCreationState();
|
||||
|
||||
if (userCreationState === UserCreationState.NotCreating)
|
||||
return (
|
||||
<IdentityProvider>
|
||||
<MessengerProvider>
|
||||
<MessengerProvider communityKey={communityKey}>
|
||||
<ChatStateProvider>
|
||||
<Chat />
|
||||
</ChatStateProvider>
|
||||
|
|
|
@ -16,13 +16,19 @@ import { Theme } from "../styles/themes";
|
|||
|
||||
import { ChatLoader } from "./ChatLoader";
|
||||
|
||||
interface ReactChatProps {
|
||||
interface DappConnectCommunityChatProps {
|
||||
theme: Theme;
|
||||
communityKey: string;
|
||||
config: ConfigType;
|
||||
fetchMetadata?: (url: string) => Promise<Metadata | undefined>;
|
||||
}
|
||||
|
||||
export function ReactChat({ theme, config, fetchMetadata }: ReactChatProps) {
|
||||
export function DappConnectCommunityChat({
|
||||
theme,
|
||||
config,
|
||||
fetchMetadata,
|
||||
communityKey,
|
||||
}: DappConnectCommunityChatProps) {
|
||||
const ref = useRef<HTMLHeadingElement>(null);
|
||||
return (
|
||||
<ConfigProvider config={config}>
|
||||
|
@ -35,7 +41,7 @@ export function ReactChat({ theme, config, fetchMetadata }: ReactChatProps) {
|
|||
<ToastProvider>
|
||||
<Wrapper ref={ref}>
|
||||
<GlobalStyle />
|
||||
<ChatLoader />
|
||||
<ChatLoader communityKey={communityKey} />
|
||||
<div id="modal-root" />
|
||||
</Wrapper>
|
||||
</ToastProvider>
|
|
@ -1,13 +1,11 @@
|
|||
import React, { createContext, useContext } from "react";
|
||||
|
||||
export type ConfigType = {
|
||||
communityKey: string;
|
||||
environment: string;
|
||||
dappUrl: string;
|
||||
};
|
||||
|
||||
const ConfigContext = createContext<ConfigType>({
|
||||
communityKey: "",
|
||||
environment: "production",
|
||||
dappUrl: "",
|
||||
});
|
||||
|
|
|
@ -14,6 +14,7 @@ const MessengerContext = createContext<MessengerType>({
|
|||
clearMentions: () => undefined,
|
||||
loadPrevDay: async () => undefined,
|
||||
loadingMessages: false,
|
||||
loadingMessenger: true,
|
||||
communityData: undefined,
|
||||
contacts: {},
|
||||
setContacts: () => undefined,
|
||||
|
@ -33,12 +34,16 @@ export function useMessengerContext() {
|
|||
}
|
||||
|
||||
interface MessengerProviderProps {
|
||||
communityKey: string;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export function MessengerProvider({ children }: MessengerProviderProps) {
|
||||
export function MessengerProvider({
|
||||
communityKey,
|
||||
children,
|
||||
}: MessengerProviderProps) {
|
||||
const identity = useIdentity();
|
||||
const nickname = useNickname();
|
||||
const messenger = useMessenger(identity, nickname);
|
||||
const messenger = useMessenger(communityKey, identity, nickname);
|
||||
return <MessengerContext.Provider value={messenger} children={children} />;
|
||||
}
|
||||
|
|
|
@ -36,6 +36,7 @@ export type MessengerType = {
|
|||
clearMentions: (id: string) => void;
|
||||
loadPrevDay: (id: string, groupChat?: boolean) => Promise<void>;
|
||||
loadingMessages: boolean;
|
||||
loadingMessenger: boolean;
|
||||
communityData: CommunityData | undefined;
|
||||
contacts: Contacts;
|
||||
setContacts: React.Dispatch<React.SetStateAction<Contacts>>;
|
||||
|
@ -101,10 +102,10 @@ function useCreateCommunity(
|
|||
}
|
||||
|
||||
export function useMessenger(
|
||||
communityKey: string,
|
||||
identity: Identity | undefined,
|
||||
newNickname: string | undefined
|
||||
) {
|
||||
const { communityKey } = useConfig();
|
||||
const [activeChannel, setActiveChannel] = useState<ChannelData>({
|
||||
id: "",
|
||||
name: "",
|
||||
|
@ -238,6 +239,10 @@ export function useMessenger(
|
|||
}
|
||||
}, [notifications, activeChannel]);
|
||||
|
||||
const loadingMessenger = useMemo(() => {
|
||||
return !communityData || !messenger || !activeChannel;
|
||||
}, [communityData, messenger, activeChannel]);
|
||||
|
||||
return {
|
||||
messenger,
|
||||
messages,
|
||||
|
@ -246,6 +251,7 @@ export function useMessenger(
|
|||
clearNotifications,
|
||||
loadPrevDay,
|
||||
loadingMessages,
|
||||
loadingMessenger,
|
||||
communityData,
|
||||
contacts,
|
||||
setContacts,
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { ReactChat } from "./components/ReactChat";
|
||||
import { DappConnectCommunityChat } from "./components/DappConnectCommunityChat";
|
||||
import { ConfigType } from "./contexts/configProvider";
|
||||
import { darkTheme, lightTheme } from "./styles/themes";
|
||||
export { ReactChat, lightTheme, darkTheme, ConfigType };
|
||||
export { DappConnectCommunityChat, lightTheme, darkTheme, ConfigType };
|
||||
|
|
Loading…
Reference in New Issue