feat: updates

src/common/component/ImagePreviewModal.js

@@ -1,6 +1,6 @@
 import { useRef } from "react";
 import styled, { keyframes } from "styled-components";
-import { useOutsideClick } from "rooks";
+import { useOutsideClick, useKey } from "rooks";
 import Modal from "./Modal";
 const AniFadeIn = keyframes`
 from{
@@ -43,7 +43,14 @@ const StyledWrapper = styled.div`
 export default function ImagePreviewModal({ image = null, closeModal }) {
   const wrapperRef = useRef();
   useOutsideClick(wrapperRef, closeModal);
-
+  useKey(
+    "Escape",
+    () => {
+      console.log("close preview modal");
+      closeModal();
+    },
+    { eventTypes: ["keyup"] }
+  );
   if (!image) return null;
   return (
     <Modal>

src/common/component/NotificationHub/index.js

@@ -3,7 +3,10 @@ import { useNavigate } from "react-router-dom";
 import toast from "react-hot-toast";
 import { useDispatch, useSelector } from "react-redux";
 import useNotification from "./useNotification";
-import BASE_URL from "../../../app/config";
+import BASE_URL, {
+  KEY_AFTER_MID,
+  KEY_USERS_VERSION,
+} from "../../../app/config";
 import { useRenewMutation } from "../../../app/services/auth";
 import {
   setChannels,
@@ -21,8 +24,6 @@ import {
 } from "../../../app/slices/auth.data";
 import { setUsersVersion, setAfterMid } from "../../../app/slices/visit.mark";
 
-// import { addChannelMsg } from "../../../app/slices/message.channel";
-// import { addUserMsg } from "../../../app/slices/message.user";
 import { setReady } from "../../../app/slices/ui";
 import useMessageHandler from "./useMessageHandler";
 const getQueryString = (params = {}) => {
@@ -34,7 +35,7 @@ const getQueryString = (params = {}) => {
   });
   return sp.toString();
 };
-const NotificationHub = ({ usersVersion = 0, afterMid = 0 }) => {
+const NotificationHub = () => {
   const { enableNotification } = useNotification();
   const dispatch = useDispatch();
   const navigate = useNavigate();
@@ -53,11 +54,15 @@ const NotificationHub = ({ usersVersion = 0, afterMid = 0 }) => {
   useEffect(() => {
     let sse = null;
     if (token) {
+      const users_version =
+        localStorage.getItem(`${KEY_USERS_VERSION}_${currUser.uid}`) ?? 0;
+      const after_mid =
+        localStorage.getItem(`${KEY_AFTER_MID}_${currUser.uid}`) ?? 0;
       sse = new EventSource(
         `${BASE_URL}/user/events?${getQueryString({
           "api-key": token,
-          users_version: usersVersion,
-          after_mid: afterMid,
+          users_version,
+          after_mid,
         })}`
       );
       sse.onopen = () => {
@@ -89,7 +94,7 @@ const NotificationHub = ({ usersVersion = 0, afterMid = 0 }) => {
         sse.close();
       }
     };
-  }, [token, refreshToken, usersVersion, afterMid]);
+  }, [token, refreshToken]);
   useEffect(() => {
     if (refreshTokenSuccess) {
       const { token, refresh_token } = data;