Disabled button in settings when no change made (#1178)

* disabled button * Update packages/files-ui/src/Components/Modules/Settings/Profile.tsx Co-authored-by: Ryan Noble <ryanjnoble@gmail.com> Co-authored-by: Ryan Noble <ryanjnoble@gmail.com>
ChainSafe · Jun 24, 2021 · d19e0c6 · d19e0c6
1 parent 4da1a71
commit d19e0c6
Showing 1 changed file with 27 additions and 26 deletions.
diff --git a/packages/files-ui/src/Components/Modules/Settings/Profile.tsx b/packages/files-ui/src/Components/Modules/Settings/Profile.tsx
@@ -17,7 +17,7 @@ import {
   useThemeSwitcher
 } from "@chainsafe/common-theme"
 import { LockIcon, CopyIcon } from "@chainsafe/common-components"
-import { Formik, Form } from "formik"
+import { Form, useFormik, FormikProvider } from "formik"
 import { useUser } from "../../../Contexts/UserContext"
 import { t, Trans } from "@lingui/macro"
 import { centerEllipsis } from "../../../Utils/Helpers"
@@ -177,6 +177,13 @@ const useStyles = makeStyles(({ constants, breakpoints, palette, typography }: C
   })
 )
 
+const profileValidation = yup.object().shape({
+  // email: yup.string().email("Email is invalid").required("Email is required"),
+  firstName: yup.string(),
+  lastName: yup.string(),
+  username: yup.string()
+})
+
 const ProfileView = () => {
   const { themeKey, setTheme } = useThemeSwitcher()
   const { addToastMessage } = useToaster()
@@ -186,7 +193,22 @@ const ProfileView = () => {
   const [showUsernameForm, setShowUsernameForm] = useState(false)
   const [username, setUsername] = useState("")
   const [usernameData, setUsernameData] = useState({ error: "", loading: false })
-
+  const formik = useFormik({
+    initialValues:{
+      firstName: profile?.firstName || "",
+      lastName: profile?.lastName || ""
+      // email: profile?.email || ""
+    },
+    onSubmit: (values) => {
+      onUpdateProfile(
+        values.firstName || "",
+        values.lastName || ""
+        // values.email || ""
+      )
+    },
+    validationSchema: profileValidation,
+    validateOnChange: false
+  })
   const onUpdateProfile = async (firstName: string, lastName: string) => {
     try {
       setUpdatingProfile(true)
@@ -234,13 +256,6 @@ const ProfileView = () => {
     }
   }
 
-  const profileValidation = yup.object().shape({
-    // email: yup.string().email("Email is invalid").required("Email is required"),
-    firstName: yup.string(),
-    lastName: yup.string(),
-    username: yup.string()
-  })
-
   const onLookupUsername = useCallback((username: string) => {
     lookupOnUsername(username).then((doesUsernameExist) => {
       if (doesUsernameExist) {
@@ -449,22 +464,7 @@ const ProfileView = () => {
                   }
                 </div>
               }
-              <Formik
-                initialValues={{
-                  firstName: profile?.firstName || "",
-                  lastName: profile?.lastName || ""
-                  // email: profile?.email || ""
-                }}
-                onSubmit={(values) => {
-                  onUpdateProfile(
-                    values.firstName || "",
-                    values.lastName || ""
-                    // values.email || ""
-                  )
-                }}
-                validationSchema={profileValidation}
-                validateOnChange={false}
-              >
+              <FormikProvider value={formik}>
                 <Form>
                   <div className={classes.inputBoxContainer}>
                     <Typography
@@ -525,6 +525,7 @@ const ProfileView = () => {
                     variant={themeKey === "dark" ? "outline" : "primary"}
                     loadingText="Saving"
                     data-cy="profile-save-button"
+                    disabled={!formik.dirty}
                   >
                     <LockIcon className={classes.icon} />
                     {"  "}
@@ -533,7 +534,7 @@ const ProfileView = () => {
                     </Typography>
                   </Button>
                 </Form>
-              </Formik>
+              </FormikProvider>
             </div>
           </div>
           {/* <div id="deletion" className={classes.sectionContainer}>