refactor: upload Modal

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({
           </div>
         </div>
       </StyledWrapper>
+      {files.length !== 0 && (
+        <UploadModal
+          type={type}
+          files={files}
+          sendTo={to}
+          closeModal={resetFiles}
+        />
+      )}
     </>
   );
 }

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() {
               />
             </h3>
             <nav className="nav">
-              <DMList uids={sessionUids} setDropFiles={setUserDropFiles} />
-              {user_id && sessionUids.findIndex((i) => i == user_id) == -1 && (
-                <NavLink className="session" to={`/chat/dm/${user_id}`}>
-                  <Contact
-                    compact
-                    interactive={false}
-                    className="avatar"
-                    uid={user_id}
-                  />
-                  <div className="details">
-                    <div className="up">
-                      <span className="name">{tmpSessionUser.name}</span>
-                      <time></time>
-                    </div>
-
-                    <div className="down">
-                      <div className="msg"></div>
-                    </div>
-                  </div>
-                </NavLink>
-              )}
+              <DMList
+                uids={tmpUid ? [...sessionUids, tmpUid] : sessionUids}
+                setDropFiles={setUserDropFiles}
+              />
             </nav>
           </div>
           <CurrentUser />

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;