Refactor and README.md changes

TOPOFGR · TOPOFGR · commit 67a43576c9d2 · 2020-09-30T14:55:53.000-03:00
diff --git a/README.md b/README.md
@@ -88,6 +88,8 @@ React Firebase Admin is our in-house admin dashboard boilerplate, used in many o
 - [Format.js](https://formatjs.io/) (★ 11.7k) libraries for internationalization (see [docs](https://formatjs.io/docs/basic-internationalization-principles)).
 - [date-fns](https://date-fns.org/) (★ 22.3k) date utility library (see [docs](https://date-fns.org/docs/Getting-Started)).
 - [cross-env](https://github.com/kentcdodds/cross-env) (★ 4.9k) run scripts that set and use environment variables across platforms (see [docs](https://www.npmjs.com/package/cross-env)).
+- [React Hook Form](https://github.com/react-hook-form/react-hook-form) (★ 14.6k) Performant, flexible and extensible forms with easy to use validation.
+- [yup](https://github.com/jquense/yup) (★ 11k) schema builder for value parsing and validation.
 
 ### Unit Testing
 
diff --git a/src/components/UserForm/index.jsx b/src/components/UserForm/index.jsx
@@ -36,7 +36,7 @@ const UserForm = ({ isEditing, isProfile, user, onSubmitHandler, schema }) => {
       setValue('file', null);
     }
     return () => dispatch(usersCleanUp());
-  }, [dispatch, success]);
+  }, [dispatch, success, setValue]);
 
   const invalidEmailMessage = useFormatMessage('UserForm.invalidEmail');
 
diff --git a/src/pages/Login/index.jsx b/src/pages/Login/index.jsx
@@ -1,4 +1,3 @@
-/* eslint-disable no-nested-ternary */
 import React, { useEffect } from 'react';
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 import { Redirect, Link } from 'react-router-dom';
@@ -155,17 +154,18 @@ const Login = () => {
                           ref={register}
                         />
                       </div>
-                      {isEmailLink ? (
-                        errors.password ? (
-                          <ErrorMessage text={unsafePasswordMessage} />
-                        ) : (
-                          isValidPassword && (
-                            <p className="is-success">{safePasswordMessage}</p>
-                          )
-                        )
+                      {errors.password ? (
+                        <ErrorMessage
+                          text={
+                            isEmailLink
+                              ? unsafePasswordMessage
+                              : invalidPasswordMessage
+                          }
+                        />
                       ) : (
-                        errors.password && (
-                          <ErrorMessage text={invalidPasswordMessage} />
+                        isEmailLink &&
+                        isValidPassword && (
+                          <p className="is-success">{safePasswordMessage}</p>
                         )
                       )}
                     </div>
diff --git a/src/pages/Profile/ChangePassword/ChangePassword.test.js b/src/pages/Profile/ChangePassword/ChangePassword.test.js
@@ -26,67 +26,69 @@ describe('<ChangePassword /> rendering', () => {
     expect(component.asFragment()).toMatchSnapshot();
   });
 
-  it('should display an error message when the current and new password are equal', () => {
+  it('should display an error message when the current and new password are equal', async () => {
     const { component } = renderWithProviders(<ChangePassword />)({
       auth: {
         userData: {},
       },
     });
 
-    fireEvent.input(component.container.querySelector('input[name=current]'), {
+    fireEvent.input(component.getByTestId('current'), {
       target: {
         value: 'oldpassword',
       },
     });
 
-    fireEvent.input(component.container.querySelector('input[name=new]'), {
+    fireEvent.input(component.getByTestId('new'), {
       target: {
         value: 'oldpassword',
       },
     });
 
-    expect(component.container.querySelector('.error')).toBeTruthy();
+    await (() =>
+      expect(
+        component.getByText(
+          'The new password and the current one cannot be the same'
+        )
+      ).toBeTruthy());
   });
 
-  it('should display a message informing the user that the new password is secure', () => {
+  it('should display a message informing the user that the new password is secure', async () => {
     const { component } = renderWithProviders(<ChangePassword />)({
       auth: {
         userData: {},
       },
     });
 
-    fireEvent.input(component.container.querySelector('input[name=new]'), {
+    fireEvent.input(component.getByTestId('new'), {
       target: {
         value: 'newSecurePassword',
       },
     });
 
-    expect(component.container.querySelector('p.is-success')).toBeTruthy();
+    await (() => expect(component.getByText('Safe password')).toBeTruthy());
   });
 
-  it('should display a message informing the user that the new and confirmation passwords match', () => {
+  it('should display a message informing the user that the new and confirmation passwords match', async () => {
     const { component } = renderWithProviders(<ChangePassword />)({
       auth: {
         userData: {},
       },
     });
 
-    fireEvent.input(component.container.querySelector('input[name=new]'), {
+    fireEvent.input(component.getByTestId('new'), {
       target: {
         value: 'newSecurePassword!',
       },
     });
 
-    fireEvent.input(
-      component.container.querySelector('input[name=confirmation]'),
-      {
-        target: {
-          value: 'newSecurePassword!',
-        },
-      }
-    );
+    fireEvent.input(component.getByTestId('confirmation'), {
+      target: {
+        value: 'newSecurePassword!',
+      },
+    });
 
-    expect(component.container.querySelector('p.is-success')).toBeTruthy();
+    await (() => expect(component.getByText('Passwords match')).toBeTruthy());
   });
 
   it('should display the button loading when loading', () => {
@@ -117,31 +119,25 @@ describe('<ChangePassword /> actions', () => {
       },
     });
 
-    fireEvent.input(component.container.querySelector('input[name=current]'), {
+    fireEvent.input(component.getByTestId('current'), {
       target: {
         value: 'oldpassword',
       },
     });
 
-    fireEvent.input(
-      component.container.querySelector('input[name=confirmation]'),
-      {
-        target: {
-          value: 'newpassword',
-        },
-      }
-    );
-
-    fireEvent.input(
-      component.container.querySelector('input[name=confirmation]'),
-      {
-        target: {
-          value: 'newpassword',
-        },
-      }
-    );
-
-    fireEvent.submit(component.container.querySelector('form'));
+    fireEvent.input(component.getByTestId('new'), {
+      target: {
+        value: 'newpassword',
+      },
+    });
+
+    fireEvent.input(component.getByTestId('confirmation'), {
+      target: {
+        value: 'newpassword',
+      },
+    });
+
+    fireEvent.click(component.getByRole('button'));
 
     await (() => expect(actions.changeUserPassword).toBeCalledTimes(1));
 
diff --git a/src/pages/Profile/ChangePassword/__snapshots__/ChangePassword.test.js.snap b/src/pages/Profile/ChangePassword/__snapshots__/ChangePassword.test.js.snap
@@ -48,6 +48,7 @@ exports[`<ChangePassword /> rendering should render without crashing 1`] = `
               >
                 <input
                   class="input"
+                  data-testid="current"
                   name="current"
                   type="password"
                 />
@@ -79,6 +80,7 @@ exports[`<ChangePassword /> rendering should render without crashing 1`] = `
               >
                 <input
                   class="input"
+                  data-testid="new"
                   name="new"
                   type="password"
                 />
@@ -109,6 +111,7 @@ exports[`<ChangePassword /> rendering should render without crashing 1`] = `
               >
                 <input
                   class="input"
+                  data-testid="confirmation"
                   name="confirmation"
                   type="password"
                 />
diff --git a/src/pages/Profile/ChangePassword/index.jsx b/src/pages/Profile/ChangePassword/index.jsx
@@ -35,6 +35,7 @@ const ChangePasswordCard = () => {
   const dispatch = useDispatch();
 
   const { register, handleSubmit, watch, setValue, errors } = useForm({
+    mode: 'onChange',
     defaultValues: {
       current: '',
       new: '',
@@ -53,14 +54,8 @@ const ChangePasswordCard = () => {
   }, [dispatch, changedPassword]);
 
   const newPassword = watch('new');
-  const currentPassword = watch('current');
   const confirmationPassword = watch('confirmation');
 
-  const isNewPasswordSecure = newPassword && newPassword.length >= 6;
-
-  const isCurrentPasswordInvalid =
-    currentPassword && currentPassword.length < 6;
-
   const invalidPasswordMessage = useFormatMessage(
     `ChangePassword.invalidPassword`
   );
@@ -71,11 +66,6 @@ const ChangePasswordCard = () => {
     `ChangePassword.insecurePassword`
   );
 
-  const insecurePasswordError = <ErrorMessage text={insecurePasswordMessage} />;
-
-  const newPasswordsAreEqual =
-    newPassword && confirmationPassword && newPassword === confirmationPassword;
-
   const passwordsMatchMessagge = useFormatMessage(
     `ChangePassword.matchPassword`
   );
@@ -84,15 +74,8 @@ const ChangePasswordCard = () => {
     `ChangePassword.notMatchPassword`
   );
 
-  const notMatchPasswordError = <ErrorMessage text={notMatchPasswordMessage} />;
-
-  const currentAndNewPasswordsEqual =
-    newPassword && currentPassword === newPassword;
-
   const samePasswordMessage = useFormatMessage(`ChangePassword.samePassword`);
 
-  const samePasswordError = <ErrorMessage text={samePasswordMessage} />;
-
   const onSubmitHandler = ({ current, confirmation }) => {
     dispatch(changeUserPassword(current, confirmation));
   };
@@ -119,18 +102,18 @@ const ChangePasswordCard = () => {
               <div className="field">
                 <div className="control">
                   <input
+                    data-testid="current"
                     className={classNames('input', {
-                      'is-danger': isCurrentPasswordInvalid,
+                      'is-danger': errors.current,
                     })}
                     type="password"
                     name="current"
                     ref={register}
                   />
                 </div>
-                {isCurrentPasswordInvalid ||
-                  (errors.current && (
-                    <ErrorMessage text={invalidPasswordMessage} />
-                  ))}
+                {errors.current && (
+                  <ErrorMessage text={invalidPasswordMessage} />
+                )}
               </div>
             </div>
           </div>
@@ -145,20 +128,29 @@ const ChangePasswordCard = () => {
               <div className="field">
                 <div className="control">
                   <input
+                    data-testid="new"
                     className={classNames(
                       `input`,
-                      { 'is-success': isNewPasswordSecure },
-                      { 'is-danger': newPassword && !isNewPasswordSecure }
+                      { 'is-success': newPassword && !errors.new },
+                      { 'is-danger': errors.new }
                     )}
                     type="password"
                     name="new"
                     ref={register}
                   />
                 </div>
-                {isNewPasswordSecure ? (
-                  <p className="is-success">{safePasswordMessage}</p>
+                {errors.new ? (
+                  <ErrorMessage
+                    text={
+                      newPassword.length < 6
+                        ? insecurePasswordMessage
+                        : samePasswordMessage
+                    }
+                  />
                 ) : (
-                  newPassword && insecurePasswordError
+                  newPassword && (
+                    <p className="is-success">{safePasswordMessage}</p>
+                  )
                 )}
               </div>
             </div>
@@ -174,23 +166,28 @@ const ChangePasswordCard = () => {
               <div className="field">
                 <div className="control">
                   <input
+                    data-testid="confirmation"
                     className={classNames(
                       `input`,
-                      { 'is-success': newPasswordsAreEqual },
                       {
-                        'is-danger':
-                          confirmationPassword && !newPasswordsAreEqual,
+                        'is-success':
+                          confirmationPassword && !errors.confirmation,
+                      },
+                      {
+                        'is-danger': errors.confirmation,
                       }
                     )}
                     type="password"
                     name="confirmation"
                     ref={register}
                   />
                 </div>
-                {newPasswordsAreEqual ? (
-                  <p className="is-success">{passwordsMatchMessagge}</p>
+                {errors.confirmation ? (
+                  <ErrorMessage text={notMatchPasswordMessage} />
                 ) : (
-                  confirmationPassword && notMatchPasswordError
+                  confirmationPassword && (
+                    <p className="is-success">{passwordsMatchMessagge}</p>
+                  )
                 )}
               </div>
             </div>
@@ -207,7 +204,6 @@ const ChangePasswordCard = () => {
                     {useFormatMessage(`ChangePassword.submits`)}
                   </button>
                 </div>
-                {currentAndNewPasswordsEqual && samePasswordError}
               </div>
             </div>
           </div>
diff --git a/src/pages/Profile/__snapshots__/Profile.test.js.snap b/src/pages/Profile/__snapshots__/Profile.test.js.snap
@@ -408,6 +408,7 @@ exports[`<Profile /> rendering should render without crashing 1`] = `
                 >
                   <input
                     class="input"
+                    data-testid="current"
                     name="current"
                     type="password"
                   />
@@ -439,6 +440,7 @@ exports[`<Profile /> rendering should render without crashing 1`] = `
                 >
                   <input
                     class="input"
+                    data-testid="new"
                     name="new"
                     type="password"
                   />
@@ -469,6 +471,7 @@ exports[`<Profile /> rendering should render without crashing 1`] = `
                 >
                   <input
                     class="input"
+                    data-testid="confirmation"
                     name="confirmation"
                     type="password"
                   />
diff --git a/src/pages/User/__snapshots__/User.test.js.snap b/src/pages/User/__snapshots__/User.test.js.snap
diff --git a/src/pages/Users/index.jsx b/src/pages/Users/index.jsx

Original file line number	Diff line number	Diff line change
`@@ -36,7 +36,7 @@ const UserForm = ({ isEditing, isProfile, user, onSubmitHandler, schema }) => {`
`36`	`36`	`setValue('file', null);`
`37`	`37`	`}`
`38`	`38`	`return () => dispatch(usersCleanUp());`
`39`		`- }, [dispatch, success]);`
	`39`	`+ }, [dispatch, success, setValue]);`
`40`	`40`
`41`	`41`	`const invalidEmailMessage = useFormatMessage('UserForm.invalidEmail');`
`42`	`42`