feat: guest mode

src/app/cache/useRehydrate.ts

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { useDispatch, batch } from "react-redux";
+import { useDispatch } from "react-redux";
 import { fillReactionMessage } from "../slices/message.reaction";
 import { fillServer } from "../slices/server";
 import { fillMessage } from "../slices/message";
@@ -10,11 +10,22 @@ import { fillUsers } from "../slices/users";
 import { fillFootprint } from "../slices/footprint";
 import { fillFileMessage } from "../slices/message.file";
 import { fillUI } from "../slices/ui";
+import { useAppSelector } from "../store";
 
 const useRehydrate = () => {
   const [iterated, setIterated] = useState(false);
   const dispatch = useDispatch();
+  const { isGuest } = useAppSelector((store) => {
+    return {
+      isGuest: store.authData.user?.create_by == "guest"
+    };
+  });
   const rehydrate = async () => {
+    // 如果是游客，直接忽略
+    if (isGuest) {
+      setIterated(true);
+      return;
+    }
     const rehydrateData = {
       channels: [],
       users: [],
@@ -74,20 +85,18 @@ const useRehydrate = () => {
         });
       })
     );
-    batch(() => {
-      dispatch(fillUsers(rehydrateData.users));
-      dispatch(fillServer(rehydrateData.server));
-      console.log("fill channels from indexedDB");
-      dispatch(fillChannels(rehydrateData.channels));
-      // file message
-      dispatch(fillFileMessage(rehydrateData.fileMessage.list));
-      dispatch(fillChannelMsg(rehydrateData.channelMessage));
-      dispatch(fillUserMsg(rehydrateData.userMessage));
-      dispatch(fillMessage(rehydrateData.message));
-      dispatch(fillFootprint(rehydrateData.footprint));
-      dispatch(fillUI(rehydrateData.ui));
-      dispatch(fillReactionMessage(rehydrateData.reactionMessage));
-    });
+    dispatch(fillUsers(rehydrateData.users));
+    dispatch(fillServer(rehydrateData.server));
+    console.log("fill channels from indexedDB");
+    dispatch(fillChannels(rehydrateData.channels));
+    // file message
+    dispatch(fillFileMessage(rehydrateData.fileMessage.list));
+    dispatch(fillChannelMsg(rehydrateData.channelMessage));
+    dispatch(fillUserMsg(rehydrateData.userMessage));
+    dispatch(fillMessage(rehydrateData.message));
+    dispatch(fillFootprint(rehydrateData.footprint));
+    dispatch(fillUI(rehydrateData.ui));
+    dispatch(fillReactionMessage(rehydrateData.reactionMessage));
 
     setIterated(true);
     console.log("iterate results", rehydrateData, results);

src/app/listener.middleware/index.ts

@@ -10,6 +10,7 @@ import fileMessageHandler from "./handler.file.msg";
 import reactionHandler from "./handler.reaction";
 import UIHandler from "./handler.ui";
 import footprintHandler from "./handler.footprint";
+import { RootState } from "../store";
 
 const operations = [
   "__rtkq",
@@ -41,11 +42,14 @@ listenerMiddleware.startListening({
   },
   effect: async (action, listenerApi) => {
     const { type = "", payload } = action;
-    const [prefix, operation] = type.split("/");
+    const [prefix, operation]: [keyof RootState | "__rtkq", string] = type.split("/");
     // console.log("effect opt", action);
     if (!window.CACHE && prefix !== "__rtkq") return;
-
-    const state = listenerApi.getState()[prefix];
+    const currentState = listenerApi.getState() as RootState;
+    // 如果是guest，则忽略
+    const isGuest = currentState.authData.user?.create_by === "guest";
+    if (isGuest) return;
+    const state = prefix == "__rtkq" ? null : currentState[prefix];
     switch (prefix) {
       case "__rtkq":
         {

src/app/services/auth.ts

@@ -57,6 +57,21 @@ export const authApi = createApi({
         }
       }
     }),
+    guestLogin: builder.query<AuthData, void>({
+      query: () => ({ url: "/token/login_guest" }),
+      async onQueryStarted(params, { dispatch, queryFulfilled }) {
+        try {
+          const { data } = await queryFulfilled;
+          if (data) {
+            dispatch(setAuthData(data));
+          }
+          // 从localstorage 去掉 magic token
+          localStorage.removeItem(KEY_LOCAL_MAGIC_TOKEN);
+        } catch {
+          console.log("guest login error");
+        }
+      }
+    }),
     register: builder.mutation<any, any>({
       query: (data) => ({
         url: `user/register`,
@@ -186,6 +201,8 @@ export const authApi = createApi({
 });
 
 export const {
+  useLazyGuestLoginQuery,
+  useGuestLoginQuery,
   useLazyCheckEmailQuery,
   useGetInitializedQuery,
   useSendLoginMagicLinkMutation,

src/app/services/base.query.ts

@@ -6,6 +6,7 @@ import BASE_URL, { tokenHeader } from "../config";
 import { RootState } from "../store";
 
 const whiteList = [
+  "guestLogin",
   "login",
   "register",
   "sendLoginMagicLink",

src/common/component/GuestOnly.tsx

@@ -0,0 +1,37 @@
+import { FC, ReactElement, useEffect } from "react";
+import { Navigate } from "react-router-dom";
+import { useGetInitializedQuery, useLazyGuestLoginQuery } from "../../app/services/auth";
+import { useGetLoginConfigQuery } from "../../app/services/server";
+import { useAppSelector } from "../../app/store";
+
+interface Props {
+  children: ReactElement;
+}
+
+const GuestOnly: FC<Props> = ({ children }) => {
+  const { data: loginConfig, isLoading: fetchingConfig } = useGetLoginConfigQuery();
+  const { isLoading: initChecking } = useGetInitializedQuery();
+  const [guestLogin, { isLoading: guestSigning }] = useLazyGuestLoginQuery();
+  const { token, user, initialized } = useAppSelector((store) => store.authData);
+
+  useEffect(() => {
+    // 未登录
+    if (!token) {
+      guestLogin();
+    }
+  }, [token, user]);
+
+  // 已登录的非guest用户
+  if (token && user?.create_by !== "guest") {
+    return <Navigate to={`/`} replace />;
+  }
+  if (initChecking || guestSigning || fetchingConfig) return null;
+  // console.log("wtfff", token, user);
+  // 检查有没有开启guest mode
+  if (!loginConfig?.guest) return <Navigate to={`/v/off`} replace />;
+  //  未初始化 则先走setup 流程
+  if (!initialized) return <Navigate to={`/onboarding`} replace />;
+  return token ? children : null;
+};
+
+export default GuestOnly;

src/common/component/Message/index.tsx

@@ -155,7 +155,7 @@ const Message: FC<IProps> = ({
                 edited
               })
             )}
-            {reactions && <Reaction mid={mid} reactions={reactions} />}
+            {reactions && <Reaction mid={mid} reactions={reactions} readOnly={readOnly} />}
           </div>
         </div>
       </ContextMenu>

src/common/hook/usePreload.ts

@@ -6,17 +6,24 @@ import { useLazyGetUsersQuery } from "../../app/services/user";
 import { useLazyGetServerQuery } from "../../app/services/server";
 import useStreaming from "./useStreaming";
 import { useAppSelector } from "../../app/store";
+import { useLazyGetHistoryMessagesQuery } from "../../app/services/channel";
 // type Props={
 //   guest?:boolean
 // }
+let preloadChannelMsgs = false;
 export default function usePreload() {
+  const [preloadChannelMessages] = useLazyGetHistoryMessagesQuery();
   const { rehydrate, rehydrated } = useRehydrate();
   const {
     loginUid,
     token,
-    expireTime = +new Date()
+    expireTime = +new Date(),
+    channelMessageData,
+    channelIds
   } = useAppSelector((store) => {
     return {
+      channelIds: store.channels.ids,
+      channelMessageData: store.channelMessage,
       loginUid: store.authData.user?.uid,
       token: store.authData.token,
       expireTime: store.authData.expireTime
@@ -48,6 +55,16 @@ export default function usePreload() {
     };
   }, []);
 
+  useEffect(() => {
+    if (channelIds.length > 0 && !preloadChannelMsgs) {
+      const tmps = channelIds.filter((cid) => !channelMessageData[cid]);
+      console.log("tmpss", tmps);
+      tmps.forEach((id) => {
+        preloadChannelMessages({ id, limit: 50 });
+      });
+      preloadChannelMsgs = true;
+    }
+  }, [channelIds, channelMessageData]);
   useEffect(() => {
     if (rehydrated) {
       getUsers();

src/routes/chat/Layout/LoginTip.tsx

@@ -1,36 +1,49 @@
-import React from "react";
-import { NavLink } from "react-router-dom";
+// import { useEffect } from "react";
+import { useDispatch } from "react-redux";
+import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
+import { resetAuthData } from "../../../app/slices/auth.data";
+import Button from "../../../common/component/styled/Button";
+import useLogout from "../../../common/hook/useLogout";
 const Styled = styled.div`
   display: flex;
   align-items: center;
+  justify-content: space-between;
   background: #e5e7eb;
   border-radius: var(--br);
   width: 100%;
   width: -webkit-fill-available;
-  padding: 14px 18px;
-  color: #aaa;
-  .hand {
-    font-size: 22px;
-    margin-right: 10px;
-  }
-  .link {
-    font-weight: bold;
-    color: #333;
-    padding: 0 8px;
+  padding: 16px 18px;
+  .txt {
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 20px;
+    color: #98a2b3;
+    .hand {
+      font-size: 20px;
+      margin-right: 10px;
+    }
   }
 `;
-type Props = {};
+// type Props = {};
+
+const LoginTip = () => {
+  const dispatch = useDispatch();
+  const { clearLocalData } = useLogout();
+  const navigateTo = useNavigate();
+  const handleSignIn = () => {
+    dispatch(resetAuthData());
+    clearLocalData();
+    navigateTo("/login");
+  };
 
-const LoginTip = (props: Props) => {
   return (
     <Styled>
-      <i className="hand">👋</i>
-      Please{" "}
-      <NavLink className={"link"} to={`/login`}>
-        Login/Register
-      </NavLink>{" "}
-      before you can send message
+      <span className="txt">
+        <i className="hand">👋</i>
+        Please sign in to send message
+      </span>
+      <Button onClick={handleSignIn} className="small">{`Sign In`}</Button>
     </Styled>
   );
 };

src/routes/guest/OffTip.tsx

@@ -0,0 +1,20 @@
+// import React from "react";
+import styled from "styled-components";
+const Styled = styled.div`
+  display: flex;
+  align-items: center;
+  font-size: 28px;
+  font-weight: bold;
+  color: orange;
+  padding: 50px;
+  height: calc(100vh - 24px);
+  text-transform: uppercase;
+  letter-spacing: 2px;
+`;
+// type Props = {};
+
+const OffTip = () => {
+  return <Styled>Guest Mode Off</Styled>;
+};
+
+export default OffTip;

src/routes/guest/index.tsx

@@ -1,5 +1,5 @@
 // import React from 'react';
-import { NavLink, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
 import StyledWrapper from "./styled";
 import Loading from "../../common/component/Loading";
 import Manifest from "../../common/component/Manifest";

src/routes/index.tsx

@@ -28,6 +28,8 @@ import GeustPage from "./guest";
 import ChatPage from "./chat";
 import Loading from "../common/component/Loading";
 import store, { useAppSelector } from "../app/store";
+import OffTip from "./guest/OffTip";
+import GuestOnly from "../common/component/GuestOnly";
 let toastId: string;
 const PageRoutes = () => {
   const {
@@ -92,9 +94,24 @@ const PageRoutes = () => {
           <Route path="/invite" element={<InvitePage />} />
           <Route path="/onboarding" element={<OnboardingPage />} />
           {/* guest mode */}
-          <Route path="v">
-            <Route index element={<GeustPage />} />
-            <Route path="c/:cid" element={<GeustPage />} />
+          <Route path="/v">
+            <Route
+              index
+              element={
+                <GuestOnly>
+                  <GeustPage />
+                </GuestOnly>
+              }
+            />
+            <Route
+              path="c/:cid"
+              element={
+                <GuestOnly>
+                  <GeustPage />
+                </GuestOnly>
+              }
+            />
+            <Route path="off" element={<OffTip />} />
           </Route>
           <Route
             path="/"