feat(edit profile): providing feedback to the user after editing thei…

…r profile successfully

useRef was used for timeoutID and a variable was implemented to store the message value. The
notification is triggered if the profile is saved successfully

#1524

pages/perfil/index.public.js

@@ -37,6 +37,7 @@ function EditProfileForm() {
   const usernameRef = useRef('');
   const emailRef = useRef('');
   const notificationsRef = useRef('');
+  const successTimeoutRef = useRef('');
 
   useEffect(() => {
     if (router && !user && !userIsLoading) {
@@ -55,6 +56,7 @@ function EditProfileForm() {
   }, [fetchUser]);
 
   const [globalErrorMessage, setGlobalErrorMessage] = useState(false);
+  const [globalSuccessMessage, setGlobalSuccessMessage] = useState(null);
   const [isLoading, setIsLoading] = useState(false);
   const [errorObject, setErrorObject] = useState(undefined);
   const [emailDisabled, setEmailDisabled] = useState(false);
@@ -146,6 +148,14 @@ function EditProfileForm() {
             type: 'confirmation',
           });
           setEmailDisabled(true);
+        } else {
+          clearTimeout(successTimeoutRef.current);
+
+          setGlobalSuccessMessage('Salvo com sucesso!');
+
+          successTimeoutRef.current = setTimeout(() => {
+            setGlobalSuccessMessage(null);
+          }, 5000);
         }
 
         setIsLoading(false);
@@ -174,6 +184,8 @@ function EditProfileForm() {
       <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
         {globalErrorMessage && <Flash variant="danger">{globalErrorMessage}</Flash>}
 
+        {globalSuccessMessage && <Flash variant="success">{globalSuccessMessage}</Flash>}
+
         <FormControl id="username">
           <FormControl.Label>Nome de usuário</FormControl.Label>
           <TextInput