refactor: upload Modal

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

@@ -1,108 +0,0 @@
-import { useState, useEffect } from "react";
-import { useSelector } from "react-redux";
-// import toast from "react-hot-toast";
-// import { useNavigate } from "react-router-dom";
-import { useSendChannelMsgMutation } from "../../../../app/services/channel";
-import { useSendMsgMutation } from "../../../../app/services/contact";
-import Modal from "../../Modal";
-import { formatBytes } from "../../../utils";
-import Button from "../../styled/Button";
-
-import StyledWrapper from "./styled";
-
-export default function UploadModal({
-  type = "user",
-  sendTo = 0,
-  files = [],
-  closeModal,
-}) {
-  // const dispatch = useDispatch();
-  const from_uid = useSelector((store) => store.authData.uid);
-  const [
-    sendChannelMsg,
-    { isLoading: channelSending },
-  ] = useSendChannelMsgMutation();
-  const [sendUserMsg, { isLoading: userSending }] = useSendMsgMutation();
-  const [properties, setProperties] = useState([]);
-  useEffect(() => {
-    files.forEach((file, idx) => {
-      const { name, size, type } = file;
-      setProperties((prevs) => {
-        prevs[idx] = { name, size, type };
-        return prevs;
-      });
-      // var fileReader = new FileReader();
-      // fileReader.onloadend = (e) => {
-      //   let dataUrl = e.target.result;
-      //   let tmp = new Image();
-      //   tmp.src = dataUrl;
-      //   tmp.onload = function () {
-      //     console.log("image load", this.width, this.height);
-      //     setProperties((prevs) => {
-      //       prevs[idx].width = this.width;
-      //       prevs[idx].height = this.height;
-      //       return prevs;
-      //     });
-      //   };
-      // };
-      // fileReader.readAsDataURL(file);
-    });
-  }, [files]);
-  const handleUpload = () => {
-    const uploadFn = type == "user" ? sendUserMsg : sendChannelMsg;
-    uploadFn({
-      id: sendTo,
-      content: files[0],
-      properties: { ...properties[0], local_id: new Date().getTime() },
-      type: "image",
-      from_uid,
-    });
-    closeModal();
-  };
-  if (!sendTo) return null;
-  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={channelSending || userSending}
-              onClick={handleUpload}
-            >
-              {channelSending || userSending ? "Uploading" : `Upload`}
-            </Button>
-          </>
-        }
-        className="animate__animated animate__fadeInDown animate__faster"
-      >
-        <ul className="list">
-          {files.map((f, idx) => {
-            console.log({ f });
-            return (
-              <li key={idx} className="item">
-                <img
-                  src={URL.createObjectURL(f)}
-                  alt="thumb"
-                  className="thumb"
-                />
-                <div className="right">
-                  <div className="name">
-                    <span className="input">{f.name}</span>
-                    {/* <i className="tip">(click title to change name)</i> */}
-                  </div>
-                  <i className="size">{formatBytes(f.size)}</i>
-                </div>
-              </li>
-            );
-          })}
-        </ul>
-      </StyledWrapper>
-    </Modal>
-  );
-}

src/common/component/UploadModal/FileItem.js

@@ -0,0 +1,34 @@
+import { useState, useEffect } from "react";
+import { formatBytes, isTreatAsImage, getFileIcon } from "../../utils";
+
+export default function FileItem({ file = null }) {
+  const [icon, setIcon] = useState(null);
+  useEffect(() => {
+    if (file) {
+      const { type, name } = file;
+      if (isTreatAsImage(file)) {
+        setIcon(
+          <img src={URL.createObjectURL(file)} alt="thumb" className="thumb" />
+        );
+        return;
+      }
+      console.log("file type", type, name);
+      setIcon(getFileIcon(type, name));
+    }
+  }, [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.js

@@ -0,0 +1,86 @@
+import { useEffect } from "react";
+import { useSelector } from "react-redux";
+import FileItem from "./FileItem";
+import useSendImageMessage from "../../hook/useSendImageMessage";
+import useSendFileMessage from "../../hook/useSendFileMessage";
+import Modal from "../Modal";
+import Button from "../styled/Button";
+import { isTreatAsImage } from "../../utils";
+import StyledWrapper from "./styled";
+
+export default function UploadModal({
+  type = "user",
+  sendTo = 0,
+  files = [],
+  closeModal,
+}) {
+  const from_uid = useSelector((store) => store.authData.uid);
+  const {
+    sendImageMessage,
+    isSending: isSendingImage,
+    isSuccess: sendImageSuccess,
+  } = useSendImageMessage({
+    context: type,
+    from: from_uid,
+    to: sendTo,
+  });
+  const {
+    sendFileMessage,
+    progress,
+    isSending: isSendingFile,
+    isSuccess: sendFileSuccess,
+  } = useSendFileMessage({
+    context: type,
+    from: from_uid,
+    to: sendTo,
+  });
+  const handleUpload = () => {
+    const file = files[0];
+    // const { type } = file;
+    if (isTreatAsImage(file)) {
+      sendImageMessage(file);
+    } else {
+      sendFileMessage(file);
+    }
+  };
+  useEffect(() => {
+    if (sendFileSuccess || sendImageSuccess) {
+      closeModal();
+    }
+  }, [sendImageSuccess, sendFileSuccess]);
+
+  if (!sendTo) return null;
+  console.log("upload file modal", files, sendTo);
+  const isSending = isSendingFile || isSendingImage;
+  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={isSending}
+              onClick={handleUpload}
+            >
+              {isSending
+                ? `Uploading (${Math.floor(progress * 100)}%)`
+                : `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.js

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import StyledModal from "../../styled/Modal";
+import StyledModal from "../styled/Modal";
 const StyledWrapper = styled(StyledModal)`
   .list {
     padding-top: 32px;