Add Onboarding avatar picture

mostafa-elhaiany · Oct 29, 2023 · da57f8b · da57f8b
1 parent c2ed874
commit da57f8b
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git a/DineDevineUI/src/pages/OnboardingPage.tsx b/DineDevineUI/src/pages/OnboardingPage.tsx
@@ -11,7 +11,7 @@ import {
 } from '@ionic/react';
 import './pages.css'
 import {RouteComponentProps} from "react-router";
-import {usePhotoGallery} from "../hooks/usePhotoGallery";
+import {base64FromPath, usePhotoGallery} from "../hooks/usePhotoGallery";
 
 
 const OnboardingPage: React.FC<RouteComponentProps> = (props: RouteComponentProps) => {
@@ -27,6 +27,7 @@ const OnboardingPage: React.FC<RouteComponentProps> = (props: RouteComponentProp
 
     const [name, setName] = useState("");
     const [email, setEmail] = useState("");
+    const [photo, setPhoto] = useState(localStorage.getItem('email') ?? "")
     const { photos, takePhoto } = usePhotoGallery();
 
     const onSubmit = (e) => {
@@ -47,9 +48,24 @@ const OnboardingPage: React.FC<RouteComponentProps> = (props: RouteComponentProp
         setName(e.target.value)
     }
 
-    const addImage = async (e) => {
+    const addImage = async () => {
         console.log("addImage")
         await takePhoto()
+        if(photos.length != 1)
+            return
+        const b64 = await base64FromPath(photos[0].webviewPath)
+        console.log(b64)
+        localStorage.setItem("photo", b64 )
+        setPhoto(b64)
+
+    }
+
+    function getAvatar() {
+        if (photo == "") {
+            return "/public/test.png"
+        }
+        return photo
+
     }
 
     return (
@@ -64,8 +80,8 @@ const OnboardingPage: React.FC<RouteComponentProps> = (props: RouteComponentProp
                     <div></div>
                     <div className={"content-container"}>
                         <div>
-                            <IonAvatar onClick={(e) => addImage(e)} className={"image"} class={"avatar"}>
-                                <img className={"image"}  src={"/test.png"}/>
+                            <IonAvatar onClick={async() => await addImage()} className={"image"} class={"avatar"}>
+                                <img className={"image"}  src={getAvatar()}/>
                             </IonAvatar>
                         </div>
                         <IonItem>

diff --git a/DineDevineUI/src/pages/ProfilePage.tsx b/DineDevineUI/src/pages/ProfilePage.tsx
@@ -123,7 +123,7 @@ const ProfilePage: React.FC<Profile> = (props: Profile) => {
 
                         <IonCol class={"ion-margin-start"}>
                             <h1 className="no-text-wrap profileHeadline">{name}</h1>
-                            E-Mail: {email}
+                            {email}
                         </IonCol>
                     </IonRow>
                     <IonRow>