Página de perfil e página de alterar perfil

src/pages/Perfil.tsx

@@ -31,64 +31,63 @@ const Perfil: React.FC = () => {
   const [inputValues, setInputValues] = useReducer(
     (state: any, newState: any) => ({ ...state, ...newState }),
     {
-      fullname: '',
-      bio: ''
+      name: '',
+      bio: '',
+      email: ''
     }
   );
 
   const history = useHistory();
 
-  const loadUserData = async () => {
-    let userId = ''
-
-    await sessionRoutes.refresh().then(response => {
-      if (response.status === 'error') {
-        setMessageToast(response.message);
-        setShowToast(true);
-
-        return
-      }
-
-      userId = response.userId
-    }).catch(error => {
-      console.dir('Houve um erro: ', { error })
-      alert('Houve um erro')
-    })
-
-    await usersRoutes.getById(userId).then(response => {
-      if (response.status === 'error') {
-        setMessageToast(response.message.data)
-        setShowToast(true);
-
-        return
-      }
-
-      const userData = response.data
-
-      setInputValues({'fullname': userData.name, 'bio': userData.bio});
-    }).catch(error => {
-      console.dir('Houve um erro: ', { error })
-      alert('Houve um erro')
-    })
-  }
-
   useEffect(() => {
-    const userToken = LocalStorage.getToken()
-
-    if (!userToken) {
+    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!");
       setShowToast(true);
     }
+  
+    const loadUserData = async () => {
+      let userId = ''
+  
+      await sessionRoutes.refresh().then(response => {
+        if (response.status === 'error') {
+          setMessageToast(response.message);
+          setShowToast(true);
+  
+          return
+        }
+  
+        userId = response.userId
+      }).catch(() => {
+        redirectUserToLogin()
+      })
+  
+      await usersRoutes.getById(userId).then(response => {
+        if (response.status === 'error') {
+          setMessageToast(response.message.data)
+          setShowToast(true);
+  
+          return
+        }
+  
+        const userData = response.data
+  
+        setInputValues({'name': userData.name, 'bio': userData.bio, 'email': userData.email});
+      }).catch(() => {
+        redirectUserToLogin()
+      })
+    }
+
+    const userToken = LocalStorage.getToken()
+
+    if (!userToken) {
+      redirectUserToLogin()
+    }
 
     // const refreshResponse = refreshSession()
     loadUserData()
-  }, []);
-
-  const handleEditProfile = () => {
-    alert('oi')
-  }
+  }, [history]);
 
   return (
     <IonPage>
@@ -116,7 +115,7 @@ const Perfil: React.FC = () => {
             </IonRow>
 
             <IonCardHeader>
-              <IonCardTitle class="ion-text-center">{inputValues.fullname}</IonCardTitle>
+              <IonCardTitle class="ion-text-center">{inputValues.name}</IonCardTitle>
             </IonCardHeader>
           </IonCardContent>
         </IonCard>
@@ -130,8 +129,8 @@ const Perfil: React.FC = () => {
           </IonCardContent>
         </IonCard>
 
-        <IonFab vertical="bottom" horizontal="end" slot="fixed" onClick={handleEditProfile}>
-          <IonFabButton>
+        <IonFab vertical="bottom" horizontal="end" slot="fixed">
+          <IonFabButton onClick={() => history.push({ pathname: '/perfil/editar', state: { userData: inputValues } })}>
             <IonIcon icon={createOutline} />
           </IonFabButton>
         </IonFab>

src/pages/PerfilEditar.tsx

@@ -1,8 +1,6 @@
 import {
-  IonCard,
-  IonCardContent,
-  IonCardHeader,
-  IonCardTitle,
+  IonBackButton,
+  IonButtons,
   IonContent,
   IonFab,
   IonFabButton,
@@ -13,20 +11,77 @@ import {
   IonItem,
   IonLabel,
   IonPage,
+  IonTextarea,
   IonTitle,
+  IonToast,
   IonToolbar
 } from "@ionic/react";
-import React, { useState } from "react";
+import React, { useEffect, useReducer, useState } from "react";
 import { IonRow, IonCol } from "@ionic/react";
-import { createOutline } from "ionicons/icons";
 
 import './Perfil.css'
+import { useHistory, useLocation } from "react-router";
+import { saveOutline } from "ionicons/icons";
 
-const Perfil: React.FC = () => {
-  const [email, setEmail] = useState<string>("matheusalb3213@gmail.com");
+import isEqual from 'lodash.isequal';
 
-  const handleEditProfile = () => {
-    alert('oi')
+import * as usersRoutes from '../services/users';
+
+interface userData {
+  name: string;
+  bio: string;
+  email: string;
+}
+
+interface LocationState {
+  userData: userData
+}
+
+const PerfilEditar: React.FC = () => {
+  const history = useHistory();
+  const location = useLocation<LocationState>();
+
+  const [showToast, setShowToast] = useState(false);
+  const [messageToast, setMessageToast] = useState('');
+
+  const [userData, setUserData] = useState({
+    name: '',
+    bio: '',
+    email: ''
+  });
+
+  const [inputValues, setInputValues] = useReducer(
+    (state: any, newState: any) => ({ ...state, ...newState }),
+    {
+      name: '',
+      bio: '',
+      email: ''
+    }
+  );
+
+  useEffect(() => {
+    setUserData(location.state.userData)
+    setInputValues({'name': userData.name, 'email': userData.email, 'bio': userData.bio});
+  }, [userData]);
+
+  const handleUpdateUserData = () => {
+    usersRoutes.update(inputValues).then(response => {
+      if (response.status === 'error') {
+        setMessageToast(response.message);
+        setShowToast(true);
+
+        return
+      }
+
+      console.log(response)
+    }).catch((err) => {
+      setMessageToast(err);
+      setShowToast(true);
+    })
+  }
+
+  const hasChangedSinceInitialState = () => {
+    return isEqual(userData, inputValues)
   }
 
   return (
@@ -34,6 +89,9 @@ const Perfil: React.FC = () => {
       <IonHeader>
         <IonToolbar>
           <IonTitle>Editar perfil</IonTitle>
+          <IonButtons slot="start">
+            <IonBackButton defaultHref="perfil" />
+          </IonButtons>
         </IonToolbar>
       </IonHeader>
 
@@ -48,19 +106,48 @@ const Perfil: React.FC = () => {
           <IonRow>
             <IonCol>
               <IonItem>
-                <IonLabel position="floating"> Email</IonLabel>
+                <IonLabel position="stacked"> Nome completo</IonLabel>
+                <IonInput
+                  type="text"
+                  value={inputValues.name}
+                  onIonChange={(e) => setInputValues({'name': e.detail.value!})}
+                ></IonInput>
+              </IonItem>
+              <IonItem>
+                <IonLabel position="stacked"> Email</IonLabel>
                 <IonInput
                   type="email"
-                  value={email}
-                  onIonChange={(e) => setEmail(e.detail.value!)}
+                  value={inputValues.email}
+                  onIonChange={(e) => setInputValues({'email': e.detail.value!})}
                 ></IonInput>
               </IonItem>
+              <IonItem>
+                <IonLabel position="stacked"> Biografia</IonLabel>
+                <IonTextarea
+                  value={inputValues.bio}
+                  onIonChange={(e) => setInputValues({'bio': e.detail.value!})}
+                ></IonTextarea>
+              </IonItem>
             </IonCol>
           </IonRow>
         </IonGrid>
+
+        <IonFab vertical="bottom" horizontal="end" slot="fixed">
+          <IonFabButton disabled={hasChangedSinceInitialState()} onClick={handleUpdateUserData}>
+            <IonIcon icon={saveOutline} />
+          </IonFabButton>
+        </IonFab>
+
+        <IonToast
+          color='danger'      
+          isOpen={showToast}
+          onDidDismiss={() => setShowToast(false)}
+          message={messageToast}
+          duration={2500}
+        />
       </IonContent>
     </IonPage>
   );
 };
 
-export default Perfil;
+export default PerfilEditar;