refactor: guest mode

src/app/cache/useRehydrate.ts

@@ -10,22 +10,11 @@ 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: [],

src/app/listener.middleware/index.ts

@@ -46,9 +46,6 @@ listenerMiddleware.startListening({
     // console.log("effect opt", action);
     if (!window.CACHE && prefix !== "__rtkq") return;
     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/slices/auth.data.ts

@@ -12,6 +12,7 @@ import { User } from "../../types/user";
 
 interface State {
   initialized: boolean;
+  guest: boolean;
   user: User | undefined;
   token: string;
   expireTime: number;
@@ -20,6 +21,7 @@ interface State {
 const loginUser = localStorage.getItem(KEY_LOGIN_USER) || "";
 const initialState: State = {
   initialized: true,
+  guest: false,
   user: loginUser ? JSON.parse(loginUser) : undefined,
   token: localStorage.getItem(KEY_TOKEN) || "",
   expireTime: Number(localStorage.getItem(KEY_EXPIRE) || +new Date()),
@@ -28,6 +30,7 @@ const initialState: State = {
 
 const emptyState: State = {
   initialized: true,
+  guest: false,
   user: undefined,
   token: "",
   expireTime: +new Date(),
@@ -43,6 +46,7 @@ const authDataSlice = createSlice({
       const { uid } = user;
       state.initialized = initialized;
       state.user = user;
+      // state.guest = user.create_by == "guest";
       state.token = token;
       state.refreshToken = refresh_token;
       // 当前时间往后推expire时长

src/common/component/RequireAuth.tsx

@@ -1,6 +1,7 @@
-import React, { FC, ReactElement } from "react";
+import { FC, ReactElement, useEffect } from "react";
 import { Navigate } from "react-router-dom";
-import { useGetInitializedQuery } from "../../app/services/auth";
+import { useGetInitializedQuery, useLazyGuestLoginQuery } from "../../app/services/auth";
+import { useGetLoginConfigQuery } from "../../app/services/server";
 import { useAppSelector } from "../../app/store";
 
 interface Props {
@@ -9,11 +10,22 @@ interface Props {
 }
 
 const RequireAuth: FC<Props> = ({ children, redirectTo = "/login" }) => {
-  const { isLoading } = useGetInitializedQuery();
+  const { data: loginConfig, isLoading: fetchingLoginConfig } = useGetLoginConfigQuery();
+  const { isLoading: checkingInitial } = useGetInitializedQuery();
+  const [guestLogin] = useLazyGuestLoginQuery();
   const { token, initialized } = useAppSelector((store) => store.authData);
-  if (isLoading) return null;
+  useEffect(() => {
+    // 已初始化 ， 没token，并且开启了guest，则guest自动登录
+    if (initialized && !token && loginConfig?.guest) {
+      guestLogin();
+    }
+  }, [token, initialized, loginConfig]);
+  // 初始化和login配置检查
+  if (checkingInitial || fetchingLoginConfig) return null;
   //  未初始化 则先走setup 流程
   if (!initialized) return <Navigate to={`/onboarding`} replace />;
+  // 开启guest 并且没token  则等待guest登录结果
+  if (loginConfig?.guest && !token) return null;
   return token ? children : <Navigate to={redirectTo} replace />;
 };
 

src/routes/chat/GuestBlankPlaceholder.tsx

@@ -0,0 +1,55 @@
+// import React 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 { useAppSelector } from "../../app/store";
+import Button from "../../common/component/styled/Button";
+import useLogout from "../../common/hook/useLogout";
+const Styled = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  .title {
+    font-style: normal;
+    font-weight: 700;
+    font-size: 30px;
+    line-height: 38px;
+    color: #344054;
+  }
+  .details {
+    display: flex;
+    flex-direction: column;
+    .desc {
+      margin: 12px 0;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 20px;
+      color: #98a2b3;
+    }
+  }
+`;
+// type Props = {};
+
+const GuestBlankPlaceholder = () => {
+  const dispatch = useDispatch();
+  const { clearLocalData } = useLogout();
+  const navigateTo = useNavigate();
+  const serverName = useAppSelector((store) => store.server.name);
+  const handleSignIn = () => {
+    dispatch(resetAuthData());
+    clearLocalData();
+    navigateTo("/login");
+  };
+  return (
+    <Styled>
+      <h2 className="title">Welcome to {serverName} server</h2>
+      <div className="details">
+        <span className="desc">Please sign in to send a message</span>
+        <Button onClick={handleSignIn} className="small">{`Sign In`}</Button>
+      </div>
+    </Styled>
+  );
+};
+
+export default GuestBlankPlaceholder;

src/routes/chat/GuestChannelChatInfo/index.tsx

@@ -2,10 +2,10 @@
 // import { NavLink } from "react-router-dom";
 import useMessageFeed from "../../../common/hook/useMessageFeed";
 import ChannelIcon from "../../../common/component/ChannelIcon";
-import Layout from "../../chat/Layout";
-import { renderMessageFragment } from "../../chat/utils";
+import Layout from "../Layout";
+import { renderMessageFragment } from "../utils";
 import { StyledChannelChat, StyledHeader } from "./styled";
-import LoadMore from "../../chat/LoadMore";
+import LoadMore from "../LoadMore";
 import { useAppSelector } from "../../../app/store";
 type Props = {
   cid?: number;

src/routes/chat/GuestSessionList/Session.tsx

@@ -39,7 +39,7 @@ const Session: FC<IProps> = ({ id, mid }) => {
 
   return (
     <li className="session">
-      <NavLink className={`nav`} to={`/v/c/${id}`}>
+      <NavLink className={`nav`} to={`/chat/channel/${id}`}>
         <div className="icon">
           <Avatar className="icon" type="channel" name={name} url={icon} />
         </div>

src/routes/chat/GuestSessionList/index.tsx

@@ -5,10 +5,8 @@ import Session from "./Session";
 import { useAppSelector } from "../../../app/store";
 export interface ChatSession {
   key: string;
-  type: "user" | "channel";
   id: number;
   mid?: number;
-  unread?: number;
 }
 type Props = {};
 const SessionList: FC<Props> = () => {

src/routes/chat/Layout/styled.tsx

@@ -141,8 +141,5 @@ const Styled = styled.article`
       }
     }
   }
-  &.readonly .main .chat {
-    height: calc(100vh - 62px - 18px);
-  }
 `;
 export default Styled;

src/routes/chat/index.tsx

@@ -11,12 +11,16 @@ import UsersModal from "../../common/component/UsersModal";
 import ChannelModal from "../../common/component/ChannelModal";
 import SessionList from "./SessionList";
 import { useAppSelector } from "../../app/store";
+import GuestBlankPlaceholder from "./GuestBlankPlaceholder";
+import GuestChannelChatInfo from "./GuestChannelChatInfo";
+import GuestSessionList from "./GuestSessionList";
 export default function ChatPage() {
   const [channelModalVisible, setChannelModalVisible] = useState(false);
   const [usersModalVisible, setUsersModalVisible] = useState(false);
   const { channel_id = 0, user_id = 0 } = useParams();
-  const { sessionUids } = useAppSelector((store) => {
+  const { sessionUids, isGuest } = useAppSelector((store) => {
     return {
+      isGuest: store.authData.guest,
       sessionUids: store.userMessage.ids
     };
   });
@@ -43,14 +47,19 @@ export default function ChatPage() {
         <ChannelModal closeModal={toggleChannelModalVisible} personal={true} />
       )}
       {usersModalVisible && <UsersModal closeModal={toggleUsersModalVisible} />}
-      <StyledWrapper>
+      <StyledWrapper className={isGuest ? "guest" : ""}>
         <div className="left">
-          <Server />
-          <SessionList tempSession={tmpSession} />
+          <Server readonly={isGuest} />
+          {isGuest ? <GuestSessionList /> : <SessionList tempSession={tmpSession} />}
         </div>
         <div className={`right ${placeholderVisible ? "placeholder" : ""}`}>
-          {placeholderVisible && <BlankPlaceholder />}
-          {channel_id !== 0 && <ChannelChat cid={+channel_id} />}
+          {placeholderVisible && (isGuest ? <GuestBlankPlaceholder /> : <BlankPlaceholder />)}
+          {channel_id !== 0 &&
+            (isGuest ? (
+              <GuestChannelChatInfo cid={+channel_id} />
+            ) : (
+              <ChannelChat cid={+channel_id} />
+            ))}
           {user_id !== 0 && <DMChat uid={+user_id} />}
         </div>
       </StyledWrapper>

src/routes/chat/styled.tsx

@@ -3,6 +3,9 @@ const StyledWrapper = styled.div`
   display: flex;
   height: 100%;
   padding: 8px 48px 10px 0;
+  &.guest {
+    padding-right: 0;
+  }
   > .left {
     background-color: #fff;
     position: relative;

src/routes/guest/BlankPlaceholder.tsx

@@ -1,20 +0,0 @@
-// 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: #ccc;
-  padding: 50px;
-  height: calc(100vh - 24px);
-  text-transform: uppercase;
-  letter-spacing: 2px;
-`;
-// type Props = {};
-
-const BlankPlaceholder = () => {
-  return <Styled>Guest Mode</Styled>;
-};
-
-export default BlankPlaceholder;

src/routes/guest/OffTip.tsx

@@ -1,20 +0,0 @@
-// 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,65 +0,0 @@
-// import React from 'react';
-import { useParams } from "react-router-dom";
-import StyledWrapper from "./styled";
-import Loading from "../../common/component/Loading";
-import Manifest from "../../common/component/Manifest";
-import Server from "../../common/component/Server";
-import BlankPlaceholder from "./BlankPlaceholder";
-import { useAppSelector } from "../../app/store";
-import usePreload from "../../common/hook/usePreload";
-import SessionList from "./SessionList";
-import ChannelChat from "./ChannelChat";
-// const routes = ["/setting", "/setting/channel/:cid"];
-export default function GuestHomePage() {
-  const { cid = 0 } = useParams();
-  const placeholderVisible = cid == 0;
-  const {
-    ui: { ready }
-  } = useAppSelector((store) => {
-    return {
-      ui: store.ui
-    };
-  });
-  const { loading } = usePreload();
-  if (loading || !ready) {
-    return <Loading reload={true} fullscreen={true} />;
-  }
-
-  return (
-    <>
-      <Manifest />
-      <StyledWrapper>
-        <div className="left">
-          <Server readonly />
-          <SessionList />
-        </div>
-        <div className={`right ${placeholderVisible ? "placeholder" : ""}`}>
-          {placeholderVisible && <BlankPlaceholder />}
-          {cid !== 0 && <ChannelChat cid={+cid} />}
-        </div>
-      </StyledWrapper>
-    </>
-  );
-}
-
-// import Server from "../../common/component/Server";
-// import ChannelChat from "./ChannelChat";
-// import SessionList from "./SessionList";
-// export default function ChatPage() {
-//   const { channel_id = 0 } = useParams();
-//   const placeholderVisible = channel_id == 0 ;
-//   return (
-//     <>
-//       <StyledWrapper>
-//         <div className="left">
-//           <Server />
-//           <SessionList tempSession={tmpSession} />
-//         </div>
-//         <div className={`right ${placeholderVisible ? "placeholder" : ""}`}>
-//           {placeholderVisible && <BlankPlaceholder />}
-//           {channel_id !== 0 && <ChannelChat cid={+channel_id} />}
-//         </div>
-//       </StyledWrapper>
-//     </>
-//   );
-// }

src/routes/guest/styled.tsx

@@ -1,160 +0,0 @@
-import styled from "styled-components";
-const StyledWrapper = styled.div`
-  display: flex;
-  height: 100%;
-  padding: 8px;
-  background: var(---navs-bg);
-  > .left {
-    background-color: #fff;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    min-width: 268px;
-    box-shadow: inset -1px 0px 0px rgba(0, 0, 0, 0.05);
-    height: 100%;
-    overflow: auto;
-    border-radius: 16px 0 0 16px;
-    .list {
-      margin: 12px 8px;
-      .title {
-        padding: 0 8px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        margin-bottom: 4px;
-        cursor: pointer;
-        > .txt {
-          user-select: none;
-          display: flex;
-          align-items: center;
-          gap: 5px;
-          font-weight: bold;
-          font-size: 12px;
-          line-height: 20px;
-          color: #78787c;
-        }
-        .icon {
-          transition: transform 0.5s ease;
-          transform-origin: center;
-        }
-        .add_icon {
-          width: 18px;
-          height: 18px;
-        }
-      }
-      > .nav {
-        display: flex;
-        flex-direction: column;
-        gap: 4px;
-        a {
-          text-decoration: none;
-        }
-        .session {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          gap: 8px;
-          padding: 4px 8px;
-          border-radius: 4px;
-          &:hover,
-          &.active {
-            background: rgba(116, 127, 141, 0.1);
-          }
-
-          .avatar {
-            /* todo */
-          }
-          .details {
-            display: flex;
-            flex-direction: column;
-            width: 100%;
-            .up {
-              display: flex;
-              justify-content: space-between;
-              align-items: center;
-              .name {
-                font-weight: 600;
-                font-size: 14px;
-                line-height: 20px;
-                color: #52525b;
-                max-width: 112px;
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-              }
-              time {
-                white-space: nowrap;
-                font-weight: 500;
-                font-size: 12px;
-                line-height: 18px;
-                color: #78787c;
-              }
-            }
-            .down {
-              display: flex;
-              justify-content: space-between;
-              .msg {
-                min-height: 18px;
-                font-weight: normal;
-                font-size: 12px;
-                line-height: 18px;
-                color: #78787c;
-                white-space: nowrap;
-                overflow: hidden;
-                width: 140px;
-                text-overflow: ellipsis;
-              }
-              > .badge {
-                color: #fff;
-                height: 20px;
-                min-width: 20px;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                border-radius: 10px;
-                background: #1fe1f9;
-                font-weight: 900;
-                font-size: 10px;
-                line-height: 10px;
-                &.dot {
-                  min-width: unset;
-                  width: 6px;
-                  height: 6px;
-                  padding: 0;
-                }
-                &.mute {
-                  background: #bfbfbf;
-                }
-              }
-            }
-          }
-        }
-        /* drop files effect */
-        .drop_over {
-          box-shadow: inset 0 0 0 2px #52edff;
-        }
-      }
-      &.collapse {
-        .title .icon {
-          transform: rotate(-90deg);
-        }
-        > .nav > .link:not(.active) {
-          display: none;
-        }
-      }
-    }
-  }
-  > .right {
-    border-radius: 0 16px 16px 0;
-    width: 100%;
-    &.placeholder {
-      background-color: #fff;
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-`;
-
-export default StyledWrapper;

src/routes/home/index.tsx

@@ -22,6 +22,7 @@ export default function HomePage() {
   const { pathname } = useLocation();
   const {
     loginUid,
+    guest,
     ui: {
       ready,
       rememberedNavs: { chat: chatPath, user: userPath }
@@ -29,7 +30,9 @@ export default function HomePage() {
   } = useAppSelector((store) => {
     return {
       ui: store.ui,
-      loginUid: store.authData.user?.uid
+
+      loginUid: store.authData.user?.uid,
+      guest: store.authData.guest
     };
   });
   const { loading } = usePreload();
@@ -53,7 +56,8 @@ export default function HomePage() {
     <>
       <Manifest />
       <Notification />
-      <StyledWrapper>
+      <StyledWrapper className={guest ? "guest" : ""}>
+        {!guest && (
           <div className={`col left`}>
             {loginUid && <User uid={loginUid} />}
             <nav className="link_navs">
@@ -86,6 +90,7 @@ export default function HomePage() {
             {/* <div className="divider"></div> */}
             <Menu />
           </div>
+        )}
         <div className="col right">
           <Outlet />
         </div>

src/routes/home/styled.tsx

@@ -55,6 +55,9 @@ const StyledWrapper = styled.div`
       }
     }
   }
+  &.guest > .col.right {
+    margin: 0 8px;
+  }
 `;
 
 export default StyledWrapper;

src/routes/index.tsx

@@ -23,13 +23,9 @@ import RequireAuth from "../common/component/RequireAuth";
 import RequireNoAuth from "../common/component/RequireNoAuth";
 import Meta from "../common/component/Meta";
 import HomePage from "./home";
-import GeustPage from "./guest";
-// import GuestChannelChatPage from "./guest/ChannelChat";
 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 {
@@ -93,34 +89,13 @@ const PageRoutes = () => {
           />
           <Route path="/invite" element={<InvitePage />} />
           <Route path="/onboarding" element={<OnboardingPage />} />
-          {/* guest mode */}
-          <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="/"
             element={
-              // <Suspense fallback={<Loading />}>
               <RequireAuth>
                 <HomePage />
               </RequireAuth>
-              // </Suspense>
             }
           >
             <Route path="setting">
@@ -203,15 +178,7 @@ const PageRoutes = () => {
   );
 };
 
-// const local_key = "AUTH_DATA";
 export default function ReduxRoutes() {
-  // const [authData, setAuthData] = useState(
-  //   JSON.parse(localStorage.getItem(local_key))
-  // );
-  // const updateAuthData = (data) => {
-  //   localStorage.setItem(local_key, JSON.stringify(data));
-  //   setAuthData(data);
-  // };
   return (
     <Provider store={store}>
       <Meta />