web: fix duplicate api call when change energy chart type multiple time

hoang-rio · Dec 19, 2024 · 233212b · 233212b
1 parent 2e89c81
commit 233212b
Show file tree

Hide file tree

Showing 16 changed files with 41 additions and 30 deletions.
diff --git a/web_viewer/fe_src/src/components/DailyChart.tsx b/web_viewer/fe_src/src/components/DailyChart.tsx
@@ -83,14 +83,17 @@ const DailyChart = forwardRef((_, ref: ForwardedRef<IFetchChart>) => {
     })
   );
 
+  const onVisiblityChange = useCallback(() => {
+    if (!document.hidden) {
+      fetchChart();
+    }
+  }, [fetchChart]);
+
   useEffect(() => {
     fetchChart();
-    document.addEventListener("visibilitychange", () => {
-      if (!document.hidden) {
-        fetchChart();
-      }
-    });
-  }, [fetchChart]);
+    document.addEventListener("visibilitychange", onVisiblityChange);
+    return () => document.removeEventListener("visibilitychange", onVisiblityChange);
+  }, [fetchChart, onVisiblityChange]);
 
   useEffect(() => {
     const mq = window.matchMedia("(prefers-color-scheme: dark)");

diff --git a/web_viewer/fe_src/src/components/MonthlyChart.tsx b/web_viewer/fe_src/src/components/MonthlyChart.tsx
@@ -85,14 +85,18 @@ const MonthlyChart = forwardRef((_, ref: ForwardedRef<IFetchChart>) => {
     })
   );
 
+  const onVisiblityChange = useCallback(() => {
+    if (!document.hidden) {
+      fetchChart();
+    }
+  }, [fetchChart]);
+
   useEffect(() => {
     fetchChart();
-    document.addEventListener("visibilitychange", () => {
-      if (!document.hidden) {
-        fetchChart();
-      }
-    });
-  }, [fetchChart]);
+    document.addEventListener("visibilitychange", onVisiblityChange);
+    return () =>
+      document.removeEventListener("visibilitychange", onVisiblityChange);
+  }, [fetchChart, onVisiblityChange]);
 
   useEffect(() => {
     const mq = window.matchMedia("(prefers-color-scheme: dark)");

diff --git a/web_viewer/fe_src/src/components/YearlyChart.tsx b/web_viewer/fe_src/src/components/YearlyChart.tsx
@@ -85,14 +85,18 @@ const YearlyChart = forwardRef((_, ref: ForwardedRef<IFetchChart>) => {
     })
   );
 
+  const onVisiblityChange = useCallback(() => {
+    if (!document.hidden) {
+      fetchChart();
+    }
+  }, [fetchChart]);
+
   useEffect(() => {
     fetchChart();
-    document.addEventListener("visibilitychange", () => {
-      if (!document.hidden) {
-        fetchChart();
-      }
-    });
-  }, [fetchChart]);
+    document.addEventListener("visibilitychange", onVisiblityChange);
+    return () =>
+      document.removeEventListener("visibilitychange", onVisiblityChange);
+  }, [fetchChart, onVisiblityChange]);
 
   useEffect(() => {
     const mq = window.matchMedia("(prefers-color-scheme: dark)");

diff --git a/web_viewer/public/assets/EnergyChart-CqgWYZ6D.js b/web_viewer/public/assets/EnergyChart-CqgWYZ6D.js
diff --git a/web_viewer/public/assets/EnergyChart-yyp8EL_K.js b/web_viewer/public/assets/EnergyChart-yyp8EL_K.js
diff --git a/...er/public/assets/GeneralValue-DT878Cs6.js → ...er/public/assets/GeneralValue-TQNWFOiV.js b/...er/public/assets/GeneralValue-DT878Cs6.js → ...er/public/assets/GeneralValue-TQNWFOiV.js
@@ -1 +1 @@
-import{j as e}from"./index-bn3fLlzU.js";function l({value:r,unit:s,className:n}){return e.jsxs("div",{className:`${n||""} general-value`,children:[e.jsx("strong",{children:r}),s]})}export{l as G};
+import{j as e}from"./index-2Fv8VwMK.js";function l({value:r,unit:s,className:n}){return e.jsxs("div",{className:`${n||""} general-value`,children:[e.jsx("strong",{children:r}),s]})}export{l as G};
diff --git a/...wer/public/assets/HourlyChart-BTS1liN6.js → ...wer/public/assets/HourlyChart-D1hNPe7p.js b/...wer/public/assets/HourlyChart-BTS1liN6.js → ...wer/public/assets/HourlyChart-D1hNPe7p.js
diff --git a/web_viewer/public/assets/MonthlyChart-2LzxHQgP.js b/web_viewer/public/assets/MonthlyChart-2LzxHQgP.js
diff --git a/web_viewer/public/assets/MonthlyChart-CPAcdl1p.js b/web_viewer/public/assets/MonthlyChart-CPAcdl1p.js
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		import{j as e}from"./index-bn3fLlzU.js";function l({value:r,unit:s,className:n}){return e.jsxs("div",{className:`${n\|\|""} general-value`,children:[e.jsx("strong",{children:r}),s]})}export{l as G};
		import{j as e}from"./index-2Fv8VwMK.js";function l({value:r,unit:s,className:n}){return e.jsxs("div",{className:`${n\|\|""} general-value`,children:[e.jsx("strong",{children:r}),s]})}export{l as G};