src/components/Global/MqttConnection.jsx

@@ -64,36 +64,28 @@ const listenMessage = (callback) => {
     });
 };
 
-const listenMessageState = (setState) => {
+const setValSvg = (listenTopic, svg) => {
     client.on('message', (topic, message) => {
-        const msgObj = {
+        if (topic == listenTopic) {
-            date: new Date().toLocaleString(),
+            const objChanel = JSON.parse(message);
-            topic: topic,
+
-            msg: JSON.parse(message),
+            Object.entries(objChanel).forEach(([key, value]) => {
-        };
+                // console.log(key, value);
-        setState(msgObj);
+                const el = svg.getElementById(key);
+                if (el) {
+                    if (value === true) {
+                        el.style.display = ''; // sembunyikan
+                    } else if (value === false) {
+                        el.style.display = 'none';
+                    } else if (!isNaN(value)) {
+                        el.textContent = Number(value ?? 0.0);
+                    } else {
+                        el.textContent = value;
+                    }
+                }
+            });
+        }
     });
 };
 
-const setValSvg = (msgValue, topic, svg) => {
+export { publishMessage, listenMessage, setValSvg };
-    if (msgValue.topic == topic) {
-        const objChanel = msgValue?.msg;
-        Object.entries(objChanel).forEach(([key, value]) => {
-            // console.log(key, value);
-            const el = svg.getElementById(key);
-            if (el) {
-                if (value === true) {
-                    el.style.display = ''; // sembunyikan
-                } else if (value === false) {
-                    el.style.display = 'none';
-                } else if (!isNaN(value)) {
-                    el.textContent = Number(value ?? 0.0);
-                } else {
-                    el.textContent = value;
-                }
-            }
-        });
-    }
-};
-
-export { publishMessage, listenMessage, listenMessageState, setValSvg };

src/pages/home/SvgTest.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { Card, Typography, Flex } from 'antd';
 import { ReactSVG } from 'react-svg';
-import { listenMessageState, setValSvg } from '../../components/Global/MqttConnection';
+import { setValSvg } from '../../components/Global/MqttConnection';
 
 const { Text } = Typography;
 
@@ -9,12 +9,6 @@ const filePathSvg = '/svg/test-new.svg';
 const topicMqtt = 'PIU_GGCP/Devices/PB';
 
 const SvgTest = () => {
-    const [received, setReceived] = useState([]);
-
-    listenMessageState(setReceived)
-
-    useEffect(() => {}, []);
-
     return (
         <>
             <Card>
@@ -27,7 +21,7 @@ const SvgTest = () => {
             <ReactSVG
                 src={filePathSvg}
                 beforeInjection={(svg) => {
-                    setValSvg(received, topicMqtt, svg);
+                    setValSvg(topicMqtt, svg);
                 }}
             />
         </>