feat: add edit profile feature

akmalhisyammm · Dec 2, 2021 · f9a8e1d · f9a8e1d
1 parent 2487db2
commit f9a8e1d
Show file tree

Hide file tree

Showing 7 changed files with 165 additions and 66 deletions.
diff --git a/src/components/SideMenu.tsx b/src/components/SideMenu.tsx
@@ -10,7 +10,6 @@ import {
   IonIcon,
   IonLabel,
   useIonToast,
-  useIonLoading,
 } from '@ionic/react';
 import { useContext } from 'react';
 import { useHistory } from 'react-router-dom';
@@ -19,27 +18,19 @@ import { informationCircle, logIn, logOut, personAdd } from 'ionicons/icons';
 
 const SideMenu: React.FC = () => {
   const { currentUser, logout } = useContext(AuthContext);
-  const [presentLoading, dismissLoading] = useIonLoading();
   const [presentToast] = useIonToast();
   const history = useHistory();
 
   const handleLogout = async () => {
-    try {
-      presentLoading();
+    await logout();
 
-      await logout();
+    presentToast({
+      message: 'Anda telah keluar.',
+      duration: 2000,
+      color: 'danger',
+    });
 
-      presentToast({
-        message: 'Anda telah keluar.',
-        duration: 2000,
-        color: 'danger',
-      });
-      dismissLoading();
-
-      history.replace('/');
-    } catch (error) {
-      console.error(error);
-    }
+    history.replace('/');
   };
 
   return (

diff --git a/src/components/routes/PrivateRoute.tsx b/src/components/routes/PrivateRoute.tsx
@@ -12,7 +12,11 @@ const PrivateRoute: React.FC<any> = ({
     <Route
       {...rest}
       render={(routeProps) =>
-        currentUser ? <RouteComponent {...routeProps} /> : <Redirect to="/" />
+        currentUser ? (
+          <RouteComponent {...routeProps} />
+        ) : (
+          <Redirect exact to="/" />
+        )
       }
     />
   );

diff --git a/src/components/routes/Routes.tsx b/src/components/routes/Routes.tsx
@@ -27,7 +27,7 @@ const Routes: React.FC = () => {
       {currentUser ? (
         <Redirect exact from="/" to="/main" />
       ) : (
-        <Redirect to="/" />
+        <Redirect exact to="/" />
       )}
     </IonRouterOutlet>
   );

diff --git a/src/contexts/auth/AuthProvider.tsx b/src/contexts/auth/AuthProvider.tsx
@@ -1,5 +1,4 @@
 import { useState, useEffect } from 'react';
-import { UserData } from 'types/userData';
 import { AuthContext } from './auth.context';
 import { User } from 'firebase/auth';
 import {

diff --git a/src/pages/main/profile/EditProfile.tsx b/src/pages/main/profile/EditProfile.tsx
@@ -13,39 +13,74 @@ import {
   IonSelectOption,
 } from '@ionic/react';
 import { folder } from 'ionicons/icons';
-import { useEffect, useState } from 'react';
+import { useContext, useEffect, useRef, useState } from 'react';
 
 import Layout from 'components/layout';
+import { AuthContext } from 'contexts/auth';
+import { getUserData, updateUserData } from 'services/firebase';
+import { UserData } from 'types/userData';
+import { useHistory } from 'react-router';
 
-interface User {
-  name: string;
-  bio: string;
-  gender: string;
-  email: string;
-  phone: string;
-  address: string;
-}
+const initialData: UserData = {
+  id: '1',
+  fullName: 'John Doe',
+  gender: 'male',
+  email: '[email protected]',
+  phoneNumber: '12345',
+  address: 'USA',
+};
 
 const EditProfile: React.FC = () => {
-  const [userData, setUserData] = useState<User>({
-    name: 'John Doe',
-    bio: 'Hello World',
-    gender: 'male',
-    email: '[email protected]',
-    phone: '08123456789',
-    address: 'Jl. Mawar No. 1',
-  });
+  const [userData, setUserData] = useState<UserData>(initialData);
+  const [gender, setGender] = useState<'male' | 'female'>('male');
+
+  const fullNameRef = useRef<HTMLIonInputElement>(null);
+  const emailRef = useRef<HTMLIonInputElement>(null);
+  const phoneNumberRef = useRef<HTMLIonInputElement>(null);
+  const addressRef = useRef<HTMLIonInputElement>(null);
+
+  const { currentUser } = useContext(AuthContext);
+
+  const history = useHistory();
 
   useEffect(() => {
-    setUserData({
-      name: 'John Doe',
-      bio: 'Hello World',
-      gender: 'male',
-      email: '[email protected]',
-      phone: '08123456789',
-      address: 'Jl. Mawar No. 1',
-    });
-  }, []);
+    const fetchUserData = async () => {
+      try {
+        const data = await getUserData(currentUser);
+
+        if (!data) return;
+
+        setUserData(data);
+      } catch (error) {
+        console.log(error);
+      }
+    };
+
+    fetchUserData();
+  }, [currentUser]);
+
+  const handleEditUserData = async () => {
+    const fullName = fullNameRef.current?.value as string;
+    const email = emailRef.current?.value as string;
+    const phoneNumber = phoneNumberRef.current?.value as string;
+    const address = addressRef.current?.value as string;
+
+    const updatedUser = {
+      fullName: fullName ?? userData.fullName,
+      gender: gender ?? userData.gender,
+      email: email ?? userData.email,
+      phoneNumber: phoneNumber ?? userData.phoneNumber,
+      address: address ?? userData.address,
+    };
+
+    try {
+      await updateUserData(currentUser, updatedUser);
+
+      history.replace('/main/profile');
+    } catch (error) {
+      console.error(error);
+    }
+  };
 
   return (
     <Layout title="Edit Profil">
@@ -76,14 +111,19 @@ const EditProfile: React.FC = () => {
                 <IonLabel position="fixed" color="primary">
                   Nama
                 </IonLabel>
-                <IonInput value={userData.name} inputMode="text" clearInput />
+                <IonInput
+                  ref={fullNameRef}
+                  value={userData.fullName}
+                  inputMode="text"
+                  clearInput
+                />
               </IonItem>
 
               <IonItem>
                 <IonLabel position="fixed" color="primary">
                   Bio
                 </IonLabel>
-                <IonInput value={userData.bio} inputMode="text" clearInput />
+                <IonInput value="Hello World" inputMode="text" clearInput />
               </IonItem>
 
               <IonItem>
@@ -92,7 +132,7 @@ const EditProfile: React.FC = () => {
                 </IonLabel>
                 <IonSelect
                   value={userData.gender}
-                  onIonChange={(e) => e.detail.value}
+                  onIonChange={(e: CustomEvent) => setGender(e.detail.value)}
                 >
                   <IonSelectOption value="male">Laki-Laki</IonSelectOption>
                   <IonSelectOption value="female">Perempuan</IonSelectOption>
@@ -103,15 +143,20 @@ const EditProfile: React.FC = () => {
                 <IonLabel position="fixed" color="primary">
                   E-mail
                 </IonLabel>
-                <IonInput value={userData.email} inputMode="email" clearInput />
+                <IonInput
+                  ref={emailRef}
+                  value={userData.email}
+                  inputMode="email"
+                  clearInput
+                />
               </IonItem>
 
               <IonItem>
                 <IonLabel position="fixed" color="primary">
                   No. Telp
                 </IonLabel>
                 <IonInput
-                  value={userData.phone}
+                  value={userData.phoneNumber}
                   inputMode="tel"
                   maxlength={12}
                   clearInput
@@ -123,6 +168,7 @@ const EditProfile: React.FC = () => {
                   Alamat
                 </IonLabel>
                 <IonInput
+                  ref={addressRef}
                   value={userData.address}
                   inputMode="text"
                   clearInput
@@ -138,7 +184,7 @@ const EditProfile: React.FC = () => {
               shape="round"
               expand="block"
               color="primary"
-              routerLink="/main/profile"
+              onClick={handleEditUserData}
             >
               Simpan
             </IonButton>

diff --git a/src/pages/main/profile/Profile.tsx b/src/pages/main/profile/Profile.tsx
@@ -10,6 +10,7 @@ import {
   IonList,
   IonRow,
   IonText,
+  useIonToast,
 } from '@ionic/react';
 import {
   callOutline,
@@ -23,26 +24,50 @@ import Layout from 'components/layout';
 import { AuthContext } from 'contexts/auth';
 import { getUserData } from 'services/firebase';
 import { UserData } from 'types/userData';
+import { useHistory } from 'react-router';
+
+const initialData: UserData = {
+  id: '1',
+  fullName: 'John Doe',
+  gender: 'male',
+  email: '[email protected]',
+  phoneNumber: '12345',
+  address: 'USA',
+};
 
 const Profile: React.FC = () => {
-  const [userData, setUserData] = useState<UserData>();
-  const [isFetchData, setIsFetchData] = useState<boolean>(false);
-  const authCtx = useContext(AuthContext);
+  const [userData, setUserData] = useState<UserData>(initialData);
+  const { currentUser, logout } = useContext(AuthContext);
+  const [presentToast] = useIonToast();
+  const history = useHistory();
 
   useEffect(() => {
     const fetchUserData = async () => {
       try {
-        const data = await getUserData(authCtx.currentUser);
+        const data = await getUserData(currentUser);
+
+        if (!data) return;
 
         setUserData(data);
-        console.log(userData);
       } catch (error) {
         console.log(error);
       }
     };
 
     fetchUserData();
-  }, []);
+  }, [currentUser]);
+
+  const handleLogout = async () => {
+    await logout();
+
+    presentToast({
+      message: 'Anda telah keluar.',
+      duration: 2000,
+      color: 'danger',
+    });
+
+    history.replace('/');
+  };
 
   return (
     <Layout title="Profil Saya">
@@ -67,7 +92,7 @@ const Profile: React.FC = () => {
                 }}
               >
                 <h3 style={{ fontWeight: 'bold' }}>
-                  <IonText color="danger">full name</IonText>
+                  <IonText color="danger">{userData.fullName}</IonText>
                 </h3>
                 <p>Hello World</p>
               </IonText>
@@ -93,22 +118,24 @@ const Profile: React.FC = () => {
             <IonList>
               <IonItem>
                 <IonIcon icon={maleOutline} slot="start" color="primary" />
-                <IonLabel>gender</IonLabel>
+                <IonLabel>
+                  {userData.gender === 'male' ? 'Laki-Laki' : 'Perempuan'}
+                </IonLabel>
               </IonItem>
 
               <IonItem>
                 <IonIcon icon={mailOutline} slot="start" color="primary" />
-                <IonLabel>email</IonLabel>
+                <IonLabel>{userData.email}</IonLabel>
               </IonItem>
 
               <IonItem>
                 <IonIcon icon={callOutline} slot="start" color="primary" />
-                <IonLabel>nohp</IonLabel>
+                <IonLabel>{userData.phoneNumber}</IonLabel>
               </IonItem>
 
               <IonItem>
                 <IonIcon icon={mapOutline} slot="start" color="primary" />
-                <IonLabel>address</IonLabel>
+                <IonLabel>{userData.address}</IonLabel>
               </IonItem>
             </IonList>
           </IonCol>
@@ -121,7 +148,7 @@ const Profile: React.FC = () => {
               shape="round"
               expand="block"
               color="danger"
-              routerLink="/"
+              onClick={handleLogout}
             >
               <IonIcon icon={logOut} slot="start" />
               <IonLabel>Keluar</IonLabel>