diff --git a/src/components/Global/MqttConnection.jsx b/src/components/Global/MqttConnection.jsx index bde3404..e2be3aa 100644 --- a/src/components/Global/MqttConnection.jsx +++ b/src/components/Global/MqttConnection.jsx @@ -10,7 +10,8 @@ const topics = [ 'PIU_COD/COMPRESSOR/OVERVIEW', 'PIU_COD/COMPRESSOR/COMPRESSOR_A', 'PIU_COD/COMPRESSOR/COMPRESSOR_B', - 'PIU_COD/COMPRESSOR/COMPRESSOR_C' + 'PIU_COD/COMPRESSOR/COMPRESSOR_C', + 'PIU_COD/ERROR_CODE/SIM', ]; const options = { keepalive: 30, @@ -98,4 +99,22 @@ const setValSvg = (listenTopic, svg) => { }); }; -export { publishMessage, listenMessage, setValSvg }; +// === NOTIFICATION LISTENER === +const notifListeners = []; + +const onNotifUpdate = (callback) => { + notifListeners.push(callback); +}; + +client.on('message', (topic, message) => { + if (topic === import.meta.env.VITE_MQTT_TOPIC_COD) { + try { + const payload = JSON.parse(message.toString()); + notifListeners.forEach((cb) => cb(payload)); + } catch (err) { + console.error('Invalid notif payload', err); + } + } +}); + +export { publishMessage, listenMessage, setValSvg, onNotifUpdate }; diff --git a/src/pages/notification/component/ListNotification.jsx b/src/pages/notification/component/ListNotification.jsx index 4758135..64fe055 100644 --- a/src/pages/notification/component/ListNotification.jsx +++ b/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) {