fix(#2331): fix close popup before to get response from backend

4 years ago · 5579b78267
parent 72124ba0d5
commit 5579b78267
2 changed files with 10 additions and 16 deletions
--- a/src/features/AuthServiceApp/components/RecoveryPopup/hooks.tsx
+++ b/src/features/AuthServiceApp/components/RecoveryPopup/hooks.tsx
@ -1,6 +1,6 @@
 import {
+  MouseEvent,
  ChangeEvent,
-  useEffect,
  useState,
 } from 'react'

@ -16,7 +16,6 @@ export const useRecovery = (setIsModalOpen: (value: boolean) => void) => {
  const [email, setEmail] = useState('')
  const [isFetching, setIsFetching] = useState(false)
  const [isSendMessage, setIsSendMessage] = useState(false)
-  const [isSuccess, setIsSuccess] = useState(false)

  const onEmailChange = ({
    target: { value },
@ -32,7 +31,6 @@ export const useRecovery = (setIsModalOpen: (value: boolean) => void) => {

  const closePopup = () => {
    setIsSendMessage(false)
-    setIsSuccess(false)
    setIsFetching(false)
    setError('')
    setEmail('')
@ -45,8 +43,12 @@ export const useRecovery = (setIsModalOpen: (value: boolean) => void) => {
    setIsFetching(false)
  }

-  const handleSubmit = () => {
+  const handleSubmit = (event: MouseEvent) => {
+    event?.preventDefault()
+    event?.stopPropagation()
+
    setIsFetching(true)
+    setIsSendBtnDisabled(true)
    loginCheckChangePass(
      client_id,
      email,
@ -59,14 +61,6 @@ export const useRecovery = (setIsModalOpen: (value: boolean) => void) => {
      .catch(handleError)
  }

-  useEffect(() => {
-    if (!isFetching && isSendMessage) {
-      setIsSuccess(true)
-    } else {
-      setIsSuccess(false)
-    }
-  }, [isFetching, isSendMessage])
-
  return {
    closePopup,
    email,
@ -74,7 +68,7 @@ export const useRecovery = (setIsModalOpen: (value: boolean) => void) => {
    handleSubmit,
    isFetching,
    isSendBtnDisabled,
-    isSuccess,
+    isSendMessage,
    onEmailChange,
  }
 }
--- a/src/features/AuthServiceApp/components/RecoveryPopup/index.tsx
+++ b/src/features/AuthServiceApp/components/RecoveryPopup/index.tsx
@ -33,7 +33,7 @@ export const RecoveryPopup = (props: Props) => {
    handleSubmit,
    isFetching,
    isSendBtnDisabled,
-    isSuccess,
+    isSendMessage,
    onEmailChange,
  } = useRecovery(setIsModalOpen)

@ -50,7 +50,7 @@ export const RecoveryPopup = (props: Props) => {
          </HeaderTitle>
        </Header>
        <Body>
-          {isSuccess ? (
+          {isSendMessage ? (
            <Text>
              <T9n t='send_new_email_for_change_pass' />
            </Text>
@ -72,7 +72,7 @@ export const RecoveryPopup = (props: Props) => {
            </Fragment>
          )}
          <Footer>
-            {!isSuccess ? (
+            {!isSendMessage ? (
              <ApplyButton onClick={handleSubmit} disabled={isSendBtnDisabled}>
                {isFetching ? <ArrowLoader /> : <T9n t='send' />}
              </ApplyButton>