refactor: tweaks for guest mode

src/common/component/Message/index.tsx

@@ -23,7 +23,7 @@ interface IProps {
   context?: "user" | "channel";
   read?: boolean;
   mid: number;
-  updateReadIndex: (param: any) => void;
+  updateReadIndex?: (param: any) => void;
 }
 const Message: FC<IProps> = ({
   readOnly = false,
@@ -69,7 +69,9 @@ const Message: FC<IProps> = ({
         context == "user"
           ? { users: [{ uid: +contextId, mid }] }
           : { groups: [{ gid: +contextId, mid }] };
-      updateReadIndex(data);
+      if (updateReadIndex) {
+        updateReadIndex(data);
+      }
     }
   }, [mid, read]);
 
@@ -86,7 +88,7 @@ const Message: FC<IProps> = ({
   return (
     <StyledWrapper
       key={_key}
-      onContextMenu={handleContextMenuEvent}
+      onContextMenu={readOnly ? undefined : handleContextMenuEvent}
       data-msg-mid={mid}
       ref={inviewRef}
       className={`message ${readOnly ? "readonly" : ""} ${pinInfo ? "pinned" : ""} ${

src/common/component/Server.tsx

@@ -50,8 +50,10 @@ const StyledWrapper = styled.div`
     cursor: pointer;
   }
 `;
-
-export default function Server() {
+type Props = {
+  readonly?: boolean;
+};
+export default function Server({ readonly = false }: Props) {
   const { pathname } = useLocation();
   const { server, userCount } = useAppSelector((store) => {
     return {
@@ -61,6 +63,22 @@ export default function Server() {
   });
   console.log("server info", server);
   const { name, description, logo } = server;
+  if (readonly)
+    return (
+      <StyledWrapper>
+        <div className="server">
+          <div className="logo">
+            <img alt={`${name} logo`} src={logo} />
+          </div>
+          <div className="info">
+            <h3 className="name" title={description}>
+              {name}
+            </h3>
+            <span className="desc">{userCount} members</span>
+          </div>
+        </div>
+      </StyledWrapper>
+    );
 
   return (
     <StyledWrapper>
@@ -77,6 +95,7 @@ export default function Server() {
           </div>
         </div>
       </NavLink>
+
       <Tooltip tip="More" placement="bottom">
         <Tippy interactive placement="bottom-end" trigger="click" content={<AddEntriesMenu />}>
           <img src={addIcon} alt="add icon" className="add" />

src/common/hook/usePreload.ts

@@ -4,8 +4,11 @@ import initCache, { useRehydrate } from "../../app/cache";
 import { useLazyGetFavoritesQuery } from "../../app/services/message";
 import { useLazyGetUsersQuery } from "../../app/services/user";
 import { useLazyGetServerQuery } from "../../app/services/server";
-import useStreaming from "../../common/hook/useStreaming";
+import useStreaming from "./useStreaming";
 import { useAppSelector } from "../../app/store";
+// type Props={
+//   guest?:boolean
+// }
 export default function usePreload() {
   const { rehydrate, rehydrated } = useRehydrate();
   const {

src/routes/chat/ChannelChat/index.tsx

@@ -206,7 +206,6 @@ export default function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
               selectMode: !!selects,
               updateReadIndex: updateReadDebounced,
               read,
-              isFirst,
               prev,
               curr,
               contextId: cid,

src/routes/chat/ChannelChat/styled.tsx

@@ -89,15 +89,6 @@ export const StyledChannelChat = styled.article`
   overflow-x: hidden;
   overflow-y: auto;
   overflow-anchor: auto;
-  /* pagination start */
-  /* transform: rotate(180deg);
-  direction: rtl;
-  > div,
-  > hr {
-    direction: ltr;
-    transform: rotate(180deg);
-  } */
-  /* pagination end */
   > .info {
     padding-top: 62px;
     display: flex;
@@ -138,6 +129,4 @@ export const StyledChannelChat = styled.article`
       text-fill-color: transparent;
     }
   }
-  /* > .feed {
-  } */
 `;

src/routes/chat/Layout/LoginTip.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { NavLink } from "react-router-dom";
+import styled from "styled-components";
+const Styled = styled.div`
+  display: flex;
+  align-items: center;
+  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;
+  }
+`;
+type Props = {};
+
+const LoginTip = (props: Props) => {
+  return (
+    <Styled>
+      <i className="hand">👋</i>
+      Please{" "}
+      <NavLink className={"link"} to={`/login`}>
+        Login/Register
+      </NavLink>{" "}
+      before you can send message
+    </Styled>
+  );
+};
+
+export default LoginTip;

src/routes/chat/Layout/index.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect, FC, ReactElement, MouseEvent } from "react";
+import { useState, useRef, useEffect, FC, ReactElement } from "react";
 import { useDrop } from "react-dnd";
 import { NativeTypes } from "react-dnd-html5-backend";
 import ImagePreviewModal from "../../../common/component/ImagePreviewModal";
@@ -8,11 +8,13 @@ import Operations from "./Operations";
 import useUploadFile from "../../../common/hook/useUploadFile";
 import { ChatPrefixes } from "../../../app/config";
 import { useAppSelector } from "../../../app/store";
+import LoginTip from "./LoginTip";
 
 interface Props {
+  readonly?: boolean;
   children: ReactElement;
   header: ReactElement;
-  aside: ReactElement | null;
+  aside?: ReactElement | null;
   users?: ReactElement | null;
   dropFiles?: File[];
   context: "channel" | "user";
@@ -20,6 +22,7 @@ interface Props {
 }
 
 const Layout: FC<Props> = ({
+  readonly = false,
   children,
   header,
   aside = null,
@@ -98,27 +101,31 @@ const Layout: FC<Props> = ({
   return (
     <>
       {previewImage && <ImagePreviewModal data={previewImage} closeModal={closePreviewModal} />}
-      <Styled ref={drop}>
+      <Styled ref={drop} className={`${readonly ? "readonly" : ""}`}>
         {header}
         <main className="main" ref={messagesContainer}>
           <div className="chat">
             {children}
             <div className={`send ${selects ? "selecting" : ""}`}>
-              <Send key={to} id={to} context={context} />
+              {readonly ? <LoginTip /> : <Send key={to} id={to} context={context} />}
               {selects && <Operations context={context} id={to} />}
             </div>
           </div>
           {users && <div className="members">{users}</div>}
           {aside && <div className="aside">{aside}</div>}
         </main>
-        <div className={`drag_tip ${isActive ? "visible animate__animated animate__fadeIn" : ""}`}>
-          <div className={`box ${isActive ? "animate__animated animate__bounceIn" : ""}`}>
-            <div className="inner">
-              <h4 className="head">{`Send to ${ChatPrefixes[context]}${name}`}</h4>
-              <span className="intro">Photos accept jpg, png, max size limit to 10M.</span>
+        {!readonly && (
+          <div
+            className={`drag_tip ${isActive ? "visible animate__animated animate__fadeIn" : ""}`}
+          >
+            <div className={`box ${isActive ? "animate__animated animate__bounceIn" : ""}`}>
+              <div className="inner">
+                <h4 className="head">{`Send to ${ChatPrefixes[context]}${name}`}</h4>
+                <span className="intro">Photos accept jpg, png, max size limit to 10M.</span>
+              </div>
             </div>
           </div>
-        </div>
+        )}
       </Styled>
     </>
   );

src/routes/chat/Layout/styled.tsx

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

src/routes/chat/utils.tsx

@@ -144,15 +144,17 @@ const MessageWrapper = ({ selectMode = false, context, id, mid, children, ...res
   );
 };
 type Params = {
+  readonly?: boolean;
   selectMode: boolean;
-  read: boolean;
-  updateReadIndex: (param: any) => void;
+  read?: boolean;
+  updateReadIndex?: (param: any) => void;
   prev: object | null;
   curr: object | null;
   contextId: number;
   context: "user" | "channel";
 };
 export const renderMessageFragment = ({
+  readonly = false,
   selectMode = false,
   read = true,
   updateReadIndex,
@@ -188,7 +190,7 @@ export const renderMessageFragment = ({
         selectMode={selectMode}
       >
         <Message
-          readOnly={selectMode}
+          readOnly={selectMode || readonly}
           updateReadIndex={updateReadIndex}
           read={read}
           context={context}

src/routes/home/index.tsx

@@ -5,7 +5,7 @@ import User from "./User";
 // import Tools from "./Tools";
 import Loading from "../../common/component/Loading";
 import Menu from "./Menu";
-import usePreload from "./usePreload";
+import usePreload from "../../common/hook/usePreload";
 import Tooltip from "../../common/component/Tooltip";
 import Notification from "../../common/component/Notification";
 import Manifest from "../../common/component/Manifest";