Diversas melhorias e toasts aparecem em redirecionamentos de páginas

src/pages/Cadastro/Cadastro.tsx

@@ -8,6 +8,7 @@ import ModalExample from '../../components/Email';
 import * as UsersService from '../../services/api/users'
 import LocalStorage from '../../LocalStorage';
 import { UserContext } from '../../App';
+import { Color } from '@ionic/react/node_modules/@ionic/core';
 
 const Cadastro: React.FC = () => {
   const history = useHistory();
@@ -15,7 +16,8 @@ const Cadastro: React.FC = () => {
   const user = useContext(UserContext);
   
   const [showToast, setShowToast] = useState(false);
-  const [messageToast, setMessageToast ] = useState('');
+  const [messageToast, setMessageToast] = useState('');
+  const [toastColor, setToastColor] = useState<Color>("primary");
 
   const [email, setEmail] = useState<string>('');
   const [password, setPassword] = useState<string>('');
@@ -57,7 +59,7 @@ const Cadastro: React.FC = () => {
       clearResult();
 
       if(!emailValidate()) {
-          lResult.error = 'O EMAIL é inválido!';
+          lResult.error = 'E-mail inválido!';
           lResult.success = false;
           return lResult;
       } else if(password.length < 7 || password.length > 12) { //TODO: validar de acordo com a documentação
@@ -70,9 +72,20 @@ const Cadastro: React.FC = () => {
   };
 
   const handleSubmit = async () => {
+    if(name === '' || email === '' || birthDate === '' || password === '' || confirmPassword === '') {
+      setToastColor("warning")
+      setMessageToast('Nenhum campo pode estar vazio!');
+      setShowToast(true);
+      return
+    }
+    
+    if(password !== confirmPassword) {
+      setToastColor("warning")
+      setMessageToast('As senhas devem ser iguais!');
+      setShowToast(true);
+      return
+    }
       
-    if(name != '' && email != '' && birthDate != '' && password != '' && confirmPassword != '') {
-      if(password === confirmPassword){
     const signUpForm = {
       name: firstName,
       lastname: lastName,
@@ -82,38 +95,33 @@ const Cadastro: React.FC = () => {
     }
 
     let result = fieldValidate();
-        if((await result).success) {
+    if(!(await result).success) {
+      setToastColor("warning")
+      setMessageToast(lResult.error);
+      setShowToast(true);
+      return
+    }
 
     let retorno = await UsersService.create(signUpForm);
-            console.log(retorno);
+
-            if(retorno.token) {
+    if(!retorno.token) {
-                // let signIn = await Api.signIn(email, passwordField); 
+      setToastColor('danger')
-                // if(signIn.token) {
+      setMessageToast(retorno.message);
-                    // await AsyncStorage.setItem('token', signIn.token);
+      setShowToast(true);
-                    // await AsyncStorage.setItem('cpf', retorno.cpf);
+      return
+    }
 
     LocalStorage.setToken(retorno.token.token);
 
     user.setIsLoggedIn(true);
 
-                    history.push('home');
+    history.push({ pathname: '/home', state: {
-
+      redirectData: {
-            } else {
+        showToastMessage: true,
-              setMessageToast(retorno.message);
+        toastColor: "success",
-              setShowToast(true);
+        toastMessage: "Usuário cadastrado com sucesso!",
-            }
-        } else{
-          setMessageToast(lResult.error);
-          setShowToast(true);
-        }
-      } else {
-        setMessageToast('As senhas devem ser iguais!');
-        setShowToast(true);
-      }
-    } else {
-      setMessageToast('Nenhum campo pode ser nulo!');
-      setShowToast(true);
       }
+    }})
   };
 
   const { name } = useParams<{ name: string; }>();
@@ -135,14 +143,6 @@ const Cadastro: React.FC = () => {
                 <IonCardTitle>Cadastro</IonCardTitle>
               </IonCol>
             </IonRow>
-            {/* <IonItem>
-              <IonIcon icon={logoFacebook} />
-              Continuar com Facebook
-            </IonItem>
-            <IonItem>
-              <IonIcon icon={mail} />
-              Continuar com e-mail
-            </IonItem> */}
             <IonRow>
                 <IonCol size="12">
                   <div id='nome-sobrenome'>
@@ -151,7 +151,7 @@ const Cadastro: React.FC = () => {
                       <IonInput 
                         type='text'
                         clearInput
-                        onIonInput={(e: any) => setFirstName(e.target.value)}
+                        onIonChange={(e: any) => setFirstName(e.target.value)}
                       >
                       </IonInput>
                     </IonItem>
@@ -159,7 +159,7 @@ const Cadastro: React.FC = () => {
                       <IonLabel position='floating'>Sobrenome</IonLabel>
                       <IonInput 
                         clearInput
-                        onIonInput={(e: any) => setLastName(e.target.value)}
+                        onIonChange={(e: any) => setLastName(e.target.value)}
                       >
                       </IonInput>
                     </IonItem>
@@ -170,7 +170,7 @@ const Cadastro: React.FC = () => {
                     <IonInput 
                       clearInput 
                       type='email'
-                      onIonInput={(e: any) => setEmail(e.target.value)}
+                      onIonChange={(e: any) => setEmail(e.target.value)}
                     >
                     </IonInput>
                   </IonItem>
@@ -179,7 +179,7 @@ const Cadastro: React.FC = () => {
                     <IonLabel position='stacked'>Data de nascimento</IonLabel>
                     <IonInput 
                       type='date'
-                      onIonInput={(e: any) => setBirthDate(e.target.value)}
+                      onIonChange={(e: any) => setBirthDate(e.target.value)}
                     >
                     </IonInput>
                   </IonItem>
@@ -189,7 +189,7 @@ const Cadastro: React.FC = () => {
                     <IonInput 
                       clearInput 
                       type='password'
-                      onIonInput={(e: any) => setPassword(e.target.value)}
+                      onIonChange={(e: any) => setPassword(e.target.value)}
                     ></IonInput>
                   </IonItem>
                   <IonItem>
@@ -197,7 +197,7 @@ const Cadastro: React.FC = () => {
                     <IonInput 
                       clearInput 
                       type='password'
-                      onIonInput={(e: any) => setConfirmPassword(e.target.value)}
+                      onIonChange={(e: any) => setConfirmPassword(e.target.value)}
                     ></IonInput>
                   </IonItem>
                   
@@ -210,9 +210,9 @@ const Cadastro: React.FC = () => {
             <Action message="Já tem conta?" text="Login" link="/login" />
         </IonGrid>
         {/* <IonProgressBar type="indeterminate"></IonProgressBar><br /> */}
+
         <IonToast
-          // cssClass={"toast-notification"}
+          color={toastColor}
-          color='danger'      
           isOpen={showToast}
           onDidDismiss={() => setShowToast(false)}
           message={messageToast}

src/pages/CadastroCompletar/CadastroCompletar.tsx

@@ -10,15 +10,25 @@ IonItem,
 IonLabel,
 IonPage,
 IonTitle,
+IonToast,
 IonToolbar
 } from "@ionic/react";
-import React, { useEffect, useReducer } from "react";
+import React, { useEffect, useReducer, useState } from "react";
 
 import '../Perfil.css'
 import { useHistory, useLocation } from "react-router";
 import { callOutline, documentTextOutline } from "ionicons/icons";
 
 import '../Cadastro/Cadastro.css'
+import { Color } from "@ionic/react/node_modules/@ionic/core";
+
+interface cardItem {
+  icon: string;
+  label: string;
+  description: string;
+  url: string;
+  required: boolean;
+}
 
 interface userData {
   name: string;
@@ -32,15 +42,13 @@ interface userData {
 }
 
 interface LocationState {
-  userData: userData
+  userData: userData;
-}
   
-interface cardItem {
+  redirectData?: {
-  icon: string;
+    showToastMessage: boolean;
-  label: string;
+    toastColor: Color;
-  description: string;
+    toastMessage: string;
-  url: string;
+  }
-  required: boolean;
 }
 
 let items: cardItem[] = [
@@ -64,17 +72,31 @@ const CadastroCompletar: React.FC = () => {
   const history = useHistory();
   const location = useLocation<LocationState>();
 
+  const [showToast, setShowToast] = useState(false);
+  const [toastMessage, setToastMessage] = useState('');
+  const [toastColor, setToastColor] = useState<Color>("primary");
+
   const handleCardClick = (item: cardItem) => {
     if (!item.required) return
 
-    history.push({ pathname: item.url }); 
+    history.push({ pathname: item.url, state: { userData: location.state.userData } }); 
   }
 
   useEffect(() => {
-    if (!location.state) {
+    if (!location.state || !location.state.userData) {
       history.push({ pathname: '/perfil' })
     }
 
+    if (location.state && location.state.redirectData) {
+      const redirectData = location.state.redirectData
+
+      if (redirectData.showToastMessage) {
+        setToastColor(redirectData.toastColor)
+        setToastMessage(redirectData.toastMessage)
+        setShowToast(true)
+      }
+    }
+
     if (!location.state.userData.document) items[0].required = true
     if (!location.state.userData.phone_number) items[1].required = true
   }, []);
@@ -103,6 +125,15 @@ const CadastroCompletar: React.FC = () => {
             </IonCard>
           )
         })}
+
+        <IonToast
+          position="top"
+          color={toastColor}
+          isOpen={showToast}
+          onDidDismiss={() => setShowToast(false)}
+          message={toastMessage}
+          duration={2500}
+        />
       </IonContent>
     </IonPage>
   );

src/pages/CadastroCompletar/CompletarDocumento.tsx

@@ -34,7 +34,24 @@ interface documentTypesInterface {
   name: string;
 }
 
+interface userData {
+  name: string;
+  lastname: string;
+  email: string;
+  phone_number: string;
+  birth_date: string;
+  bio: string;
+  document_type: string;
+  document: string;
+}
+
+interface LocationState {
+  userData: userData;
+}
+  
 const CompletarDocumento: React.FC = () => {
+  const location = useLocation<LocationState>();
+
   const [hasChangedSinceInitialState, setHasChangedSinceInitialState] = useState(false);
 
   const [documentTypes, setDocumentTypes] = useState<documentTypesInterface[]>([]);
@@ -48,16 +65,8 @@ const CompletarDocumento: React.FC = () => {
   const [messageToast, setMessageToast] = useState('');
   
   const history = useHistory();
-  const location = useLocation();
-
-  useEffect(() => {
-    if (!location.state) {
-      history.push({ pathname: '/perfil/completar' })
-    }
-  }, [])
 
   const validateform = () => {
-    console.log(document)
     if (isNaN((Number)(document))) {
       setMessageToast('Documento pode conter apenas números!')
       setShowToast(true)
@@ -86,7 +95,13 @@ const CompletarDocumento: React.FC = () => {
         return
       }
 
-      console.log(response)
+      history.push({ pathname: '/perfil', state: {
+        redirectData: {
+          showToastMessage: true,
+          toastColor: "success",
+          toastMessage: response.message,
+        }
+      }})
     }).catch((err) => {
       setMessageToast(err);
       setShowToast(true);
@@ -111,6 +126,16 @@ const CompletarDocumento: React.FC = () => {
   }
 
   useEffect(() => {
+    if (!location.state.userData) {
+      history.push({ pathname: '/perfil', state: {
+        redirectData: {
+          showToastMessage: true,
+          toastColor: "warning",
+          toastMessage: "Houve um erro. Por favor, tente novamente.",
+        }, userData: location.state.userData
+      }})      
+    }
+
     setDocumentTypes([
       {
         name: 'cpf',
@@ -178,6 +203,7 @@ const CompletarDocumento: React.FC = () => {
         </IonFab>
 
         <IonToast
+          position="top"
           color='danger'      
           isOpen={showToast}
           onDidDismiss={() => setShowToast(false)}

src/pages/CadastroCompletar/CompletarTelefone.tsx

@@ -8,13 +8,11 @@ import {
   IonIcon,
   IonList,
   IonPage,
-  IonSelect,
-  IonSelectOption,
   IonTitle,
   IonToast,
   IonToolbar
 } from "@ionic/react";
-import React, {  useEffect, useState } from "react";
+import React, { useState, useEffect } from "react";
 import { IonGrid, IonRow, IonCol } from "@ionic/react";
 import { useHistory, useLocation } from "react-router-dom";
 import {
@@ -26,28 +24,40 @@ import {
 import { saveOutline } from "ionicons/icons";
 
 import * as usersRoutes from '../../services/api/users';
+import { Color } from "@ionic/react/node_modules/@ionic/core";
 
 interface documentTypesInterface {
   label: string;
   name: string;
 }
 
+interface userData {
+  name: string;
+  lastname: string;
+  email: string;
+  phone_number: string;
+  birth_date: string;
+  bio: string;
+  document_type: string;
+  document: string;
+}
+
+interface LocationState {
+  userData: userData;
+}
+
 const CompletarTelefone: React.FC = () => {
+  const location = useLocation<LocationState>();
+
   const [hasChangedSinceInitialState, setHasChangedSinceInitialState] = useState(false);
 
   const [phone, setPhone] = useState('');
 
   const [showToast, setShowToast] = useState(false);
   const [messageToast, setMessageToast] = useState('');
+  const [toastColor, setToastColor] = useState<Color>("primary");
   
   const history = useHistory();
-  const location = useLocation();
-
-  useEffect(() => {
-    if (!location.state) {
-      history.push({ pathname: '/perfil/completar' })
-    }
-  }, [])
 
   const validateform = () => {
     if (isNaN((Number)(phone))) {
@@ -66,19 +76,40 @@ const CompletarTelefone: React.FC = () => {
 
     usersRoutes.update({ phone_number: phone }).then(response => {
       if (response.status === 'error') {
+        setToastColor("warning")
         setMessageToast(response.message);
         setShowToast(true);
 
         return
       }
 
-      console.log(response)
+      const userDataObj = location.state.userData
+
+      history.push({ pathname: '/perfil', state: {
+        redirectData: {
+          showToastMessage: true,
+          toastColor: "success",
+          toastMessage: response.message,
+        },
+      }})
     }).catch((err) => {
       setMessageToast(err);
       setShowToast(true);
     })
   };
 
+  useEffect(() => {
+    if (!location.state.userData) {
+      history.push({ pathname: '/perfil', state: {
+        redirectData: {
+          showToastMessage: true,
+          toastColor: "warning",
+          toastMessage: "Houve um erro. Por favor, tente novamente.",
+        }
+      }})      
+    }
+  }, [])
+
   return (
     <IonPage>
       <IonHeader>
@@ -122,7 +153,8 @@ const CompletarTelefone: React.FC = () => {
         </IonFab>
 
         <IonToast
-        color='danger'      
+          position="top"
+          color={toastColor}     
           isOpen={showToast}
           onDidDismiss={() => setShowToast(false)}
           message={messageToast}

src/pages/CadastroVan.tsx

@@ -19,6 +19,7 @@ import {
 } from "@ionic/react";
 
 import React, { useEffect, useReducer, useState } from "react";
+import { useHistory } from "react-router-dom";
 
 // import * as yup from 'yup';
 
@@ -27,10 +28,14 @@ import carsService from '../services/functions/carsService'
 import * as vansRoutes from '../services/api/vans';
 
 import "./CadastroVan.css";
+import { Color } from "@ionic/react/node_modules/@ionic/core";
 
 const CadastroVan: React.FC = () => {
+  const history = useHistory();
+  
   const [showToast, setShowToast] = useState<boolean>(false);
   const [toastMessage, setToastMessage] = useState<string>("");
+  const [toastColor, setToastColor] = useState<Color>("primary");
 
   const [carModels, setCarModels] = useState([{
     id_model: '',
@@ -174,8 +179,15 @@ const CadastroVan: React.FC = () => {
         return
       }
 
-      console.log(response)
+      history.push({ pathname: '/perfil', state: {
+        redirectData: {
+          showToastMessage: true,
+          toastColor: "success",
+          toastMessage: response.message,
+        },
+      }})
     }).catch((err) => {
+      setToastColor("danger")
       setToastMessage(err);
       setShowToast(true);
     })
@@ -188,7 +200,9 @@ const CadastroVan: React.FC = () => {
       const carModelsRes = await carsService.getAllCarModels()
   
       if (carModelsRes.error) {
-        console.log('Houve um erro')
+        setToastColor("danger")
+        setToastMessage(carModelsRes.error.errorMessage);
+        setShowToast(true);
         return
       }
   
@@ -333,6 +347,15 @@ const CadastroVan: React.FC = () => {
           duration={2500}
         />
       </IonContent>
+
+      <IonToast
+        position="top"
+        color={toastColor}      
+        isOpen={showToast}
+        onDidDismiss={() => setShowToast(false)}
+        message={toastMessage}
+        duration={2500}
+      />
     </IonPage>
   );
 };

src/pages/Home.tsx

@@ -1,17 +1,40 @@
-import { IonButton, IonContent, IonPage } from '@ionic/react';
+import { IonContent, IonPage, IonToast } from '@ionic/react';
-import { useContext, useEffect } from 'react';
+import { Color } from '@ionic/react/node_modules/@ionic/core';
-import { useHistory } from 'react-router';
+import { useContext, useEffect, useState } from 'react';
+import { useLocation } from 'react-router';
 
 import { UserContext } from '../App';
 
 import * as sessionRoutes from '../services/api/session';
 
+interface LocationState {
+  redirectData?: {
+    showToastMessage: boolean;
+    toastColor: Color;
+    toastMessage: string;
+  }
+}
+
 const Home: React.FC = () => {
-  const history = useHistory()
+  const location = useLocation<LocationState>();
 
   const user = useContext(UserContext);
 
+  const [showToast, setShowToast] = useState(false);
+  const [toastMessage, setToastMessage] = useState('');
+  const [toastColor, setToastColor] = useState<Color>("primary");
+
   useEffect(() => {
+    if (location.state && location.state.redirectData) {
+      const redirectData = location.state.redirectData
+
+      if (redirectData.showToastMessage) {
+        setToastColor(redirectData.toastColor)
+        setToastMessage(redirectData.toastMessage)
+        setShowToast(true)
+      }
+    }
+
     const refreshUserToken = async () => {
       await sessionRoutes.refresh().then(response => {
         if (response.status === 'error') {
@@ -33,12 +56,19 @@ const Home: React.FC = () => {
     }
 
     refreshUserToken()
-  })
+  }, [])
   
   return (
     <IonPage>
         <IonContent>
-            {/* <IonButton onClick={() => { history.push({ pathname: '/usuario/56520ae7-faf8-4444-a82b-7f3990ab02d8' }); }}>Ir para o perfil de outra pessoa</IonButton> */}
+          <IonToast
+            position="top"
+            color={toastColor}
+            isOpen={showToast}
+            onDidDismiss={() => setShowToast(false)}
+            message={toastMessage}
+            duration={2500}
+          />
         </IonContent>
     </IonPage>
   );

src/pages/Login.tsx

@@ -89,7 +89,11 @@ const Page: React.FC = () => {
 
       user.setIsLoggedIn(true);
 
-      history.push({ pathname: '/home' });
+      history.push({ pathname: '/home', state: { redirectData: {
+        showToastMessage: true,
+        toastColor: "success",
+        toastMessage: "Usuário autenticado com sucesso!",
+      }}})
     }).catch(error => {
       // if (!error.response) return
 
@@ -155,7 +159,7 @@ const Page: React.FC = () => {
         </IonGrid>
 
         <IonToast
-          // cssClass={"toast-notification"}
+          position="top"
           color='danger'      
           isOpen={showToast}
           onDidDismiss={() => setShowToast(false)}

src/pages/Perfil.tsx

@@ -1,5 +1,6 @@
 import {
   IonBackButton,
+  IonBadge,
   IonButtons,
   IonCard,
   IonCardContent,
@@ -18,7 +19,7 @@ import {
   IonToast,
   IonToolbar,
 } from "@ionic/react";
-import { useHistory } from "react-router-dom";
+import { useHistory, useLocation } from "react-router-dom";
 import React, { useState, useEffect, useReducer, useContext } from "react";
 import { callOutline, cardOutline, carOutline, createOutline, exitOutline, logoFacebook, logoWhatsapp, shieldCheckmarkOutline, starOutline } from "ionicons/icons";
 
@@ -28,6 +29,7 @@ import LocalStorage from "../LocalStorage";
 import sessionsService from '../services/functions/sessionsService'
 import usersService from '../services/functions/usersService'
 import { UserContext } from "../App";
+import { Color } from "@ionic/react/node_modules/@ionic/core";
 
 interface ScanNewProps {
   match:  {
@@ -37,15 +39,28 @@ interface ScanNewProps {
   }
 }
 
+interface LocationState { 
+  redirectData?: {
+    showToastMessage: boolean;
+    toastColor: Color;
+    toastMessage: string;
+  }
+}
+
 const Perfil: React.FC<ScanNewProps> = (props) => {
   const user = useContext(UserContext);
 
+  const history = useHistory();
+  const location = useLocation<LocationState>();
+
   const [isVisitor, setIsVisitor] = useState(true)
 
   const [incompleteProfile, setIncompleteProfile] = useState(false)
+  const [incompleteProfileCounter, setIncompleteProfileCounter] = useState(0)
 
   const [showToast, setShowToast] = useState(false);
-  const [messageToast, setMessageToast] = useState('');
+  const [toastMessage, setToastMessage] = useState('');
+  const [toastColor, setToastColor] = useState<Color>("primary");
 
   const [inputValues, setInputValues] = useReducer(
     (state: any, newState: any) => ({ ...state, ...newState }),
@@ -62,12 +77,10 @@ const Perfil: React.FC<ScanNewProps> = (props) => {
     }
   );
 
-  const history = useHistory();
-
   const redirectUserToLogin = () => {
     // TODO, não impede o usuário de retornar a página de login
     history.push({ pathname: '/login' });
-    setMessageToast("Por favor, autentique-se!");
+    setToastMessage("Por favor, autentique-se!");
     setShowToast(true);
   }
 
@@ -78,6 +91,16 @@ const Perfil: React.FC<ScanNewProps> = (props) => {
   }
 
   useEffect(() => {
+    if (location.state && location.state.redirectData) {
+      const redirectData = location.state.redirectData
+
+      if (redirectData.showToastMessage) {
+        setToastColor(redirectData.toastColor)
+        setToastMessage(redirectData.toastMessage)
+        setShowToast(true)
+      }
+    }
+
     const loadUserData = async () => {
       let userId = ''
 
@@ -102,11 +125,11 @@ const Perfil: React.FC<ScanNewProps> = (props) => {
   
       if (getByIdRes.error) {
         if (isVisitor && props.match.params.id) {
-          setMessageToast('Usuário não existe!')
+          setToastMessage('Usuário não existe!')
           setShowToast(true)
           history.push({ pathname: '/home' })
         } else {
-          setMessageToast(getByIdRes.error.errorMessage)
+          setToastMessage(getByIdRes.error.errorMessage)
           setShowToast(true)
         }
   
@@ -135,6 +158,13 @@ const Perfil: React.FC<ScanNewProps> = (props) => {
           
           if (!userData.document || !userData.phone_number) {
             setIncompleteProfile(true)
+
+            let counter = 0
+
+            if (!userData.document) counter++
+            if (!userData.phone_number) counter++
+
+            setIncompleteProfileCounter(counter)
           }
         }
       }
@@ -173,8 +203,8 @@ const Perfil: React.FC<ScanNewProps> = (props) => {
         
         <IonCard>
           <IonCardContent>
-              {/* <img src="https://static.generated.photos/vue-static/home/feed/adult.png" alt="avatar" className='avatar' id='avatar'/> */}
+              <img src="https://static.generated.photos/vue-static/home/feed/adult.png" alt="avatar" className='avatar' id='avatar'/>
-              <img src="https://lastfm.freetls.fastly.net/i/u/avatar170s/faa68f71f3b2a48ca89228c2c2aa72d3" alt="avatar" className='avatar' id='avatar'/>
+              {/* <img src="https://lastfm.freetls.fastly.net/i/u/avatar170s/faa68f71f3b2a48ca89228c2c2aa72d3" alt="avatar" className='avatar' id='avatar'/> */}
             <IonCardHeader>
               <IonCardTitle class="ion-text-center">{inputValues.name} {inputValues.lastname}</IonCardTitle>
             </IonCardHeader>
@@ -232,6 +262,7 @@ const Perfil: React.FC<ScanNewProps> = (props) => {
                   <IonItem button onClick={() => history.push({ pathname: '/perfil/completar', state: { userData: inputValues } })}>
                     <IonIcon icon={shieldCheckmarkOutline} slot="start" />
                     <IonLabel>Completar cadastro</IonLabel>
+                    <IonBadge color="primary">{incompleteProfileCounter}</IonBadge>
                   </IonItem>
                 </>
                 : <></> }
@@ -256,10 +287,11 @@ const Perfil: React.FC<ScanNewProps> = (props) => {
         }
 
         <IonToast
-          color='danger'      
+          position="top"
+          color={toastColor}      
           isOpen={showToast}
           onDidDismiss={() => setShowToast(false)}
-          message={messageToast}
+          message={toastMessage}
           duration={2500}
         />
       </IonContent>

src/pages/PerfilEditar.tsx

@@ -28,6 +28,7 @@ import isEqual from 'lodash.isequal';
 import * as usersRoutes from '../services/api/users';
 
 import './Cadastro/Cadastro.css'
+import { Color } from "@ionic/react/node_modules/@ionic/core";
 
 interface userData {
   name: string;
@@ -47,6 +48,7 @@ const PerfilEditar: React.FC = () => {
 
   const [showToast, setShowToast] = useState(false);
   const [messageToast, setMessageToast] = useState('');
+  const [toastColor, setToastColor] = useState<Color>("primary");
 
   const [userData, setUserData] = useState({
     name: '',
@@ -87,14 +89,18 @@ const PerfilEditar: React.FC = () => {
   const handleUpdateUserData = () => {
     usersRoutes.update(inputValues).then(response => {
       if (response.status === 'error') {
+        setToastColor("danger")
         setMessageToast(response.message);
         setShowToast(true);
 
         return
       }
 
-      console.log(response)
+      setToastColor("success")
+      setMessageToast(response.message);
+      setShowToast(true);
     }).catch((err) => {
+      setToastColor("danger")
       setMessageToast(err);
       setShowToast(true);
     })
@@ -176,7 +182,7 @@ const PerfilEditar: React.FC = () => {
         </IonFab>
 
         <IonToast
-          color='danger'      
+          color={toastColor}
           isOpen={showToast}
           onDidDismiss={() => setShowToast(false)}
           message={messageToast}