optimize global states

src/common/useFetchResources.tsx

@@ -163,5 +163,5 @@ export const useFetchResources = () => {
     [setResources]
   );
 
-  return { downloadResource };
+  return downloadResource;
 };

src/common/useModal.tsx

@@ -1,64 +1,50 @@
-import { useRef, useState } from 'react';
+import { useRef, useState, useCallback, useMemo } from 'react';
 
 interface State {
-    isShow: boolean;
+  isShow: boolean;
 }
+
 export const useModal = () => {
-    const [state, setState] = useState<State>({
-        isShow: false,
+  const [state, setState] = useState<State>({ isShow: false });
+  const [message, setMessage] = useState({ publishFee: '', message: '' });
+  const promiseConfig = useRef<any>(null);
+
+  const show = useCallback((data) => {
+    setMessage(data);
+    return new Promise((resolve, reject) => {
+      promiseConfig.current = { resolve, reject };
+      setState({ isShow: true });
     });
-    const [message, setMessage] = useState({
-        publishFee: "",
-        message: ""
-    });
-    const promiseConfig = useRef<any>(null);
-    const show = async (data) => {
-        setMessage(data)
-        return new Promise((resolve, reject) => {
-            promiseConfig.current = {
-                resolve,
-                reject,
-            };
-            setState({
-                isShow: true,
-            });
-        });
-    };
+  }, []);
 
-    const hide = () => {
-        setState({
-            isShow: false,
-        });
-        setMessage({
-            publishFee: "",
-        message: ""
-        })
-    };
+  const hide = useCallback(() => {
+    setState({ isShow: false });
+    setMessage({ publishFee: '', message: '' });
+  }, []);
 
-    const onOk = (payload:any) => {
-        const { resolve } = promiseConfig.current;
-        setMessage({
-            publishFee: "",
-        message: ""
-        })
-        hide();
-        resolve(payload);
-    };
+  const onOk = useCallback(
+    (payload: any) => {
+      const { resolve } = promiseConfig.current || {};
+      hide();
+      resolve?.(payload);
+    },
+    [hide]
+  );
 
-    const onCancel = () => {
-        const { reject } = promiseConfig.current;
-        hide();
-        reject();
-        setMessage({
-            publishFee: "",
-        message: ""
-        })
-    };
-    return {
-        show,
-        onOk,
-        onCancel,
-        isShow: state.isShow,
-        message
-    };
-};
+  const onCancel = useCallback(() => {
+    const { reject } = promiseConfig.current || {};
+    hide();
+    reject?.();
+  }, [hide]);
+
+  return useMemo(
+    () => ({
+      show,
+      onOk,
+      onCancel,
+      isShow: state.isShow,
+      message,
+    }),
+    [show, onOk, onCancel, state.isShow, message]
+  );
+};