Add loading state and rename chat component (#205)

packages/react-chat-example/src/index.tsx

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

packages/react-chat/src/components/Chat/ChatBody.tsx

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

packages/react-chat/src/components/Chat/ChatTopbar.tsx

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

packages/react-chat/src/components/ChatLoader.tsx

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

packages/react-chat/src/components/DappConnectCommunityChat.tsx

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

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

@@ -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: "",
 });

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

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

packages/react-chat/src/hooks/messenger/useMessenger.ts

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

packages/react-chat/src/index.ts

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