Fix event listener cleanup

Author: ChrJohansen

Tevling/Pages/Statistics.razor.cs

@@ -55,6 +55,7 @@ public string IncreaseVsDecrease(string increase, string decrease)
     private Athlete _athlete = null!;
     private Activity[] _activities = [];
     private IJSObjectReference? _module;
+    private IJSObjectReference? _resizeHandler;
 
     private TimePeriod TimePeriod { get; set; } = TimePeriod.Months;
     private int NumberOfPeriodsToReview { get; set; } = 3;
@@ -263,16 +264,22 @@ await _module.InvokeVoidAsync(
                 throw new Exception("Unknown challenge measurement");
         }
 
-        await _module.InvokeVoidAsync("enableCanvasResize", "TheChart");
+       _resizeHandler ??= await _module.InvokeAsync<IJSObjectReference>("enableCanvasResize", "TheChart");
     }
 
     public async ValueTask DisposeAsync()
     {
         try
         {
+            if (_resizeHandler != null)
+            {
+                await _resizeHandler.InvokeVoidAsync("dispose");
+                await _resizeHandler.DisposeAsync();
+                _resizeHandler = null;
+            }
+            
             if (_module != null)
             {
-                await _module.InvokeVoidAsync("disposeCanvasResize", "TheChart");
                 await _module.DisposeAsync();
                 _module = null;
             }

Tevling/Pages/Statistics.razor.js

@@ -73,20 +73,18 @@ export function isMobile() {
     return window.matchMedia('(max-width: 576px)').matches;
 }
 
-
-function handleCanvasResize(chartName) {
-    const canvas = document.getElementById(chartName);
-    if (canvas && window[chartName] instanceof Chart) {
-        window[chartName].resize(); // Resize Chart.js instance on canvas resize
-    }
-}
-
 export function enableCanvasResize(chartName) {
     // Add event listener for window resize
-    window.addEventListener('resize', () => handleCanvasResize(chartName));
-}
+    const handleCanvasResize = () => {
+        const canvas = document.getElementById(chartName);
+        if (canvas && window[chartName] instanceof Chart) {
+            window[chartName].resize(); // Resize Chart.js instance on canvas resize
+        }
+    }
+    window.addEventListener('resize', handleCanvasResize);
 
-export function disposeCanvasResize(chartName) {
-    window.removeEventListener('resize', () => handleCanvasResize(chartName));
+    return {
+        dispose: () => window.removeEventListener('resize', handleCanvasResize)
+    };
 }