refactor: tweaks for guest mode

src/common/component/Message/index.tsx

@@ -23,7 +23,7 @@ interface IProps {
   context?: "user" | "channel";
   read?: boolean;
   mid: number;
-  updateReadIndex: (param: any) => void;
+  updateReadIndex?: (param: any) => void;
 }
 const Message: FC<IProps> = ({
   readOnly = false,
@@ -69,7 +69,9 @@ const Message: FC<IProps> = ({
         context == "user"
           ? { users: [{ uid: +contextId, mid }] }
           : { groups: [{ gid: +contextId, mid }] };
-      updateReadIndex(data);
+      if (updateReadIndex) {
+        updateReadIndex(data);
+      }
     }
   }, [mid, read]);
 
@@ -86,7 +88,7 @@ const Message: FC<IProps> = ({
   return (
     <StyledWrapper
       key={_key}
-      onContextMenu={handleContextMenuEvent}
+      onContextMenu={readOnly ? undefined : handleContextMenuEvent}
       data-msg-mid={mid}
       ref={inviewRef}
       className={`message ${readOnly ? "readonly" : ""} ${pinInfo ? "pinned" : ""} ${

src/common/component/Server.tsx

@@ -50,8 +50,10 @@ const StyledWrapper = styled.div`
     cursor: pointer;
   }
 `;
-
-export default function Server() {
+type Props = {
+  readonly?: boolean;
+};
+export default function Server({ readonly = false }: Props) {
   const { pathname } = useLocation();
   const { server, userCount } = useAppSelector((store) => {
     return {
@@ -61,6 +63,22 @@ export default function Server() {
   });
   console.log("server info", server);
   const { name, description, logo } = server;
+  if (readonly)
+    return (
+      <StyledWrapper>
+        <div className="server">
+          <div className="logo">
+            <img alt={`${name} logo`} src={logo} />
+          </div>
+          <div className="info">
+            <h3 className="name" title={description}>
+              {name}
+            </h3>
+            <span className="desc">{userCount} members</span>
+          </div>
+        </div>
+      </StyledWrapper>
+    );
 
   return (
     <StyledWrapper>
@@ -77,6 +95,7 @@ export default function Server() {
           </div>
         </div>
       </NavLink>
+
       <Tooltip tip="More" placement="bottom">
         <Tippy interactive placement="bottom-end" trigger="click" content={<AddEntriesMenu />}>
           <img src={addIcon} alt="add icon" className="add" />

src/common/hook/usePreload.ts

@@ -0,0 +1,76 @@
+import { useEffect } from "react";
+import dayjs from "dayjs";
+import initCache, { useRehydrate } from "../../app/cache";
+import { useLazyGetFavoritesQuery } from "../../app/services/message";
+import { useLazyGetUsersQuery } from "../../app/services/user";
+import { useLazyGetServerQuery } from "../../app/services/server";
+import useStreaming from "./useStreaming";
+import { useAppSelector } from "../../app/store";
+// type Props={
+//   guest?:boolean
+// }
+export default function usePreload() {
+  const { rehydrate, rehydrated } = useRehydrate();
+  const {
+    loginUid,
+    token,
+    expireTime = +new Date()
+  } = useAppSelector((store) => {
+    return {
+      loginUid: store.authData.user?.uid,
+      token: store.authData.token,
+      expireTime: store.authData.expireTime
+    };
+  });
+  const { setStreamingReady } = useStreaming();
+  const [
+    getFavorites,
+    {
+      isLoading: favoritesLoading,
+      isSuccess: favoritesSuccess,
+      isError: favoritesError,
+      data: favorites
+    }
+  ] = useLazyGetFavoritesQuery();
+  const [
+    getUsers,
+    { isLoading: usersLoading, isSuccess: usersSuccess, isError: usersError, data: users }
+  ] = useLazyGetUsersQuery();
+  const [
+    getServer,
+    { isLoading: serverLoading, isSuccess: serverSuccess, isError: serverError, data: server }
+  ] = useLazyGetServerQuery();
+  useEffect(() => {
+    initCache();
+    rehydrate();
+    return () => {
+      setStreamingReady(false);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (rehydrated) {
+      getUsers();
+      getServer();
+      getFavorites();
+    }
+  }, [rehydrated]);
+  const tokenAlmostExpire = dayjs().isAfter(new Date(expireTime - 20 * 1000));
+  const canStreaming = !!loginUid && rehydrated && !!token && !tokenAlmostExpire;
+  console.log("ttt", loginUid, rehydrated, token);
+
+  useEffect(() => {
+    setStreamingReady(canStreaming);
+  }, [canStreaming]);
+
+  return {
+    loading: usersLoading || serverLoading || favoritesLoading || !rehydrated,
+    error: usersError && serverError && favoritesError,
+    success: usersSuccess && serverSuccess && favoritesSuccess,
+    data: {
+      users,
+      server,
+      favorites
+    }
+  };
+}