feat: add edit profile

package.json

@@ -12,13 +12,16 @@
     "eject": "react-scripts eject"
   },
   "dependencies": {
+    "@capacitor-community/filesystem-react": "^0.1.0",
     "@capacitor/android": "3.3.2",
     "@capacitor/app": "1.0.6",
+    "@capacitor/camera": "^1.2.1",
     "@capacitor/core": "^3.3.2",
     "@capacitor/geolocation": "^1.1.3",
     "@capacitor/haptics": "1.1.3",
     "@capacitor/keyboard": "1.1.3",
     "@capacitor/status-bar": "1.0.6",
+    "@ionic/pwa-elements": "^3.0.2",
     "@ionic/react": "^5.5.0",
     "@ionic/react-router": "^5.5.0",
     "@react-google-maps/api": "^2.5.0",

src/contexts/auth/AuthProvider.tsx

@@ -28,7 +28,9 @@ export const AuthProvider: React.FC = ({ children }) => {
     fullName: string,
     phoneNumber: string,
     address: string,
-    gender: 'male' | 'female'
+    gender: 'male' | 'female',
+    bio: string,
+    photoUrl: string,
   ) => {
     try {
       await registerUser(
@@ -37,7 +39,9 @@ export const AuthProvider: React.FC = ({ children }) => {
         fullName,
         phoneNumber,
         address,
-        gender
+        gender,
+        bio,
+        photoUrl,
       );
     } catch (err) {
       console.error(err);

src/contexts/auth/auth.context.ts

@@ -1,6 +1,5 @@
 import { createContext } from 'react';
 import { User } from 'firebase/auth';
-import { UserData } from 'types/userData';
 
 interface Context {
   currentUser: User | null;
@@ -10,15 +9,17 @@ interface Context {
     fullName: string,
     phoneNumber: string,
     address: string,
-    gender: 'male' | 'female'
+    gender: 'male' | 'female',
+    bio: string,
+    photoUrl: string,
   ) => void;
   login: (email: string, password: string) => void;
   logout: () => void;
 }
 
 export const AuthContext = createContext<Context>({
   currentUser: null,
-  register: () => {},
-  login: () => {},
-  logout: () => {},
+  register: () => { },
+  login: () => { },
+  logout: () => { },
 });

src/contexts/userData/UserDataProvider.tsx

@@ -0,0 +1,41 @@
+import { useState } from 'react';
+import { User } from 'firebase/auth';
+import { UserDataContext } from './userData.context';
+import { UserData } from 'types/userData';
+import { getUserData } from 'services/firebase';
+
+const initialData: UserData = {
+  id: '1',
+  fullName: 'John Doe',
+  gender: 'male',
+  email: '[email protected]',
+  phoneNumber: '12345',
+  address: 'USA',
+  bio: '',
+  photoUrl: '',
+};
+
+export const UserDataProvider: React.FC = ({ children }) => {
+  const [userData, setUserData] = useState<UserData>(initialData);
+
+  const fetchUserData = async (currentUser: User | null) => {
+    try {
+      const data = await getUserData(currentUser);
+
+      if (!data) return;
+
+      setUserData(data);
+    } catch (error) {
+      console.log(error);
+      throw new Error('Oops! Something went wrong.');
+    }
+  };
+
+  return (
+    <UserDataContext.Provider
+      value={{ userData, fetchUserData }}
+    >
+      {children}
+    </UserDataContext.Provider>
+  );
+};

src/contexts/userData/index.tsx

@@ -0,0 +1,2 @@
+export * from './UserDataProvider';
+export * from './userData.context';

src/contexts/userData/userData.context.ts

@@ -0,0 +1,24 @@
+import { createContext } from 'react';
+import { User } from 'firebase/auth';
+import { UserData } from 'types/userData';
+
+const initialData: UserData = {
+  id: '1',
+  fullName: 'John Doe',
+  gender: 'male',
+  email: '[email protected]',
+  phoneNumber: '12345',
+  address: 'USA',
+  bio: '',
+  photoUrl: '',
+};
+
+interface Context {
+  userData: UserData;
+  fetchUserData: (currentUser: User | null) => void;
+}
+
+export const UserDataContext = createContext<Context>({
+  userData: initialData,
+  fetchUserData: () => { },
+});

src/index.tsx

@@ -1,20 +1,26 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { defineCustomElements } from '@ionic/pwa-elements/loader';
+
 import App from './App';
 import * as serviceWorkerRegistration from './serviceWorkerRegistration';
 import reportWebVitals from './reportWebVitals';
+
 import { AuthProvider } from 'contexts/auth';
+import { UserDataProvider } from 'contexts/userData';
 import { PersonalContactProvider } from 'contexts/personalContact';
 import { EmergencyServiceProvider } from 'contexts/emergencyService';
 
 ReactDOM.render(
   <React.StrictMode>
     <AuthProvider>
-      <EmergencyServiceProvider>
-        <PersonalContactProvider>
-          <App />
-        </PersonalContactProvider>
-      </EmergencyServiceProvider>
+      <UserDataProvider>
+        <EmergencyServiceProvider>
+          <PersonalContactProvider>
+            <App />
+          </PersonalContactProvider>
+        </EmergencyServiceProvider>
+      </UserDataProvider>
     </AuthProvider>
   </React.StrictMode>,
   document.getElementById('root')
@@ -29,3 +35,6 @@ serviceWorkerRegistration.register();
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();
+
+// Call the element loader after the app has been rendered the first time
+defineCustomElements(window);

src/pages/auth/Register.tsx

@@ -26,7 +26,6 @@ import {
   lockClosedOutline,
   callOutline,
   transgenderOutline,
-  homeOutline,
 } from 'ionicons/icons';
 
 import { AuthContext } from 'contexts/auth';
@@ -43,7 +42,6 @@ const Register: React.FC = () => {
   const fullNameRef = useRef<HTMLIonInputElement>(null);
   const emailRef = useRef<HTMLIonInputElement>(null);
   const phoneNumberRef = useRef<HTMLIonInputElement>(null);
-  const addressRef = useRef<HTMLIonInputElement>(null);
   const passwordRef = useRef<HTMLIonInputElement>(null);
   const confirmPasswordRef = useRef<HTMLIonInputElement>(null);
 
@@ -61,7 +59,9 @@ const Register: React.FC = () => {
     const fullName = fullNameRef.current?.value;
     const email = emailRef.current?.value;
     const phoneNumber = phoneNumberRef.current?.value;
-    const address = addressRef.current?.value;
+    const address = "";
+    const bio = "";
+    const photoUrl = "";
     const password = passwordRef.current?.value;
     const confirmPassword = confirmPasswordRef.current?.value;
 
@@ -89,14 +89,6 @@ const Register: React.FC = () => {
       });
     }
 
-    if (!address || address.toString().trim().length === 0) {
-      return presentToast({
-        message: 'Alamat wajib diisi.',
-        duration: 2000,
-        color: 'warning',
-      });
-    }
-
     if (!selectedGender) {
       return presentToast({
         message: 'Jenis kelamin wajib diisi.',
@@ -140,8 +132,10 @@ const Register: React.FC = () => {
         password.toString(),
         fullName.toString().trim(),
         phoneNumber.toString().trim(),
-        address.toString().trim(),
-        selectedGender
+        address,
+        selectedGender,
+        bio,
+        photoUrl,
       );
 
       presentToast({
@@ -232,20 +226,6 @@ const Register: React.FC = () => {
                             required
                           />
                         </IonItem>
-                        <IonItem className={styles.registerCardItem}>
-                          <IonIcon
-                            icon={homeOutline}
-                            color="secondary"
-                            slot="start"
-                          />
-                          <IonInput
-                            type="text"
-                            inputMode="text"
-                            ref={addressRef}
-                            placeholder="Alamat"
-                            required
-                          />
-                        </IonItem>
                         <IonItem className={styles.registerCardItem}>
                           <IonIcon
                             icon={transgenderOutline}