chore: remove UploadModal component

src/common/component/UploadModal/FileItem.tsx

@@ -1,40 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { formatBytes, isTreatAsImage, getFileIcon } from "../../utils";
-
-export default function FileItem({ file = null }) {
-  const [icon, setIcon] = useState<React.ReactElement | null>(null);
-  useEffect(() => {
-    let localUrl = "";
-    if (file) {
-      const { type, name } = file;
-      if (isTreatAsImage(file)) {
-        //  use revokeObjectURL before component didMount
-        localUrl = URL.createObjectURL(file);
-        setIcon(<img src={localUrl} alt="thumb" className="thumb" />);
-        return;
-      }
-      console.log("file type", type, name);
-      setIcon(getFileIcon(type, name));
-    }
-    return () => {
-      if (localUrl) {
-        URL.revokeObjectURL(localUrl);
-      }
-    };
-  }, [file]);
-  console.log("current file", file);
-  if (!file) return null;
-  const { name, size } = file;
-  return (
-    <li className="item">
-      {icon}
-      <div className="right">
-        <div className="name">
-          <span className="input">{name}</span>
-          {/* <i className="tip">(click title to change name)</i> */}
-        </div>
-        <i className="size">{formatBytes(size)}</i>
-      </div>
-    </li>
-  );
-}

src/common/component/UploadModal/index.tsx

@@ -1,71 +0,0 @@
-import { useEffect } from "react";
-import FileItem from "./FileItem";
-import useUploadFile from "../../hook/useUploadFile";
-import Modal from "../Modal";
-import Button from "../styled/Button";
-import StyledWrapper from "./styled";
-import useSendMessage from "../../hook/useSendMessage";
-import { useAppSelector } from "../../../app/store";
-
-export default function UploadModal({ context = "user", sendTo = 0, files = [], closeModal }) {
-  const from_uid = useAppSelector((store) => store.authData.user?.uid);
-  const {
-    sendMessage,
-    isSuccess: sendMessageSuccess,
-    isSending
-  } = useSendMessage({
-    context,
-    from: from_uid,
-    to: sendTo
-  });
-  const { data, uploadFile, progress, isUploading, isSuccess: uploadSuccess } = useUploadFile();
-  const handleUpload = () => {
-    const file = files[0];
-    uploadFile(file);
-  };
-  useEffect(() => {
-    if (uploadSuccess) {
-      // 把已经上传的东西当做消息发出去
-      const { path, ...rest } = data;
-      sendMessage({
-        type: "file",
-        content: { path },
-        properties: rest
-      });
-    }
-  }, [uploadSuccess, data]);
-  useEffect(() => {
-    if (sendMessageSuccess) {
-      closeModal();
-    }
-  }, [sendMessageSuccess]);
-
-  if (!sendTo) return null;
-  console.log("upload file modal", files, sendTo);
-  const sending = isUploading || isSending;
-  return (
-    <Modal>
-      <StyledWrapper
-        title={"Upload a file"}
-        description="Photos accept jpg, png, max size limit to 10M."
-        buttons={
-          <>
-            <Button className="cancel" onClick={closeModal}>
-              Cancel
-            </Button>
-            <Button className="upload" disabled={sending} onClick={handleUpload}>
-              {sending ? `Uploading (${progress}%)` : `Upload`}
-            </Button>
-          </>
-        }
-      >
-        <ul className="list">
-          {files.map((f, idx) => {
-            console.log({ f });
-            return <FileItem key={idx} file={f} />;
-          })}
-        </ul>
-      </StyledWrapper>
-    </Modal>
-  );
-}

src/common/component/UploadModal/styled.tsx

@@ -1,52 +0,0 @@
-import styled from "styled-components";
-import StyledModal from "../styled/Modal";
-const StyledWrapper = styled(StyledModal)`
-  .list {
-    padding-top: 32px;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    .item {
-      padding: 16px;
-      border: 1px solid rgba(116, 127, 141, 0.2);
-      border-radius: 6px;
-      display: flex;
-      align-items: center;
-      gap: 16px;
-      min-width: 473px;
-      .thumb {
-        object-fit: cover;
-        width: 64px;
-        height: 64px;
-        border-radius: 6px;
-      }
-      .right {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 4px;
-        .name {
-          font-style: normal;
-          .input {
-            user-select: text;
-            line-height: 20px;
-            font-size: 14px;
-            font-weight: 600;
-            margin-right: 8px;
-          }
-          .tip {
-            line-height: 18px;
-            font-size: 12px;
-            color: #78787c;
-          }
-        }
-        .size {
-          font-size: 14px;
-          line-height: 20px;
-          color: #616161;
-        }
-      }
-    }
-  }
-`;
-export default StyledWrapper;