refactor: guest mode

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

@@ -0,0 +1,77 @@
+// import { useState, useEffect } from "react";
+// import { NavLink } from "react-router-dom";
+import useMessageFeed from "../../../common/hook/useMessageFeed";
+import ChannelIcon from "../../../common/component/ChannelIcon";
+import Layout from "../Layout";
+import { renderMessageFragment } from "../utils";
+import { StyledChannelChat, StyledHeader } from "./styled";
+import LoadMore from "../LoadMore";
+import { useAppSelector } from "../../../app/store";
+type Props = {
+  cid?: number;
+};
+export default function GuestChannelChat({ cid = 0 }: Props) {
+  const {
+    list: msgIds,
+    appends,
+    hasMore,
+    pullUp
+  } = useMessageFeed({
+    context: "channel",
+    id: cid
+  });
+  const { data, messageData } = useAppSelector((store) => {
+    return {
+      footprint: store.footprint,
+      data: store.channels.byId[cid],
+      messageData: store.message || {}
+    };
+  });
+  if (!data) return null;
+  const { name, description, is_public } = data;
+  const feeds = [...msgIds, ...appends];
+  return (
+    <>
+      <Layout
+        readonly
+        to={cid}
+        context="channel"
+        header={
+          <StyledHeader className="head">
+            <div className="txt">
+              <ChannelIcon personal={!is_public} />
+              <span className="title">{name}</span>
+              <span className="desc">{description}</span>
+            </div>
+          </StyledHeader>
+        }
+      >
+        <StyledChannelChat id={`VOCECHAT_FEED_channel_${cid}`}>
+          {hasMore ? (
+            <LoadMore pullUp={pullUp} />
+          ) : (
+            <div className="info">
+              <h2 className="title">Welcome to #{name} !</h2>
+              <p className="desc">This is the start of the #{name} channel. </p>
+            </div>
+          )}
+          {/* <div className="feed"> */}
+          {feeds.map((mid, idx) => {
+            const curr = messageData[mid];
+            if (!curr) return null;
+            const isFirst = idx == 0;
+            const prev = isFirst ? null : messageData[feeds[idx - 1]];
+            return renderMessageFragment({
+              readonly: true,
+              selectMode: false,
+              prev,
+              curr,
+              contextId: cid,
+              context: "channel"
+            });
+          })}
+        </StyledChannelChat>
+      </Layout>
+    </>
+  );
+}

src/routes/chat/GuestChannelChatInfo/styled.tsx

@@ -0,0 +1,51 @@
+import styled from "styled-components";
+export const StyledHeader = styled.header`
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .txt {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    .title {
+      font-size: 16px;
+      line-height: 24px;
+      color: #1c1c1e;
+    }
+    .desc {
+      margin-left: 8px;
+      font-weight: normal;
+      font-size: 16px;
+      line-height: 24px;
+      color: #616161;
+    }
+  }
+`;
+export const StyledChannelChat = styled.article`
+  padding: 18px 16px;
+  width: 100%;
+  height: 100%;
+  height: -webkit-fill-available;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overflow-anchor: auto;
+  > .info {
+    padding-top: 62px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+    .title {
+      font-weight: bold;
+      font-size: 36px;
+      line-height: 44px;
+    }
+    .desc {
+      color: #78787c;
+      font-weight: 500;
+      font-size: 16px;
+      line-height: 24px;
+    }
+  }
+`;

src/routes/chat/GuestSessionList/Session.tsx

@@ -0,0 +1,63 @@
+// @ts-nocheck
+import { useState, useEffect, FC } from "react";
+import dayjs from "dayjs";
+import { renderPreviewMessage } from "../../chat/utils";
+import Avatar from "../../../common/component/Avatar";
+import IconLock from "../../../assets/icons/lock.svg";
+import { NavLink } from "react-router-dom";
+import { useAppSelector } from "../../../app/store";
+
+interface IProps {
+  id: number;
+  mid: number;
+}
+const Session: FC<IProps> = ({ id, mid }) => {
+  const [data, setData] = useState<{
+    name: string;
+    icon: string;
+    mid: number;
+    is_public: boolean;
+  }>();
+  const { messageData, userData, channelData } = useAppSelector((store) => {
+    return {
+      messageData: store.message,
+      userData: store.users.byId,
+      channelData: store.channels.byId
+    };
+  });
+
+  useEffect(() => {
+    const tmp = channelData[id];
+    if (!tmp) return;
+    // channel
+    const { name, icon = "", is_public } = tmp;
+    setData({ name, icon, mid, is_public });
+  }, [id, mid, userData, channelData]);
+  if (!data) return null;
+  const previewMsg = messageData[mid] || {};
+  const { name, icon, is_public } = data;
+
+  return (
+    <li className="session">
+      <NavLink className={`nav`} to={`/chat/channel/${id}`}>
+        <div className="icon">
+          <Avatar className="icon" type="channel" name={name} url={icon} />
+        </div>
+        <div className="details">
+          <div className="up">
+            <span className={`name ${previewMsg.created_at ? "" : "only_title"}`}>
+              {name} {!is_public && <IconLock />}
+            </span>
+            <span className="time">
+              {previewMsg.created_at ? dayjs(previewMsg.created_at).fromNow() : null}
+            </span>
+          </div>
+          <div className="down">
+            <span className="msg">{renderPreviewMessage(previewMsg)}</span>
+          </div>
+        </div>
+      </NavLink>
+    </li>
+  );
+};
+export default Session;

src/routes/chat/GuestSessionList/index.tsx

@@ -0,0 +1,52 @@
+import { FC } from "react";
+import { useState, useEffect } from "react";
+import Styled from "./styled";
+import Session from "./Session";
+import { useAppSelector } from "../../../app/store";
+export interface ChatSession {
+  key: string;
+  id: number;
+  mid?: number;
+}
+type Props = {};
+const SessionList: FC<Props> = () => {
+  const [sessions, setSessions] = useState<ChatSession[]>([]);
+  const { channelIDs, readChannels, readUsers, channelMessage, userMessage, loginUid } =
+    useAppSelector((store) => {
+      return {
+        loginUid: store.authData.user?.uid,
+        channelIDs: store.channels.ids,
+        userMessage: store.userMessage.byId,
+        channelMessage: store.channelMessage,
+        readChannels: store.footprint.readChannels,
+        readUsers: store.footprint.readUsers
+      };
+    });
+
+  useEffect(() => {
+    const cSessions = channelIDs.map((id) => {
+      const mids = channelMessage[id];
+      if (!mids || mids.length == 0) {
+        return { key: `channel_${id}`, unreads: 0, id, type: "channel" };
+      }
+      const mid = [...mids].pop();
+      return { key: `channel_${id}`, id, mid, type: "channel" };
+    });
+    const tmps = [...(cSessions as ChatSession[])].sort((a, b) => {
+      const { mid: aMid = 0 } = a;
+      const { mid: bMid = 0 } = b;
+      return bMid - aMid;
+    });
+    setSessions(tmps);
+  }, [channelIDs, channelMessage, readChannels, readUsers, loginUid, userMessage]);
+
+  return (
+    <Styled>
+      {sessions.map((s) => {
+        const { key, id, mid = 0 } = s;
+        return <Session key={key} id={id} mid={mid} />;
+      })}
+    </Styled>
+  );
+};
+export default SessionList;

src/routes/chat/GuestSessionList/styled.tsx

@@ -0,0 +1,95 @@
+import styled from "styled-components";
+const Styled = styled.ul`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px;
+  height: calc(100vh - 56px - 16px - 8px);
+  overflow: auto;
+  > .session {
+    > a {
+      display: flex;
+      gap: 8px;
+      border-radius: 8px;
+      padding: 8px;
+      width: 100%;
+      &.active,
+      &:hover {
+        background: rgba(116, 127, 141, 0.2);
+      }
+      .icon {
+        display: flex;
+        background-color: #eee;
+        border-radius: 50%;
+        img {
+          width: 40px;
+          height: 40px;
+          &.channel_default {
+            padding: 5px;
+          }
+        }
+      }
+      .details {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        .up {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          .name {
+            font-weight: 600;
+            font-size: 14px;
+            line-height: 20px;
+            color: #52525b;
+            max-width: 112px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            &.only_title {
+              max-width: 190px;
+            }
+          }
+          .time {
+            font-weight: 500;
+            font-size: 12px;
+            line-height: 18px;
+            color: #78787c;
+            white-space: nowrap;
+            overflow: hidden;
+            max-width: 80px;
+            text-overflow: ellipsis;
+          }
+        }
+        .down {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          > .msg {
+            font-weight: 400;
+            font-size: 12px;
+            line-height: 18px;
+            color: #78787c;
+            white-space: nowrap;
+            overflow: hidden;
+            width: 140px;
+            text-overflow: ellipsis;
+          }
+        }
+      }
+      &.muted {
+        .up .name,
+        .up .time,
+        .down .msg {
+          color: #d0d5dd;
+        }
+        .down .badge {
+          background: #bfbfbf;
+        }
+      }
+    }
+  }
+`;
+
+export default Styled;

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;