refactor: drag and drop files

src/routes/chat/ChannelChat/index.js

@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef } from "react";
+import { useState } from "react";
 
 import { useSelector } from "react-redux";
 import useChatScroll from "../../../common/hook/useChatScroll";
@@ -23,7 +23,6 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
   // const containerRef = useRef(null);
   const [membersVisible, setMembersVisible] = useState(true);
   const [addMemberModalVisible, setAddMemberModalVisible] = useState(false);
-  const [dragFiles, setDragFiles] = useState([]);
   // const dispatch = useDispatch();
   const { msgIds, userIds, data, messageData } = useSelector((store) => {
     return {
@@ -43,11 +42,6 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
   const toggleAddVisible = () => {
     setAddMemberModalVisible((prev) => !prev);
   };
-  useEffect(() => {
-    if (dropFiles.length) {
-      setDragFiles(dropFiles);
-    }
-  }, [dropFiles]);
   const { name, description, is_public, members = [] } = data;
   const memberIds = members.length == 0 ? userIds : members;
   console.log("channel message list", msgIds);
@@ -61,7 +55,9 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
         />
       )}
       <Layout
-        setDragFiles={setDragFiles}
+        to={cid}
+        type="channel"
+        dropFiles={dropFiles}
         // ref={containerRef}
         header={
           <StyledHeader>
@@ -128,7 +124,7 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
                   })}
               </div>
             </div>
-            <Send dragFiles={dragFiles} id={cid} type="channel" name={name} />
+            <Send id={cid} type="channel" name={name} />
           </div>
         </StyledChannelChat>
         {/* {unreads != 0 && (

src/routes/chat/DMChat/index.js

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+// import { useState, useEffect } from "react";
 import { useSelector } from "react-redux";
 import addIcon from "../../../assets/icons/add.person.svg?url";
 import callIcon from "../../../assets/icons/call.svg?url";
@@ -11,7 +11,6 @@ import { StyledHeader, StyledDMChat } from "./styled";
 import { renderMessageFragment } from "../utils";
 export default function DMChat({ uid = "", dropFiles = [] }) {
   console.log("dm files", dropFiles);
-  const [dragFiles, setDragFiles] = useState([]);
   // const [mids, setMids] = useState([]);
   const { msgIds, currUser, messageData } = useSelector((store) => {
     return {
@@ -21,20 +20,14 @@ export default function DMChat({ uid = "", dropFiles = [] }) {
     };
   });
   const ref = useChatScroll(msgIds);
-  // useEffect(() => {
-  //   setMids(msgIds);
-  // }, [msgIds]);
-  useEffect(() => {
-    if (dropFiles.length) {
-      setDragFiles(dropFiles);
-    }
-  }, [dropFiles]);
 
   if (!currUser) return null;
   // console.log("user msgs", msgs);
   return (
     <Layout
-      setDragFiles={setDragFiles}
+      to={uid}
+      type="user"
+      dropFiles={dropFiles}
       header={
         <StyledHeader>
           <Contact interactive={false} uid={currUser.uid} />
@@ -69,12 +62,7 @@ export default function DMChat({ uid = "", dropFiles = [] }) {
               });
             })}
         </div>
-        <Send
-          dragFiles={dragFiles}
-          type="user"
-          name={currUser?.name}
-          id={currUser?.uid}
-        />
+        <Send type="user" name={currUser?.name} id={currUser?.uid} />
       </StyledDMChat>
     </Layout>
   );

src/routes/chat/DMList/index.js

@@ -17,16 +17,22 @@ export default function DMList({ uids, setDropFiles }) {
     }
   );
   const sessions = uids.map((uid) => {
-    const mids = userMessage[uid];
+    const mids = userMessage[uid] || [];
+    if (mids.length == 0) {
+      return { lastMid: null, unreads: 0, uid };
+    }
     const lastMid = [...mids].pop();
     const readIndex = readUsers[uid];
     const unreads = getUnreadCount({ mids, readIndex, messageData, loginUid });
 
     return { lastMid, unreads, uid };
   });
-
+  console.log("temp uids", sessions);
   return sessions
-    .sort((s1, s2) => s2.lastMid - s1.lastMid)
+    .sort((s1, s2) => {
+      if (!s1.lastMid) return s2.lastMid - Infinity;
+      return s2.lastMid - s1.lastMid;
+    })
     .map(({ lastMid, uid, unreads }) => {
       return (
         <NavItem