feat(mqtt): update notification use websocket

src/pages/notification/component/ListNotification.jsx

@@ -46,6 +46,7 @@ import {
     resendChatAllUser,
     searchData,
 } from '../../../api/notification';
+import { onNotifUpdate } from '../../../components/Global/MqttConnection';
 
 const { Text, Paragraph, Link: AntdLink } = Typography;
 const OpenMail = ({ size = 22, color = 'black' }) => (
@@ -101,6 +102,7 @@ const ListNotification = memo(function ListNotification(props) {
     const [activeTab, setActiveTab] = useState('all');
     const [searchTerm, setSearchTerm] = useState('');
     const [searchValue, setSearchValue] = useState('');
+    const [notifTrigger, setNotifTrigger] = useState(0);
     const [loading, setLoading] = useState(false);
     const [modalContent, setModalContent] = useState(null); // 'user', 'log', 'details', or null
     const [isAddingLog, setIsAddingLog] = useState(false);
@@ -178,6 +180,12 @@ const ListNotification = memo(function ListNotification(props) {
         fetchNotifications(page, pageSize, isReadFilter);
     };
 
+    useEffect(() => {
+        onNotifUpdate(() => {
+            setNotifTrigger((prev) => prev + 1);
+        });
+    }, []);
+
     useEffect(() => {
         const token = localStorage.getItem('token');
         if (!token) {
@@ -188,7 +196,7 @@ const ListNotification = memo(function ListNotification(props) {
         // Fetch notifications on component mount and when tab changes
         const isReadFilter = activeTab === 'read' ? 1 : activeTab === 'unread' ? 0 : null;
         fetchNotifications(pagination.current_page, pagination.current_limit, isReadFilter);
-    }, [activeTab]);
+    }, [activeTab, notifTrigger]);
 
     const getIconAndColor = (type) => {
         switch (type) {