update forms to have success state

src/components/ChangeEmail.tsx

@@ -1,17 +1,17 @@
 import { Formik, FormikHelpers } from 'formik';
-import React, { useContext, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import * as Yup from 'yup';
 import constants from 'utils/strings/constants';
 import SubmitButton from 'components/SubmitButton';
 import router from 'next/router';
 import { changeEmail, getOTTForEmailChange } from 'services/userService';
-import { AppContext, FLASH_MESSAGE_TYPE } from 'pages/_app';
 import { getData, LS_KEYS, setData } from 'utils/storage/localStorage';
 import { PAGES } from 'constants/pages';
 import { Alert, TextField } from '@mui/material';
 import Container from './Container';
 import LinkButton from './pages/gallery/LinkButton';
 import FormPaperFooter from './Form/FormPaper/Footer';
+import { sleep } from 'utils/common';
 
 interface formValues {
     email: string;
@@ -22,9 +22,9 @@ function ChangeEmailForm() {
     const [loading, setLoading] = useState(false);
     const [ottInputVisible, setShowOttInputVisibility] = useState(false);
     const ottInputRef = useRef(null);
-    const appContext = useContext(AppContext);
     const [email, setEmail] = useState(null);
     const [showMessage, setShowMessage] = useState(false);
+    const [success, setSuccess] = useState(false);
 
     const requestOTT = async (
         { email }: formValues,
@@ -53,15 +53,14 @@ function ChangeEmailForm() {
             setLoading(true);
             await changeEmail(email, ott);
             setData(LS_KEYS.USER, { ...getData(LS_KEYS.USER), email });
-            appContext.setDisappearingFlashMessage({
-                message: constants.EMAIL_UDPATE_SUCCESSFUL,
-                type: FLASH_MESSAGE_TYPE.SUCCESS,
-            });
+            setLoading(false);
+            setSuccess(true);
+            await sleep(1000);
             router.push(PAGES.GALLERY);
         } catch (e) {
+            setLoading(false);
             setFieldError('ott', `${constants.INCORRECT_CODE}`);
         }
-        setLoading(false);
     };
 
     const goToGallery = () => router.push(PAGES.GALLERY);
@@ -118,6 +117,7 @@ function ChangeEmailForm() {
                                 />
                             )}
                             <SubmitButton
+                                success={success}
                                 sx={{ mt: 2 }}
                                 loading={loading}
                                 buttonText={

src/components/TwoFactor/VerifyForm.tsx

@@ -7,25 +7,39 @@ import SubmitButton from 'components/SubmitButton';
 import VerticallyCentered, { CenteredFlex } from 'components/Container';
 import { Box, Typography, TypographyProps } from '@mui/material';
 import InvalidInputMessage from './InvalidInputMessage';
+import { sleep } from 'utils/common';
 
 interface formValues {
     otp: string;
 }
 interface Props {
-    onSubmit: any;
+    onSubmit: VerifyTwoFactorCallback;
     buttonText: string;
 }
 
+export type VerifyTwoFactorCallback = (
+    otp: string,
+    markSuccessful: () => Promise<void>
+) => Promise<void>;
+
 export default function VerifyTwoFactor(props: Props) {
     const [waiting, setWaiting] = useState(false);
     const otpInputRef = useRef(null);
+    const [success, setSuccess] = useState(false);
+
+    const markSuccessful = async () => {
+        setWaiting(false);
+        setSuccess(true);
+        await sleep(1000);
+    };
+
     const submitForm = async (
         { otp }: formValues,
         { setFieldError, resetForm }: FormikHelpers<formValues>
     ) => {
         try {
             setWaiting(true);
-            await props.onSubmit(otp);
+            await props.onSubmit(otp, markSuccessful);
         } catch (e) {
             resetForm();
             for (let i = 0; i < 6; i++) {
@@ -83,6 +97,7 @@ export default function VerifyTwoFactor(props: Props) {
                         <SubmitButton
                             buttonText={props.buttonText}
                             loading={waiting}
+                            success={success}
                             disabled={values.otp.length < 6}
                         />
                     </form>