feat: guest mode

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="/"