fix npm package + use our own "useDelayedState"

package.json

@@ -158,6 +158,9 @@
     "@types/react-dom": "^18.0.10",
     "@types/react-outside-click-handler": "^1.3.1",
     "@types/react-test-renderer": "^17.0.2",
+    "@types/react-virtualized-auto-sizer": "^1.0.1",
+    "@types/react-window": "^1.8.5",
+    "@types/recursive-readdir": "^2.2.1",
     "@types/terser-webpack-plugin": "^5.0.4",
     "@types/use-double-click": "^1.0.1",
     "@types/webpack-bundle-analyzer": "^4.4.2",
@@ -226,9 +229,6 @@
   "dependencies": {
     "@node-steam/vdf": "^2.2.0",
     "@tippyjs/react": "^4.2.6",
-    "@types/react-virtualized-auto-sizer": "^1.0.1",
-    "@types/react-window": "^1.8.5",
-    "@types/recursive-readdir": "^2.2.1",
     "archiver": "^5.3.1",
     "dateformat": "^5.0.3",
     "dot-prop": "^7.2.0",
@@ -259,7 +259,6 @@
     "semver": "^7.3.8",
     "tailwind-scrollbar-hide": "^1.1.7",
     "tailwindcss-scoped-groups": "^2.0.0",
-    "use-delayed-state": "^1.2.0",
     "use-double-click": "^1.0.5",
     "use-fit-text": "^2.4.0"
   },

src/renderer/components/maps-mangement-components/map-item.component.tsx

@@ -11,7 +11,6 @@ import dateFormat from "dateformat";
 import { AudioPlayerService } from "renderer/services/audio-player.service";
 import { useObservable } from "renderer/hooks/use-observable.hook";
 import { map } from "rxjs/operators";
-import useDelayedState from "use-delayed-state";
 import equal from "fast-deep-equal/es6";
 import { getMapZipUrlFromHash } from "renderer/helpers/maps-utils";
 import { BsmBasicSpinner } from "../shared/bsm-basic-spinner/bsm-basic-spinner.component";
@@ -21,6 +20,7 @@ import { MAP_DIFFICULTIES } from "renderer/partials/maps/map-difficulties/map-di
 import { MAP_DIFFICULTIES_COLORS } from "renderer/partials/maps/map-difficulties/map-difficulties-colors"
 import useDoubleClick from "use-double-click";
 import { GlowEffect } from "../shared/glow-effect.component";
+import { useDelayedState } from "renderer/hooks/use-delayed-state.hook";
 
 export type ParsedMapDiff = {type: BsvMapDifficultyType, name: string, stars: number}
 

src/renderer/hooks/use-delayed-state.hook.ts

@@ -0,0 +1,39 @@
+import { useEffect, useState, useRef } from 'react'
+
+// Code improved from : https://www.npmjs.com/package/use-delayed-state
+
+export function useDelayedState<T = unknown>(initialState: T): [T, (newState: T, delay: number) => void, () => void] {
+
+    const [state, setState] = useState(initialState);
+    const timeoutRef = useRef<NodeJS.Timeout>();
+
+    const setStateAfter = (newState: T, delay: number) => {
+        if (delay === 0 || delay === undefined) {
+            return setState(newState);
+        } 
+        
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+
+        timeoutRef.current = setTimeout(() => {
+            setState(newState);
+            timeoutRef.current = null;
+        }, delay);
+    }
+
+    const cancelSetState = () => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null
+        }
+    }
+
+    useEffect(() => {
+        return () => {
+            if (timeoutRef.current) { clearTimeout(timeoutRef.current); }
+        }
+    }, []);
+
+    return [state, setStateAfter, cancelSetState]
+}