fix: prevent duplicated submissions

src/pages/Projects/SettingField/index.tsx

@@ -22,6 +22,7 @@ const SettingField: React.ForwardRefRenderFunction<unknown, ISettingField> = (
   const [editable, setEditable] = useState(false)
   const [errorMsg, setErrorMsg] = useState('')
   const [value, setValue] = useState(defaultValue)
+  const canSubmit = useRef(true)
   const intRef = useRef<HTMLInputElement>(null!)
   useImperativeHandle<unknown, IRefReturnType>(ref, () => ({ value: value }), [
     value,
@@ -32,12 +33,18 @@ const SettingField: React.ForwardRefRenderFunction<unknown, ISettingField> = (
   }, [defaultValue])
 
   const onHandleConfirm = () => {
-    handleConfirm().then((errMsg) => {
-      if (!errMsg) {
-        setEditable(false)
-      }
-      setErrorMsg(errMsg)
-    })
+    if (!canSubmit.current) return
+    canSubmit.current = false
+    handleConfirm()
+      .then((errMsg) => {
+        if (!errMsg) {
+          setEditable(false)
+        }
+        setErrorMsg(errMsg)
+      })
+      .finally(() => {
+        canSubmit.current = true
+      })
   }
 
   return (

src/pages/Projects/index.tsx

@@ -30,6 +30,7 @@ const Projects: FC<{}> = () => {
   const [tabNum, setTabNum] = useState(0)
   const [viewType, switchToView] = useState<'setting' | 'request'>('request')
   const [projectInfo, setProjectInfo] = useState<Project[]>([])
+  const delBtnIsDisabled = useRef(false)
   const [deleteModalVisible, setDeleteModalVisible] = useState(false)
   const { updateMenu } = useContext(DashboardContext)
   const nameRef = useRef<IRefReturnType>(null)
@@ -88,6 +89,8 @@ const Projects: FC<{}> = () => {
   }
 
   const handleDelProject = () => {
+    if (delBtnIsDisabled.current) return
+    delBtnIsDisabled.current = true
     apiDelProject({ id: projectInfo[tabNum].id }).then(
       () => {
         message.success(t('tip.delete'))
@@ -100,7 +103,9 @@ const Projects: FC<{}> = () => {
       () => {
         message.success(t('tip.fail'))
       }
-    )
+    ).finally(() => {
+      delBtnIsDisabled.current = false
+    })
     setDeleteModalVisible(false)
   }
 

src/shared/components/CreateProjectBtn/Modal.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, FC, useState, useContext } from 'react'
+import { Dispatch, FC, useState, useContext, useRef } from 'react'
 import { message, Modal, Select } from 'antd'
 import { apiCreateProject } from '../../../core/data/api'
 import { useTranslation } from 'react-i18next'
@@ -15,11 +15,11 @@ const CreateProjectModal: FC<{
   setVisible: Dispatch<boolean>
   closeCallBack?: () => void
 }> = ({ visible = false, chain, setVisible, closeCallBack }) => {
-
   const [projectName, setProjectName] = useState('')
   const [selectedTeam, setSelectTeam] = useState('')
   const [selectedChain, setSelectChain] = useState('')
   const [isValidProjectName, setIsValid] = useState(true)
+  const createBtnIsDisabled = useRef(false)
   const { t } = useTranslation()
   const { user, updateUser } = useApi()
   const { chains, updateMenu } = useContext(DashboardContext)
@@ -48,7 +48,7 @@ const CreateProjectModal: FC<{
     setSelectChain('')
   }
 
-  const _generateTeamOfChain = (chain?:string) => {
+  const _generateTeamOfChain = (chain?: string) => {
     for (let type in chains) {
       for (let i = 0; i < chains[type].length; i++) {
         if (chains[type][i].name === chain) {
@@ -60,6 +60,8 @@ const CreateProjectModal: FC<{
   }
 
   const _createProject = () => {
+    if (createBtnIsDisabled.current) return
+    createBtnIsDisabled.current = true
     apiCreateProject({
       userId: user.id,
       chain: chain || selectedChain,
@@ -78,6 +80,9 @@ const CreateProjectModal: FC<{
       .catch((res) => {
         message.error(t(res.msg))
       })
+      .finally(() => {
+        createBtnIsDisabled.current = false
+      })
     setVisible(false)
   }