fix: only delete last file when select multiple files #1576 (#1578)

* fix the bug can't delete multiple files #1576

* using useEvent instead of useRef

* delete unused code

* delete unused code

* change hook file name

* refactor the useEvent

* delete unnecessary export

* fix import

* Apply suggestions from code review

---------

Co-authored-by: boojack <stevenlgtm@gmail.com>

web/src/hooks/useEvent.ts

@@ -0,0 +1,25 @@
+import React, { useEffect, useRef, EffectCallback, DependencyList } from "react";
+
+const useIsoMorphicEffect = (effect: EffectCallback, deps?: DependencyList | undefined) => {
+  useEffect(effect, deps);
+};
+
+function useLatestValue<T>(value: T) {
+  const cache = useRef(value);
+
+  useIsoMorphicEffect(() => {
+    cache.current = value;
+  }, [value]);
+
+  return cache;
+}
+
+// TODO: Add React.useEvent ?? once the useEvent hook is available
+function useEvent<F extends (...args: any[]) => any, P extends any[] = Parameters<F>, R = ReturnType<F>>(
+  cb: (...args: P) => R
+) {
+  const cache = useLatestValue(cb);
+  return React.useCallback((...args: P) => cache.current(...args), [cache]);
+};
+
+export default useEvent;

web/src/pages/ResourcesDashboard.tsx

@@ -13,6 +13,7 @@ import Dropdown from "@/components/kit/Dropdown";
 import ResourceItem from "@/components/ResourceItem";
 import { showCommonDialog } from "@/components/Dialog/CommonDialog";
 import showCreateResourceDialog from "@/components/CreateResourceDialog";
+import useEvent from "@/hooks/useEvent";
 
 const ResourcesDashboard = () => {
   const { t } = useTranslation();
@@ -40,13 +41,13 @@ const ResourcesDashboard = () => {
       });
   }, []);
 
-  const handleCheckBtnClick = (resourceId: ResourceId) => {
+  const handleCheckBtnClick = useEvent((resourceId: ResourceId) => {
     setSelectedList([...selectedList, resourceId]);
-  };
+  });
 
-  const handleUncheckBtnClick = (resourceId: ResourceId) => {
+  const handleUncheckBtnClick = useEvent((resourceId: ResourceId) => {
     setSelectedList(selectedList.filter((id) => id !== resourceId));
-  };
+  });
 
   const handleStyleChangeBtnClick = (listStyle: "GRID" | "TABLE") => {
     setListStyle(listStyle);