feat: updated

src/common/component/ChannelModal/styled.js

@@ -10,13 +10,17 @@ const StyledWrapper = styled.div`
   transition: all 0.5s ease;
   .left {
     width: 260px;
-    height: 100%;
+    /* height: 100%; */
     box-shadow: inset -1px 0px 0px rgba(0, 0, 0, 0.1);
     overflow-y: scroll;
     .search {
+      position: sticky;
+      top: 0;
+      z-index: 99;
+      background: #fff;
       box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
       padding: 8px;
-      width: -webkit-fill-available;
+      width: calc(100% - 1px);
       input {
         outline: none;
         width: -webkit-fill-available;
@@ -29,9 +33,9 @@ const StyledWrapper = styled.div`
     .users {
       display: flex;
       flex-direction: column;
-      height: 260px;
+      /* height: 260px; */
       padding-bottom: 20px;
-      overflow-y: scroll;
+      /* overflow-y: scroll; */
       .user {
         cursor: pointer;
         display: flex;

src/common/component/NotificationHub.js

@@ -10,18 +10,20 @@ import {
   addChannel,
   deleteChannel,
 } from "../../app/slices/channels";
-import { clearAuthData } from "../../app/slices/auth.data";
+import { clearAuthData, setUsersVersion } from "../../app/slices/auth.data";
 
 import { addChannelMsg } from "../../app/slices/message.channel";
 import { addUserMsg } from "../../app/slices/message.user";
 
-const NotificationHub = ({ token }) => {
+const NotificationHub = ({ token, usersVersion = 0 }) => {
   const dispatch = useDispatch();
   const navigate = useNavigate();
   useEffect(() => {
     let sse = null;
     if (token) {
-      sse = new EventSource(`${BASE_URL}/user/events?api-key=${token}`);
+      sse = new EventSource(
+        `${BASE_URL}/user/events?api-key=${token}&users_version=${usersVersion}`
+      );
       sse.onopen = () => {
         console.info("sse opened");
       };
@@ -33,7 +35,7 @@ const NotificationHub = ({ token }) => {
       };
     }
     return () => {
-      console.log("re-run see init");
+      console.log("re-run sse init");
       if (sse) {
         sse.close();
       }
@@ -46,6 +48,13 @@ const NotificationHub = ({ token }) => {
       case "heartbeat":
         console.log("heartbeat");
         break;
+      case "users_snapshot":
+        {
+          console.log("users snapshot");
+          const { version } = data;
+          dispatch(setUsersVersion({ version }));
+        }
+        break;
       case "kick":
         {
           console.log("kicked");
@@ -66,7 +75,7 @@ const NotificationHub = ({ token }) => {
         }
         break;
       case "related_groups":
-        console.log("joined group list", data);
+        console.log("related group list", data);
         dispatch(setChannels(data.groups));
         break;
       case "joined_group":
@@ -74,7 +83,7 @@ const NotificationHub = ({ token }) => {
         dispatch(addChannel(data.group));
         break;
       case "kick_from_group":
-        console.log("joined group list", data.gid);
+        console.log("kicked from group", data.gid);
         dispatch(deleteChannel(data.gid));
         break;
       case "chat":