feat: update widget setting

src/widget/Popup/Header.tsx

@@ -1,6 +1,5 @@
 import { FC } from 'react';
 import { useWidget } from '../WidgetContext';
-import { useAppSelector } from '../../app/store';
 import IconClose from './close.svg';
 
 type Props = {
@@ -8,8 +7,7 @@ type Props = {
 };
 
 const Index: FC<Props> = ({ handleClose }) => {
-  const { color, fgColor, embed } = useWidget();
-  const { name, logo } = useAppSelector(store => store.server);
+  const { color, fgColor, embed, name, logo } = useWidget();
   return (
     <header className="relative flex justify-between items-center h-14 px-4 py-2" style={{ backgroundColor: color }}>
       <div className="relative w-8 h-8">

src/widget/Popup/InviteOnlyTip.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+// type Props = {}
+
+const InviteOnlyTip = () => {
+    return (
+        <div className='flex-1 dark:text-white flex items-center justify-center'>
+            Only Invite to SignUp
+        </div>
+    );
+};
+
+export default InviteOnlyTip;

src/widget/Popup/index.tsx

@@ -8,6 +8,7 @@ import { useAppSelector } from '../../app/store';
 import useSSE from '../useSSE';
 import { useWidget } from '../WidgetContext';
 import clsx from 'clsx';
+import InviteOnlyTip from './InviteOnlyTip';
 
 type Props = {
     hostId: number,
@@ -15,7 +16,7 @@ type Props = {
 }
 
 const Index = ({ handleClose, hostId }: Props) => {
-    const { embed } = useWidget();
+    const { embed, inviteOnly } = useWidget();
     // 建立SSE连接
     useSSE();
     const { user: loginUser, token, guest: isGuest } = useAppSelector(store => store.authData);
@@ -25,15 +26,17 @@ const Index = ({ handleClose, hostId }: Props) => {
     return (
         <aside className={clsx("flex flex-col bg-white dark:bg-gray-700 rounded-md overflow-hidden", embed ? "w-full h-full" : `w-full h-full md:max-w-lg md:h-[calc(100vh_-_20px)] m-auto md:my-2 md:shadow-lg rounded-none md:rounded-md`)}>
             <Header handleClose={handleClose} />
-            {/* message list */}
-            <main id='MESSAGE_LIST_CONTAINER' className="relative flex-1 overflow-y-auto scroll-smooth">
-                {/* placeholder */}
-                <div className="flex-center h-10"></div>
-                <Welcome needLogin={notLogin} />
-                {notLogin ? null : <MessageFeed hostId={hostId} />}
-            </main>
-            {/* message input */}
-            {notLogin ? null : <MessageInput from={loginUser?.uid || 0} to={hostId} />}
+            {inviteOnly ? <InviteOnlyTip /> : <>
+                {/* message list */}
+                <main id='MESSAGE_LIST_CONTAINER' className="relative flex-1 overflow-y-auto scroll-smooth">
+                    {/* placeholder */}
+                    <div className="flex-center h-10"></div>
+                    <Welcome needLogin={notLogin} />
+                    {notLogin ? null : <MessageFeed hostId={hostId} />}
+                </main>
+                {/* message input */}
+                {notLogin ? null : <MessageInput from={loginUser?.uid || 0} to={hostId} />}
+            </>}
             <Footer />
         </aside>
     );

src/widget/WidgetContext.tsx

@@ -1,4 +1,6 @@
 import { createContext, useContext, ReactNode } from 'react';
+import { useGetLoginConfigQuery, useGetServerQuery } from '../app/services/server';
+import { useAppSelector } from '../app/store';
 import { getContrastColor } from '../common/utils';
 
 const color = decodeURIComponent(new URLSearchParams(location.search).get("themeColor") || "#1fe1f9");
@@ -6,12 +8,17 @@ const from = decodeURIComponent(new URLSearchParams(location.search).get("from")
 const fgColor = getContrastColor(color);
 // 判断是否是iframe上下文
 const embed = window.location !== window.parent.location;
-const WidgetContext = createContext({ color, fgColor, embed, from });
+const WidgetContext = createContext({ color, fgColor, embed, from, loading: true, inviteOnly: false, name: "", logo: "" });
 
 
 function WidgetProvider({ children }: { children: ReactNode }) {
+    const { isLoading: loadingServerData, isError } = useGetServerQuery();
+    const { isLoading: loadingConfig, data: loginConfig } = useGetLoginConfigQuery();
+    const serverData = useAppSelector(store => store.server);
 
-    return <WidgetContext.Provider value={{ color, fgColor, embed, from }} >{children}</WidgetContext.Provider>;
+    const loading = loadingConfig || loadingServerData;
+    // if(loading) return 
+    return <WidgetContext.Provider value={{ loading, color, fgColor, embed, from, inviteOnly: loginConfig?.who_can_sign_up == "InvitationOnly", name: serverData?.name, logo: serverData.logo }} >{children}</WidgetContext.Provider>;
 }
 
 function useWidget() {

src/widget/index.tsx

@@ -1,5 +1,4 @@
 import { useState, useEffect } from "react";
-import { useGetServerQuery } from "../app/services/server";
 import { useWidget } from "./WidgetContext";
 import Icon from "./Icon";
 import Popup from "./Popup";
@@ -12,7 +11,7 @@ function Widget({ hostId }: Props) {
   const { embed } = useWidget();
   const { rehydrated } = useCache();
   const [visible, setVisible] = useState(!!new URLSearchParams(location.search).get("open"));
-  const { isLoading, isError } = useGetServerQuery();
+
   const toggleVisible = () => {
     // 有无iframe内嵌
     const parentWindow = window.parent;
@@ -29,7 +28,7 @@ function Widget({ hostId }: Props) {
     }
   }, [visible]);
 
-  if (isLoading || isError || !rehydrated) return null;
+  if (!rehydrated) return null;
   if (!embed) return <Popup handleClose={toggleVisible} hostId={hostId} />;
   return visible ? <Popup handleClose={toggleVisible} hostId={hostId} /> : <Icon handleClick={toggleVisible} />;
 }