feat: lots updates

src/routes/chat/ChannelChat/index.js

@@ -6,10 +6,7 @@ import dayjs from "dayjs";
 import Message from "../../../common/component/Message";
 import ChannelIcon from "../../../common/component/ChannelIcon";
 import Send from "../../../common/component/Send";
-import {
-  clearChannelMsgUnread,
-  setLastAccessTime,
-} from "../../../app/slices/message.channel";
+import { clearChannelMsgUnread } from "../../../app/slices/message.channel";
 import Contact from "../../../common/component/Contact";
 import Layout from "../Layout";
 import {
@@ -28,8 +25,12 @@ export default function ChannelChat({
   // const containerRef = useRef(null);
   const [dragFiles, setDragFiles] = useState([]);
   const dispatch = useDispatch();
-  const { msgs, users } = useSelector((store) => {
-    return { msgs: store.channelMsg[cid] || {}, users: store.contacts };
+  const { msgs, users, pendingMsgs } = useSelector((store) => {
+    return {
+      msgs: store.channelMsg[cid] || {},
+      users: store.contacts,
+      pendingMsgs: store.pendingMsg.channel[cid] || {},
+    };
   });
   const handleClearUnreads = () => {
     dispatch(clearChannelMsgUnread(cid));
@@ -39,12 +40,6 @@ export default function ChannelChat({
       setDragFiles(dropFiles);
     }
   }, [dropFiles]);
-  useEffect(() => {
-    console.log({ cid });
-    return () => {
-      dispatch(setLastAccessTime(cid));
-    };
-  }, [cid]);
   const { name, description, is_public, members = [] } = data;
   const filteredUsers =
     members.length == 0
@@ -88,8 +83,8 @@ export default function ChannelChat({
       }
       contacts={
         <StyledContacts>
-          {filteredUsers.map(({ name, status, uid }) => {
-            return <Contact key={name} uid={uid} status={status} popover />;
+          {filteredUsers.map(({ name, uid }) => {
+            return <Contact key={name} uid={uid} popover />;
           })}
         </StyledContacts>
       }
@@ -102,28 +97,34 @@ export default function ChannelChat({
             {/* <button className="edit">Edit Channel</button> */}
           </div>
           <div className="chat">
-            {Object.entries(msgs).map(([mid, msg]) => {
-              if (!msg) return null;
-              const {
-                from_uid,
-                content,
-                content_type,
-                created_at,
-                unread,
-              } = msg;
-              return (
-                <Message
-                  content_type={content_type}
-                  unread={unread}
-                  gid={cid}
-                  mid={mid}
-                  key={mid}
-                  time={created_at}
-                  fromUid={from_uid}
-                  content={content}
-                />
-              );
-            })}
+            {[...Object.entries(msgs), ...Object.entries(pendingMsgs)]
+              .sort(([, msg1], [, msg2]) => {
+                return msg1.created_at - msg2.created_at;
+              })
+              .map(([mid, msg]) => {
+                if (!msg) return null;
+                const {
+                  pending = false,
+                  from_uid,
+                  content,
+                  content_type,
+                  created_at,
+                  unread,
+                } = msg;
+                return (
+                  <Message
+                    pending={pending}
+                    content_type={content_type}
+                    unread={unread}
+                    gid={cid}
+                    mid={mid}
+                    key={mid}
+                    time={created_at}
+                    fromUid={from_uid}
+                    content={content}
+                  />
+                );
+              })}
           </div>
         </div>
 

src/routes/chat/ChannelChat/styled.js

@@ -81,6 +81,7 @@ export const StyledChannelChat = styled.article`
     display: flex;
     flex-direction: column;
     padding: 0 16px;
+    padding-bottom: 25px;
     height: calc(100vh - 56px - 80px);
     overflow-y: scroll;
     overflow-x: visible;

src/routes/chat/ChannelList.js

@@ -2,9 +2,20 @@
 import { NavLink, useNavigate } from "react-router-dom";
 import { useDrop } from "react-dnd";
 import { NativeTypes } from "react-dnd-html5-backend";
+import { useDispatch } from "react-redux";
+import useContextMenu from "../../common/hook/useContextMenu";
+import ContextMenu from "../../common/component/ContextMenu";
+import { toggleChannelSetting } from "../../app/slices/ui";
 import ChannelIcon from "../../common/component/ChannelIcon";
-const NavItem = ({ data, setFiles }) => {
+const NavItem = ({ data, setFiles, contextMenuEventHandler }) => {
+  const dispatch = useDispatch();
   const navigate = useNavigate();
+
+  const handleChannelSetting = (evt) => {
+    evt.preventDefault();
+    evt.stopPropagation();
+    dispatch(toggleChannelSetting(data.id));
+  };
   const [{ isActive }, drop] = useDrop(() => ({
     accept: [NativeTypes.FILE],
     drop({ dataTransfer }) {
@@ -25,6 +36,7 @@ const NavItem = ({ data, setFiles }) => {
   const { id, is_public, name, unreads } = data;
   return (
     <NavLink
+      onContextMenu={contextMenuEventHandler}
       ref={drop}
       key={id}
       className={`link ${isActive ? "drop_over" : ""}`}
@@ -35,7 +47,7 @@ const NavItem = ({ data, setFiles }) => {
         {name}
       </span>
       <div className="icons">
-        <i className="setting"></i>
+        <i className="setting" onClick={handleChannelSetting}></i>
         {unreads > 0 && (
           <i className={`badge ${unreads > 99 ? "dot" : ""}`}>
             {unreads > 99 ? null : unreads}
@@ -46,13 +58,56 @@ const NavItem = ({ data, setFiles }) => {
   );
 };
 export default function ChannelList({ channels, setDropFiles }) {
-  return channels.map(({ id, is_public, name, description, unreads }) => {
-    return (
-      <NavItem
-        key={id}
-        data={{ id, is_public, name, description, unreads }}
-        setFiles={setDropFiles}
-      />
-    );
-  });
+  const {
+    visible: contextMenuVisible,
+    posX,
+    posY,
+    hideContextMenu,
+    handleContextMenuEvent,
+  } = useContextMenu();
+  return (
+    <>
+      {channels.map(({ id, is_public, name, description, unreads }) => {
+        return (
+          <NavItem
+            contextMenuEventHandler={handleContextMenuEvent}
+            key={id}
+            data={{ id, is_public, name, description, unreads }}
+            setFiles={setDropFiles}
+          />
+        );
+      })}
+      {contextMenuVisible ? (
+        <ContextMenu
+          hideMenu={hideContextMenu}
+          posX={posX}
+          posY={posY}
+          items={[
+            {
+              title: "Mark As Read",
+              underline: true,
+            },
+            {
+              title: "Mute",
+            },
+            {
+              title: "Notification Settings",
+              underline: true,
+            },
+            {
+              title: "Edit Channel",
+              underline: true,
+            },
+            {
+              title: "Invite People",
+            },
+            {
+              title: "Delete Channel",
+              danger: true,
+            },
+          ]}
+        />
+      ) : null}
+    </>
+  );
 }

src/routes/chat/DMChat/index.js

@@ -11,8 +11,11 @@ export default function DMChat({ uid = "", dropFiles = [] }) {
   console.log("dm files", dropFiles);
   const [dragFiles, setDragFiles] = useState([]);
   const contacts = useSelector((store) => store.contacts);
-  const msgs = useSelector((store) => {
-    return store.userMsg[uid] || {};
+  const { msgs, pendingMsgs } = useSelector((store) => {
+    return {
+      msgs: store.userMsg[uid] || {},
+      pendingMsgs: store.pendingMsg.user[uid] || {},
+    };
   });
   const [currUser, setCurrUser] = useState(null);
   useEffect(() => {
@@ -66,23 +69,35 @@ export default function DMChat({ uid = "", dropFiles = [] }) {
     >
       <StyledDMChat>
         <div className="chat">
-          {Object.entries(msgs).map(([mid, msg]) => {
-            if (!msg) return null;
-            console.log("user msg", msg);
-            const { from_uid, content, content_type, created_at, unread } = msg;
-            return (
-              <Message
-                content_type={content_type}
-                unread={unread}
-                fromUid={from_uid}
-                mid={mid}
-                key={mid}
-                time={created_at}
-                uid={uid}
-                content={content}
-              />
-            );
-          })}
+          {[...Object.entries(msgs), ...Object.entries(pendingMsgs)]
+            .sort(([, msg1], [, msg2]) => {
+              return msg1.created_at - msg2.created_at;
+            })
+            .map(([mid, msg]) => {
+              if (!msg) return null;
+              console.log("user msg", msg);
+              const {
+                from_uid,
+                content,
+                content_type,
+                created_at,
+                unread,
+                pending = false,
+              } = msg;
+              return (
+                <Message
+                  pending={pending}
+                  content_type={content_type}
+                  unread={unread}
+                  fromUid={from_uid}
+                  mid={mid}
+                  key={mid}
+                  time={created_at}
+                  uid={uid}
+                  content={content}
+                />
+              );
+            })}
         </div>
       </StyledDMChat>
       <div className="placeholder"></div>

src/routes/chat/DMChat/styled.js

@@ -52,6 +52,7 @@ export const StyledDMChat = styled.article`
     flex-direction: column;
     padding: 0 16px;
     padding-top: 10px;
+    padding-bottom: 25px;
     height: calc(100vh - 56px - 80px);
     overflow-y: scroll;
     overflow-x: visible;

src/routes/chat/DMList.js

@@ -3,7 +3,7 @@ import { NavLink, useNavigate } from "react-router-dom";
 import dayjs from "dayjs";
 import { useDrop } from "react-dnd";
 import { NativeTypes } from "react-dnd-html5-backend";
-import Avatar from "../../common/component/Avatar";
+import Contact from "../../common/component/Contact";
 const NavItem = ({ data, setFiles }) => {
   const navigate = useNavigate();
   const [{ isActive }, drop] = useDrop(() => ({
@@ -31,7 +31,7 @@ const NavItem = ({ data, setFiles }) => {
       className={`session ${isActive ? "drop_over" : ""}`}
       to={`/chat/dm/${uid}`}
     >
-      <Avatar className="avatar" url={user.avatar} name={user.name} />
+      <Contact compact interactive={false} className="avatar" uid={user.uid} />
       <div className="details">
         <div className="up">
           <span className="name">{user.name}</span>

src/routes/chat/index.js

@@ -8,7 +8,7 @@ import { AiOutlineCaretDown } from "react-icons/ai";
 
 import StyledWrapper from "./styled";
 import Search from "../../common/component/Search";
-import Avatar from "../../common/component/Avatar";
+import Contact from "../../common/component/Contact";
 import CurrentUser from "../../common/component/CurrentUser";
 import ChannelChat from "./ChannelChat";
 import DMChat from "./DMChat";
@@ -117,10 +117,11 @@ export default function ChatPage() {
               <DMList sessions={sessions} setDropFiles={setUserDropFiles} />
               {user_id && !Object.keys(UserMsgData).includes(user_id) && (
                 <NavLink className="session" to={`/chat/dm/${user_id}`}>
-                  <Avatar
+                  <Contact
+                    compact
+                    interactive={false}
                     className="avatar"
-                    url={tmpSessionUser.avatar}
-                    name={tmpSessionUser.name}
+                    uid={user_id}
                   />
                   <div className="details">
                     <div className="up">

src/routes/chat/styled.js

@@ -6,7 +6,7 @@ const StyledWrapper = styled.div`
     position: relative;
     display: flex;
     flex-direction: column;
-    width: 260px;
+    min-width: 260px;
     box-shadow: inset -1px 0px 0px rgba(0, 0, 0, 0.1);
     .list {
       margin: 12px 8px;
@@ -40,6 +40,7 @@ const StyledWrapper = styled.div`
           text-decoration: none;
         }
         .link {
+          position: relative;
           display: flex;
           align-items: center;
           justify-content: space-between;
@@ -52,7 +53,7 @@ const StyledWrapper = styled.div`
           > .txt {
             display: flex;
             align-items: center;
-            gap: 5px;
+            gap: 8px;
             color: #1c1c1e;
             font-weight: 600;
             font-size: 14px;
@@ -106,12 +107,7 @@ const StyledWrapper = styled.div`
           }
 
           .avatar {
-            width: 32px;
-            height: 32px;
-            border-radius: 50%;
-            /* img{
-              width: 100%;
-            } */
+            /* todo */
           }
           .details {
             display: flex;