refactor: guest mode

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>