feat: users online status

src/routes/chat/ChannelChat/index.js

@@ -10,7 +10,6 @@ import {
   clearChannelMsgUnread,
   setLastAccessTime,
 } from "../../../app/slices/message.channel";
-import { useGetContactsQuery } from "../../../app/services/contact";
 import Contact from "../../../common/component/Contact";
 import Layout from "../Layout";
 import {
@@ -29,10 +28,9 @@ export default function ChannelChat({
   // const containerRef = useRef(null);
   const [dragFiles, setDragFiles] = useState([]);
   const dispatch = useDispatch();
-  const msgs = useSelector((store) => {
-    return store.channelMsg[cid] || {};
+  const { msgs, users } = useSelector((store) => {
+    return { msgs: store.channelMsg[cid] || {}, users: store.contacts };
   });
-  const { data: users } = useGetContactsQuery();
   const handleClearUnreads = () => {
     dispatch(clearChannelMsgUnread(cid));
   };

src/routes/chat/DMChat/index.js

@@ -3,7 +3,6 @@ import { useSelector } from "react-redux";
 import Message from "../../../common/component/Message";
 import Send from "../../../common/component/Send";
 import Contact from "../../../common/component/Contact";
-import { useGetContactsQuery } from "../../../app/services/contact";
 import Layout from "../Layout";
 
 import { StyledHeader, StyledDMChat } from "./styled";
@@ -11,10 +10,10 @@ import { StyledHeader, StyledDMChat } from "./styled";
 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 { data: contacts } = useGetContactsQuery();
   const [currUser, setCurrUser] = useState(null);
   useEffect(() => {
     console.log({ uid });

src/routes/chat/index.js

@@ -6,7 +6,6 @@ import { useSelector } from "react-redux";
 import { MdAdd } from "react-icons/md";
 import { AiOutlineCaretDown } from "react-icons/ai";
 
-import { useGetContactsQuery } from "../../app/services/contact";
 import StyledWrapper from "./styled";
 import Search from "../../common/component/Search";
 import Avatar from "../../common/component/Avatar";
@@ -31,7 +30,7 @@ export default function ChatPage() {
   const [channelModalVisible, setChannelModalVisible] = useState(false);
   const [contactsModalVisible, setContactsModalVisible] = useState(false);
   const { channel_id, user_id } = useParams();
-  const { data: contacts } = useGetContactsQuery();
+  const contacts = useSelector((store) => store.contacts);
   const toggleContactsModalVisible = () => {
     setContactsModalVisible((prev) => !prev);
   };
@@ -121,7 +120,7 @@ export default function ChatPage() {
                   <Avatar
                     className="avatar"
                     url={tmpSessionUser.avatar}
-                    id={user_id}
+                    name={tmpSessionUser.name}
                   />
                   <div className="details">
                     <div className="up">

src/routes/contacts/Profile.js

@@ -1,13 +1,12 @@
 // import React from "react";
 // import toast from "react-hot-toast";
 import { useState, useEffect } from "react";
-
+import { useSelector } from "react-redux";
 import { NavLink } from "react-router-dom";
 import { BsChatText } from "react-icons/bs";
 import { RiUserAddLine } from "react-icons/ri";
 import { IoShareOutline } from "react-icons/io5";
 import styled from "styled-components";
-import { useGetContactsQuery } from "../../app/services/contact";
 
 import Avatar from "../../common/component/Avatar";
 
@@ -52,7 +51,7 @@ const StyledWrapper = styled.div`
   }
 `;
 export default function Profile({ uid = null }) {
-  const { data: contacts } = useGetContactsQuery();
+  const contacts = useSelector((store) => store.contacts);
   const [profile, setProfile] = useState(null);
   useEffect(() => {
     if (contacts && contacts) {
@@ -66,7 +65,7 @@ export default function Profile({ uid = null }) {
   const { name, email, avatar } = profile;
   return (
     <StyledWrapper>
-      <Avatar className="avatar" url={avatar} id={uid} name={name} />
+      <Avatar className="avatar" url={avatar} name={name} />
       <h2 className="name">{name}</h2>
       <span className="email">{email}</span>
       <ul className="icons">

src/routes/contacts/index.js

@@ -1,6 +1,6 @@
 // import { useState, useEffect } from "react";
 import { NavLink, useParams } from "react-router-dom";
-import { useGetContactsQuery } from "../../app/services/contact";
+import { useSelector } from "react-redux";
 import Search from "../../common/component/Search";
 import Contact from "../../common/component/Contact";
 import CurrentUser from "../../common/component/CurrentUser";
@@ -10,7 +10,7 @@ import StyledWrapper from "./styled";
 
 export default function ContactsPage() {
   const { user_id } = useParams();
-  const { data: contacts } = useGetContactsQuery();
+  const contacts = useSelector((store) => store.contacts);
 
   console.log({ contacts, user_id });
   if (!contacts) return null;

src/routes/home/usePreload.js

@@ -3,6 +3,7 @@ import { useSelector, useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { useGetContactsQuery } from "../../app/services/contact";
 import { clearAuthData } from "../../app/slices/auth.data";
+import { setContacts } from "../../app/slices/contacts";
 
 // import { useGetChannelsQuery } from "../../app/services/channel";
 import { useGetServerQuery } from "../../app/services/server";
@@ -41,8 +42,13 @@ export default function usePreload() {
       if (!matchedUser) {
         dispatch(clearAuthData());
         navigate("/login");
+      } else {
+        const markedContacts = contacts.map((u) => {
+          return u.uid == matchedUser.uid ? { ...u, online: true } : u;
+        });
+        dispatch(setContacts(markedContacts));
+        setChecked(true);
       }
-      setChecked(true);
     }
   }, [contacts]);