feat: lots updates

src/routes/chat/ChannelChat/index.js

@@ -25,11 +25,10 @@ export default function ChannelChat({
   // const containerRef = useRef(null);
   const [dragFiles, setDragFiles] = useState([]);
   const dispatch = useDispatch();
-  const { msgs, users, pendingMsgs } = useSelector((store) => {
+  const { msgs, users } = useSelector((store) => {
     return {
       msgs: store.channelMessage[cid] || {},
       users: store.contacts,
-      pendingMsgs: store.pendingMessage.channel[cid] || {},
     };
   });
   const handleClearUnreads = () => {
@@ -97,11 +96,11 @@ export default function ChannelChat({
             {/* <button className="edit">Edit Channel</button> */}
           </div>
           <div className="chat">
-            {[...Object.entries(msgs), ...Object.entries(pendingMsgs)]
+            {Object.entries(msgs)
               .sort(([, msg1], [, msg2]) => {
                 return msg1.created_at - msg2.created_at;
               })
-              .map(([mid, msg]) => {
+              .map(([mid, msg], idx) => {
                 if (!msg) return null;
                 const {
                   likes = {},
@@ -126,7 +125,7 @@ export default function ChannelChat({
                     unread={unread}
                     gid={cid}
                     mid={mid}
-                    key={mid}
+                    key={idx}
                     time={created_at}
                     fromUid={from_uid}
                     content={content}

src/routes/chat/DMChat/index.js

@@ -11,10 +11,9 @@ export default function DMChat({ uid = "", dropFiles = [] }) {
   console.log("dm files", dropFiles);
   const [dragFiles, setDragFiles] = useState([]);
   const contacts = useSelector((store) => store.contacts);
-  const { msgs, pendingMsgs } = useSelector((store) => {
+  const { msgs } = useSelector((store) => {
     return {
       msgs: store.userMessage[uid] || {},
-      pendingMsgs: store.pendingMessage.user[uid] || {},
     };
   });
   const [currUser, setCurrUser] = useState(null);
@@ -69,11 +68,11 @@ export default function DMChat({ uid = "", dropFiles = [] }) {
     >
       <StyledDMChat>
         <div className="chat">
-          {[...Object.entries(msgs), ...Object.entries(pendingMsgs)]
+          {Object.entries(msgs)
             .sort(([, msg1], [, msg2]) => {
               return msg1.created_at - msg2.created_at;
             })
-            .map(([mid, msg]) => {
+            .map(([mid, msg], idx) => {
               if (!msg) return null;
               // console.log("user msg", msg);
               const {
@@ -99,7 +98,7 @@ export default function DMChat({ uid = "", dropFiles = [] }) {
                   unread={unread}
                   fromUid={from_uid}
                   mid={mid}
-                  key={mid}
+                  key={idx}
                   time={created_at}
                   uid={uid}
                   content={content}

src/routes/chat/Layout.js

@@ -1,7 +1,9 @@
-// import { useState } from "react";
+import { useState, useRef, useEffect } from "react";
 import { useDrop } from "react-dnd";
 import { NativeTypes } from "react-dnd-html5-backend";
 import styled from "styled-components";
+import ImagePreviewModal from "../../common/component/ImagePreviewModal";
+
 const StyledWrapper = styled.article`
   position: relative;
   width: 100%;
@@ -75,6 +77,8 @@ export default function Layout({
   contacts = null,
   setDragFiles,
 }) {
+  const messagesContainer = useRef(null);
+  const [previewImage, setPreviewImage] = useState(null);
   const [{ isActive }, drop] = useDrop(() => ({
     accept: [NativeTypes.FILE],
     drop({ files }) {
@@ -86,31 +90,59 @@ export default function Layout({
       isActive: monitor.canDrop() && monitor.isOver(),
     }),
   }));
+  const closePreviewModal = () => {
+    setPreviewImage(null);
+  };
+  useEffect(() => {
+    if (messagesContainer) {
+      const container = messagesContainer.current;
+      container.addEventListener(
+        "click",
+        (evt) => {
+          console.log(evt);
+          const { target } = evt;
+          if (target.nodeType == 1 && target.classList.contains("preview")) {
+            setPreviewImage(target.src);
+          }
+        },
+        true
+      );
+    }
+  }, []);
+
   return (
-    <StyledWrapper ref={drop}>
-      <header className="head">{header}</header>
-      <main className="main">
-        {children}
-        {contacts && <div className="members">{contacts}</div>}
-      </main>
-      <div
-        className={`drag_tip ${
-          isActive ? "visible animate__animated animate__fadeIn" : ""
-        }`}
-      >
+    <>
+      {previewImage && (
+        <ImagePreviewModal
+          image={previewImage}
+          closeModal={closePreviewModal}
+        />
+      )}
+      <StyledWrapper ref={drop}>
+        <header className="head">{header}</header>
+        <main className="main" ref={messagesContainer}>
+          {children}
+          {contacts && <div className="members">{contacts}</div>}
+        </main>
         <div
-          className={`box ${
-            isActive ? "animate__animated animate__bounceIn" : ""
+          className={`drag_tip ${
+            isActive ? "visible animate__animated animate__fadeIn" : ""
           }`}
         >
-          <div className="inner">
-            <h4 className="head">Upload to #Channel</h4>
-            <span className="intro">
-              Photos accept jpg, png, max size limit to 10M.
-            </span>
+          <div
+            className={`box ${
+              isActive ? "animate__animated animate__bounceIn" : ""
+            }`}
+          >
+            <div className="inner">
+              <h4 className="head">Upload to #Channel</h4>
+              <span className="intro">
+                Photos accept jpg, png, max size limit to 10M.
+              </span>
+            </div>
           </div>
         </div>
-      </div>
-    </StyledWrapper>
+      </StyledWrapper>
+    </>
   );
 }

src/routes/chat/MessageList.js

@@ -0,0 +1,24 @@
+// import React from "react";
+import { VariableSizeList as List } from "react-window";
+import Message from "../../common/component/Message";
+
+export default function MessageList({ messages = [] }) {
+  const Row = ({ index, style }) => (
+    <div style={style}>
+      <Message {...messages[index]} />
+    </div>
+  );
+  const getItemSize = (index) =>
+    messages[index].content_type.startsWith("image") ? 150 : 56;
+  return (
+    <List
+      height={window.innerHeight - 56}
+      width={"100%"}
+      itemCount={messages.length}
+      itemSize={getItemSize}
+      //   estimatedItemSize={56}
+    >
+      {Row}
+    </List>
+  );
+}

src/routes/home/Loading.js

@@ -1,9 +1,13 @@
-// import React from 'react'
+import { useState, useEffect } from "react";
 import styled from "styled-components";
+import Button from "../../common/component/styled/Button";
+import useLogout from "../../common/hook/useLogout";
 const StyledWrapper = styled.div`
   width: 100vw;
   height: 100vh;
   display: flex;
+  flex-direction: column;
+  gap: 15px;
   align-items: center;
   justify-content: center;
   .loading {
@@ -19,11 +23,41 @@ const StyledWrapper = styled.div`
     border: 4px solid #999;
     border-radius: 50%;
   }
+  .reload {
+    visibility: hidden;
+    &.visible {
+      visibility: visible;
+    }
+  }
 `;
 export default function Loading() {
+  const [reloadVisible, setReloadVisible] = useState(false);
+  const { clearLocalData } = useLogout();
+  const handleReload = () => {
+    clearLocalData();
+    location.reload(true);
+  };
+  useEffect(() => {
+    const inter = setTimeout(() => {
+      setReloadVisible(true);
+    }, 1500);
+
+    return () => {
+      clearTimeout(inter);
+    };
+  }, []);
+
   return (
     <StyledWrapper>
       <div className="loading">Loading...</div>
+      {reloadVisible && (
+        <Button
+          className={`reload danger ${reloadVisible ? "visible" : ""}`}
+          onClick={handleReload}
+        >
+          Reload
+        </Button>
+      )}
     </StyledWrapper>
   );
 }