From d07b0e9e91eb9b37eefc2bb76062d0e23ae4d69c Mon Sep 17 00:00:00 2001 From: zerosoul Date: Mon, 28 Mar 2022 20:43:32 +0800 Subject: [PATCH] refactor: upload Modal --- .../component/Send/UploadModal/index.js | 108 ------------------ src/common/component/UploadModal/FileItem.js | 34 ++++++ src/common/component/UploadModal/index.js | 86 ++++++++++++++ .../{Send => }/UploadModal/styled.js | 2 +- src/routes/chat/Layout.js | 27 ++++- src/routes/chat/index.js | 36 ++---- src/routes/chat/styled.js | 1 + 7 files changed, 157 insertions(+), 137 deletions(-) delete mode 100644 src/common/component/Send/UploadModal/index.js create mode 100644 src/common/component/UploadModal/FileItem.js create mode 100644 src/common/component/UploadModal/index.js rename src/common/component/{Send => }/UploadModal/styled.js (96%) diff --git a/src/common/component/Send/UploadModal/index.js b/src/common/component/Send/UploadModal/index.js deleted file mode 100644 index fa18d0df..00000000 --- a/src/common/component/Send/UploadModal/index.js +++ /dev/null @@ -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 ( - - - - - - } - className="animate__animated animate__fadeInDown animate__faster" - > -
    - {files.map((f, idx) => { - console.log({ f }); - return ( -
  • - thumb -
    -
    - {f.name} - {/* (click title to change name) */} -
    - {formatBytes(f.size)} -
    -
    • - ); - })} -
- - - ); -} diff --git a/src/common/component/UploadModal/FileItem.js b/src/common/component/UploadModal/FileItem.js new file mode 100644 index 00000000..43f4cd2a --- /dev/null +++ b/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( + 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 ( +
  • + {icon} +
    +
    + {name} + {/* (click title to change name) */} +
    + {formatBytes(size)} +
    +
    • + ); +} diff --git a/src/common/component/UploadModal/index.js b/src/common/component/UploadModal/index.js new file mode 100644 index 00000000..aec4550c --- /dev/null +++ b/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 ( + + + + + + } + > +
      + {files.map((f, idx) => { + console.log({ f }); + return ; + })} +
    +     +     + ); +} diff --git a/src/common/component/Send/UploadModal/styled.js b/src/common/component/UploadModal/styled.js similarity index 96% rename from src/common/component/Send/UploadModal/styled.js rename to src/common/component/UploadModal/styled.js index f3178fb4..59eb0436 100644 --- a/src/common/component/Send/UploadModal/styled.js +++ b/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; diff --git a/src/routes/chat/Layout.js b/src/routes/chat/Layout.js index ad724dc7..6f80680c 100644 --- a/src/routes/chat/Layout.js +++ b/src/routes/chat/Layout.js @@ -3,6 +3,7 @@ import { useDrop } from "react-dnd"; import { NativeTypes } from "react-dnd-html5-backend"; import styled from "styled-components"; import ImagePreviewModal from "../../common/component/ImagePreviewModal"; +import UploadModal from "../../common/component/UploadModal"; const StyledWrapper = styled.article` position: relative; @@ -75,21 +76,35 @@ export default function Layout({ children, header, contacts = null, - setDragFiles, + dropFiles = [], + type = "channel", + to = null, }) { const messagesContainer = useRef(null); + const [files, setFiles] = useState([]); const [previewImage, setPreviewImage] = useState(null); const [{ isActive }, drop] = useDrop(() => ({ accept: [NativeTypes.FILE], drop({ files }) { + console.log("drop files", files); if (files.length) { - setDragFiles([...files]); + setFiles((prevs) => [...prevs, ...files]); } }, collect: (monitor) => ({ isActive: monitor.canDrop() && monitor.isOver(), }), })); + useEffect(() => { + if (dropFiles.length) { + setFiles((prevs) => [...prevs, ...dropFiles]); + } + }, [dropFiles]); + + const resetFiles = () => { + setFiles([]); + }; + const closePreviewModal = () => { setPreviewImage(null); }; @@ -144,6 +159,14 @@ export default function Layout({ + {files.length !== 0 && ( + + )} ); } diff --git a/src/routes/chat/index.js b/src/routes/chat/index.js index 7c675cc9..4337eaa2 100644 --- a/src/routes/chat/index.js +++ b/src/routes/chat/index.js @@ -1,6 +1,6 @@ // import React from 'react'; import { useState } from "react"; -import { NavLink, useParams } from "react-router-dom"; +import { useParams } from "react-router-dom"; import { useSelector } from "react-redux"; import { MdAdd } from "react-icons/md"; @@ -8,7 +8,7 @@ import { AiOutlineCaretDown } from "react-icons/ai"; import StyledWrapper from "./styled"; import Search from "../../common/component/Search"; -import Contact from "../../common/component/Contact"; +// import Contact from "../../common/component/Contact"; import CurrentUser from "../../common/component/CurrentUser"; import ChannelChat from "./ChannelChat"; import DMChat from "./DMChat"; @@ -20,9 +20,8 @@ import DMList from "./DMList"; export default function ChatPage() { const [channelDropFiles, setChannelDropFiles] = useState([]); const [userDropFiles, setUserDropFiles] = useState([]); - const { contactsData, sessionUids } = useSelector((store) => { + const { sessionUids } = useSelector((store) => { return { - contactsData: store.contacts.byId, sessionUids: store.userMessage.ids, }; }); @@ -40,7 +39,9 @@ export default function ChatPage() { const listEle = currentTarget.parentElement.parentElement; listEle.classList.toggle("collapse"); }; - const tmpSessionUser = contactsData[user_id]; + const tmpUid = + sessionUids.findIndex((i) => i == user_id) > -1 ? null : user_id; + console.log("temp uid", tmpUid); return ( <> {channelModalVisible && ( @@ -89,27 +90,10 @@ export default function ChatPage() { /> diff --git a/src/routes/chat/styled.js b/src/routes/chat/styled.js index 3d708378..cfa5c27e 100644 --- a/src/routes/chat/styled.js +++ b/src/routes/chat/styled.js @@ -83,6 +83,7 @@ const StyledWrapper = styled.div` display: flex; justify-content: space-between; .msg { + min-height: 18px; font-weight: normal; font-size: 12px; line-height: 18px;