refactor: tweaks for guest mode

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";

src/routes/home/usePreload.ts

@@ -1,73 +0,0 @@
-import { useEffect } from "react";
-import dayjs from "dayjs";
-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 { useAppSelector } from "../../app/store";
-export default function usePreload() {
-  const { rehydrate, rehydrated } = useRehydrate();
-  const {
-    loginUid,
-    token,
-    expireTime = +new Date()
-  } = useAppSelector((store) => {
-    return {
-      loginUid: store.authData.user?.uid,
-      token: store.authData.token,
-      expireTime: store.authData.expireTime
-    };
-  });
-  const { setStreamingReady } = useStreaming();
-  const [
-    getFavorites,
-    {
-      isLoading: favoritesLoading,
-      isSuccess: favoritesSuccess,
-      isError: favoritesError,
-      data: favorites
-    }
-  ] = useLazyGetFavoritesQuery();
-  const [
-    getUsers,
-    { isLoading: usersLoading, isSuccess: usersSuccess, isError: usersError, data: users }
-  ] = useLazyGetUsersQuery();
-  const [
-    getServer,
-    { isLoading: serverLoading, isSuccess: serverSuccess, isError: serverError, data: server }
-  ] = useLazyGetServerQuery();
-  useEffect(() => {
-    initCache();
-    rehydrate();
-    return () => {
-      setStreamingReady(false);
-    };
-  }, []);
-
-  useEffect(() => {
-    if (rehydrated) {
-      getUsers();
-      getServer();
-      getFavorites();
-    }
-  }, [rehydrated]);
-  const tokenAlmostExpire = dayjs().isAfter(new Date(expireTime - 20 * 1000));
-  const canStreaming = !!loginUid && rehydrated && !!token && !tokenAlmostExpire;
-  console.log("ttt", loginUid, rehydrated, token);
-
-  useEffect(() => {
-    setStreamingReady(canStreaming);
-  }, [canStreaming]);
-
-  return {
-    loading: usersLoading || serverLoading || favoritesLoading || !rehydrated,
-    error: usersError && serverError && favoritesError,
-    success: usersSuccess && serverSuccess && favoritesSuccess,
-    data: {
-      users,
-      server,
-      favorites
-    }
-  };
-}