feat: lots updates

src/common/component/ImagePreviewModal.js

@@ -0,0 +1,64 @@
+import { useRef } from "react";
+import styled, { keyframes } from "styled-components";
+import { useOutsideClick } from "rooks";
+import Modal from "./Modal";
+const AniFadeIn = keyframes`
+from{
+background: transparent;
+}
+to{
+  background: rgba(1, 1, 1, 0.9);
+}
+`;
+const StyledWrapper = styled.div`
+  /* todo */
+  transition: all 0.5s ease;
+  width: 100vw;
+  height: 100vh;
+  /* background-color: rgba(1, 1, 1, 0.9); */
+  animation: ${AniFadeIn} 0.3s ease-in-out forwards;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .box {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    gap: 10px;
+    img {
+      max-width: 70vw;
+      max-height: 70vw;
+    }
+    .origin {
+      font-weight: bold;
+      font-size: 14px;
+      color: #aaa;
+      &:hover {
+        text-decoration: underline;
+        color: #fff;
+      }
+    }
+  }
+`;
+export default function ImagePreviewModal({ image = null, closeModal }) {
+  const wrapperRef = useRef();
+  useOutsideClick(wrapperRef, closeModal);
+
+  if (!image) return null;
+  return (
+    <Modal>
+      <StyledWrapper>
+        <div className="box" ref={wrapperRef}>
+          <img
+            src={image}
+            alt="preview image"
+            className="animate__animated animate__fadeIn animate__faster"
+          />
+          <a className="origin" href={image} target="_blank" rel="noreferrer">
+            Download original
+          </a>
+        </div>
+      </StyledWrapper>
+    </Modal>
+  );
+}

src/common/component/Message/index.js

@@ -1,8 +1,9 @@
-import { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import dayjs from "dayjs";
 import { useDispatch, useSelector } from "react-redux";
 import { useInViewRef } from "rooks";
 import Tippy from "@tippyjs/react";
+
 import Profile from "../Profile";
 import Avatar from "../Avatar";
 import { setChannelMsgRead } from "../../../app/slices/message.channel";
@@ -12,7 +13,7 @@ import Commands from "./Commands";
 import { emojis } from "./EmojiPicker";
 import EditMessage from "./EditMessage";
 import renderContent from "./renderContent";
-export default function Message({
+function Message({
   reply = null,
   gid = "",
   mid = "",
@@ -68,7 +69,10 @@ export default function Message({
   return removed ? (
     "removed"
   ) : (
-    <StyledWrapper ref={myRef} className={`${menuVisible ? "menu" : ""}`}>
+    <StyledWrapper
+      ref={myRef}
+      className={`${menuVisible ? "menu" : ""} ${inView ? "in_view" : ""}`}
+    >
       <Tippy
         interactive
         placement="left"
@@ -143,3 +147,6 @@ export default function Message({
     </StyledWrapper>
   );
 }
+export default React.memo(Message, (prevs, nexts) => {
+  return prevs.mid == nexts.mid;
+});

src/common/component/Message/renderContent.js

@@ -27,11 +27,16 @@ const renderContent = (type, content, edited = false) => {
         </>
       );
       break;
+    case "image/png":
     case "image/jpeg":
       ctn = (
         <img
-          className="img"
-          src={`${BASE_URL}/resource/image?id=${encodeURIComponent(content)}`}
+          className="img preview"
+          src={
+            content.startsWith("blob")
+              ? content
+              : `${BASE_URL}/resource/image?id=${encodeURIComponent(content)}`
+          }
         />
       );
       break;

src/common/component/Message/styled.js

@@ -7,6 +7,11 @@ const StyledMsg = styled.div`
   padding: 4px;
   margin: 8px 0;
   border-radius: 8px;
+  content-visibility: auto;
+  contain-intrinsic-size: auto 150px;
+  &.in_view {
+    content-visibility: visible;
+  }
   &:hover,
   &.preview {
     background: #f5f6f7;
@@ -95,6 +100,7 @@ const StyledMsg = styled.div`
       }
       .img {
         max-width: 400px;
+        cursor: pointer;
       }
       a {
         border-radius: 2px;

src/common/component/Send/UploadModal/index.js

@@ -1,12 +1,12 @@
 import { useState, useEffect } from "react";
-import { useDispatch } from "react-redux";
+import { useSelector } from "react-redux";
 // import toast from "react-hot-toast";
 // import { useNavigate } from "react-router-dom";
 // import { useSelector, useDispatch } from "react-redux";
 import { useSendChannelMsgMutation } from "../../../../app/services/channel";
 import { useSendMsgMutation } from "../../../../app/services/contact";
-import { addChannelMsg } from "../../../../app/slices/message.channel";
-import { addUserMsg } from "../../../../app/slices/message.user";
+// import { addChannelMsg } from "../../../../app/slices/message.channel";
+// import { addUserMsg } from "../../../../app/slices/message.user";
 import Modal from "../../Modal";
 import Button from "../../styled/Button";
 
@@ -18,25 +18,13 @@ export default function UploadModal({
   files = [],
   closeModal,
 }) {
-  const dispatch = useDispatch();
+  // const dispatch = useDispatch();
+  const from_uid = useSelector((store) => store.authData.user.uid);
   const [
     sendChannelMsg,
-    {
-      error: sendChannelError,
-      isLoading: channelSending,
-      isSuccess: sendChannelSuccess,
-      data: sendChannelData,
-    },
+    { isLoading: channelSending },
   ] = useSendChannelMsgMutation();
-  const [
-    sendUserMsg,
-    {
-      error: sendUserError,
-      isLoading: userSending,
-      isSuccess: sendUserSuccess,
-      data: sendUserData,
-    },
-  ] = useSendMsgMutation();
+  const [sendUserMsg, { isLoading: userSending }] = useSendMsgMutation();
   const [blobs, setBlobs] = useState([]);
   useEffect(() => {
     files.forEach((file) => {
@@ -57,22 +45,9 @@ export default function UploadModal({
   }, [files]);
   const handleUpload = () => {
     const uploadFn = type == "user" ? sendUserMsg : sendChannelMsg;
-    uploadFn({ id: sendTo, content: files[0], type: "image" });
+    uploadFn({ id: sendTo, content: files[0], type: "image", from_uid });
+    closeModal();
   };
-  useEffect(() => {
-    if (sendUserSuccess) {
-      dispatch(addUserMsg({ id: sendTo, ...sendUserData, unread: false }));
-      closeModal();
-    }
-  }, [sendUserSuccess, sendUserData]);
-
-  useEffect(() => {
-    if (sendChannelSuccess) {
-      const { gid, ...rest } = sendChannelData;
-      dispatch(addChannelMsg({ id: gid, ...rest, unread: false }));
-      closeModal();
-    }
-  }, [sendChannelSuccess, sendChannelData]);
   if (!sendTo) return null;
   return (
     <Modal>
@@ -108,9 +83,7 @@ export default function UploadModal({
                 />
                 <div className="right">
                   <div className="name">
-                    <span contentEditable className="input">
-                      {b.name}
-                    </span>
+                    <span className="input">{b.name}</span>
                     <i className="tip">(click title to change name)</i>
                   </div>
                   <i className="size">{`${Math.floor(b.size / 1000)}KB`}</i>

src/common/component/Setting/LogoutConfirmModal.js

@@ -2,20 +2,13 @@
 import { useEffect, useState } from "react";
 import styled from "styled-components";
 import { useDispatch } from "react-redux";
-import { useNavigate } from "react-router-dom";
+
 import { toggleSetting } from "../../../app/slices/ui";
-import { clearAuthData } from "../../../app/slices/auth.data";
-import { clearMark } from "../../../app/slices/visit.mark";
-import { clearChannels } from "../../../app/slices/channels";
-import { clearContacts } from "../../../app/slices/contacts";
-import { clearChannelMsg } from "../../../app/slices/message.channel";
-import { clearUserMsg } from "../../../app/slices/message.user";
-import { clearPendingMsg } from "../../../app/slices/message.pending";
 // import BASE_URL from "../../app/config";
-import { useLazyLogoutQuery } from "../../../app/services/auth";
 import StyledModal from "../styled/Modal";
 import Button from "../styled/Button";
 import Checkbox from "../styled/Checkbox";
+import useLogout from "../../hook/useLogout";
 const StyledConfirm = styled(StyledModal)`
   .clear {
     font-weight: normal;
@@ -37,10 +30,9 @@ const StyledConfirm = styled(StyledModal)`
 `;
 import Modal from "../Modal";
 export default function LogoutConfirmModal({ closeModal }) {
-  const [clearLocal, setClearLocal] = useState(false);
   const dispatch = useDispatch();
-  const navigate = useNavigate();
-  const [logout, { isLoading, isSuccess }] = useLazyLogoutQuery();
+  const [clearLocal, setClearLocal] = useState(false);
+  const { logout, exited, exiting, clearLocalData } = useLogout();
   const handleLogout = () => {
     logout();
   };
@@ -48,22 +40,15 @@ export default function LogoutConfirmModal({ closeModal }) {
     setClearLocal(evt.target.checked);
   };
   useEffect(() => {
-    if (isSuccess) {
+    if (exited) {
       if (clearLocal) {
         console.log("clear all store");
-        dispatch(clearMark());
-        dispatch(clearChannelMsg());
-        dispatch(clearUserMsg());
-        dispatch(clearChannels());
-        dispatch(clearContacts());
-        dispatch(clearPendingMsg());
+        clearLocalData();
       }
-      dispatch(clearAuthData());
       // closeModal();
       dispatch(toggleSetting());
-      navigate("/login");
     }
-  }, [isSuccess, clearLocal]);
+  }, [exited, clearLocal]);
   return (
     <Modal id="modal-modal">
       <StyledConfirm
@@ -74,7 +59,7 @@ export default function LogoutConfirmModal({ closeModal }) {
             {" "}
             <Button onClick={closeModal}>Cancel</Button>
             <Button onClick={handleLogout} className="danger">
-              {isLoading ? "Logging out" : `Log Out`}
+              {exiting ? "Logging out" : `Log Out`}
             </Button>
           </>
         }

src/common/component/Setting/config/Firebase.js

@@ -2,6 +2,7 @@
 import StyledContainer from "./StyledContainer";
 // import { useSelector } from "react-redux";
 import Input from "../../styled/Input";
+import Textarea from "../../styled/Textarea";
 import Toggle from "../../styled/Toggle";
 import Label from "../../styled/Label";
 import SaveTip from "../../SaveTip";
@@ -62,7 +63,8 @@ export default function ConfigFirebase() {
         </div>
         <div className="input">
           <Label htmlFor="desc">Private Key</Label>
-          <Input
+          <Textarea
+            rows={15}
             disabled={!enabled}
             data-type="private_key"
             onChange={handleChange}