fix npm package + use our own "useDelayedState"

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]
+}