refactor: ⚡ password and username components

Containers/UserSettings/PasswordSettings/PasswordSettings.tsx

@@ -1,17 +1,22 @@
 //Lib
-import { toast } from 'react-toastify';
+import { toast, ToastOptions } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import classes from '../UserSettings.module.css';
-import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { SpinnerDotted } from 'spinners-react';
 
 //Components
-import Error from '../../../Components/UI/Error/Error';
+import Error from '~/Components/UI/Error/Error';
+import { useFormStatus } from '~/hooks/useFormStatus';
 
-export default function PasswordSettings(props) {
+type PasswordDataForm = {
+  oldPassword: string;
+  newPassword: string;
+};
+
+export default function PasswordSettings() {
   //Var
-  const toastOptions = {
+  const toastOptions: ToastOptions = {
     position: 'top-right',
     autoClose: 5000,
     hideProgressBar: false,
@@ -26,21 +31,15 @@ export default function PasswordSettings(props) {
     handleSubmit,
     reset,
     formState: { errors, isSubmitting, isValid },
-  } = useForm({ mode: 'onChange' });
+  } = useForm<PasswordDataForm>({ mode: 'onChange' });
 
-  ////State
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState();
+  const { isLoading, error, setIsLoading, handleError, clearError } = useFormStatus();
 
   ////Functions
-  //Form submit Handler for ADD a repo
-  const formSubmitHandler = async (data) => {
-    console.log(data);
-    //Remove old error
-    setError();
-    //Loading button on submit to avoid multiple send.
+  const formSubmitHandler = async (data: PasswordDataForm) => {
+    clearError();
     setIsLoading(true);
-    //POST API to send the new and old password
+
     try {
       const response = await fetch('/api/account/updatePassword', {
         method: 'PUT',
@@ -54,8 +53,7 @@ export default function PasswordSettings(props) {
       if (!response.ok) {
         setIsLoading(false);
         reset();
-        setError(result.message);
-        setTimeout(() => setError(), 4000);
+        handleError(result.message);
       } else {
         reset();
         setIsLoading(false);
@@ -64,8 +62,7 @@ export default function PasswordSettings(props) {
     } catch (error) {
       reset();
       setIsLoading(false);
-      setError("Can't update your password. Contact your administrator.");
-      setTimeout(() => setError(), 4000);
+      handleError('Failed to update password. Please try again.');
     }
   };
   return (

Containers/UserSettings/UserSettings.tsx

@@ -81,7 +81,7 @@ export default function UserSettings(props: UserSettingsProps) {
       </div>
       {tab === 'General' && (
         <>
-          <PasswordSettings username={props.data.user?.name ?? undefined} />
+          <PasswordSettings />
           <EmailSettings email={props.data.user?.email ?? undefined} />
           <UsernameSettings username={props.data.user?.name ?? undefined} />{' '}
         </>

Containers/UserSettings/UsernameSettings/UsernameSettings.tsx

@@ -1,5 +1,5 @@
 //Lib
-import { toast } from 'react-toastify';
+import { toast, ToastOptions } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import classes from '../UserSettings.module.css';
 import { useState } from 'react';
@@ -7,12 +7,21 @@ import { useForm } from 'react-hook-form';
 import { SpinnerDotted } from 'spinners-react';
 
 //Components
-import Error from '../../../Components/UI/Error/Error';
-import Info from '../../../Components/UI/Info/Info';
+import Error from '~/Components/UI/Error/Error';
+import Info from '~/Components/UI/Info/Info';
+import { useFormStatus } from '~/hooks/useFormStatus';
 
-export default function UsernameSettings(props) {
+type UsernameDataForm = {
+  username: string;
+};
+
+type UsernameSettingsProps = {
+  username?: string;
+};
+
+export default function UsernameSettings(props: UsernameSettingsProps) {
   //Var
-  const toastOptions = {
+  const toastOptions: ToastOptions = {
     position: 'top-right',
     autoClose: 8000,
     hideProgressBar: false,
@@ -27,21 +36,18 @@ export default function UsernameSettings(props) {
     handleSubmit,
     reset,
     formState: { errors, isSubmitting, isValid },
-  } = useForm({ mode: 'onChange' });
+  } = useForm<UsernameDataForm>({ mode: 'onChange' });
+
+  const { isLoading, error, setIsLoading, handleError, clearError } = useFormStatus();
 
   ////State
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState();
   const [info, setInfo] = useState(false);
 
   ////Functions
-  //Form submit Handler for ADD a repo
-  const formSubmitHandler = async (data) => {
-    //Remove old error
-    setError();
-    //Loading button on submit to avoid multiple send.
+  const formSubmitHandler = async (data: UsernameDataForm) => {
+    clearError();
     setIsLoading(true);
-    //POST API to update the username
+
     try {
       const response = await fetch('/api/account/updateUsername', {
         method: 'PUT',
@@ -55,8 +61,7 @@ export default function UsernameSettings(props) {
       if (!response.ok) {
         setIsLoading(false);
         reset();
-        setError(result.message);
-        setTimeout(() => setError(), 4000);
+        handleError(result.message);
       } else {
         reset();
         setIsLoading(false);
@@ -66,8 +71,7 @@ export default function UsernameSettings(props) {
     } catch (error) {
       reset();
       setIsLoading(false);
-      setError("Can't update your username. Contact your administrator.");
-      setTimeout(() => setError(), 4000);
+      handleError('Failed to update username. Please try again.');
     }
   };
   return (
@@ -84,7 +88,7 @@ export default function UsernameSettings(props) {
               //at the time this code is written to refresh client-side session information
               //without triggering a logout.
               //I chose to inform the user to reconnect rather than force logout.
-              <Info message='Please, logout to update your session.' />
+              <Info message='Please, logout to update your session' />
             ) : (
               <form
                 onSubmit={handleSubmit(formSubmitHandler)}
@@ -99,7 +103,7 @@ export default function UsernameSettings(props) {
                       required: 'A username is required.',
                       pattern: {
                         value: /^[a-z]{5,15}$/,
-                        message: 'Only a-z characters are allowed.',
+                        message: 'Only a-z characters are allowed',
                       },
                       maxLength: {
                         value: 10,