profil

src/components/Profil.tsx

@@ -14,7 +14,7 @@ function Profil()
         email:'',
         name:'',
         phone:'',
-        qr_code: null
+        qr_code: ''
     });
 
 //    const { data, error, isLoading } = useSWR( user?.qr_id, getDog);
@@ -35,40 +35,54 @@ function Profil()
     console.log('Profil user');    
     console.log(user);
 
-            // setDog(data);
-            // setFormData(
-            //     { 
-            //         email: data.data.email, 
-            //         name: data.data.name,
-            //         phone: data.data.phone,
-            //         qr_code: data.data.qr_code
-            //     });
-
-
-            if(data.data.qr_code === null && document.getElementById("canvas") != null)
-            {
-                // qrcode generieren und in der Datenbank speichern
-                CreateQr({qr_id: user?.qr_id});
-            }              
+    if(data.data.qr_code === null && document.getElementById("canvas") != null)
+    {
+        // qrcode generieren und in der Datenbank speichern
+        CreateQr({qr_id: user?.qr_id})
+        .catch(err => 
+        {
+            console.log('Profil CreateQr Error');
+            console.error(err);
+        });
+    }              
 
     let formData_loc = 
     {
-        email: data.data.email,
-        name: data.data.name,
-        phone: data.data.phone
+        email: '',
+        name: '',
+        phone: '',
+        qr_code: ''
     };
 
-                     
+    if (formData.email)
+    {
+        formData_loc =
+        {
+            email: formData.email,
+            name: formData.name,
+            phone: formData.phone,
+            qr_code: formData.qr_code
+        };
+    }
+    else
+    {
+        formData_loc =
+        {
+            email: data.data.email as string,
+            name: data.data.name as string,
+            phone: data.data.phone as string,
+            qr_code: data.data.qr_code as string
+        };
+    }
 
     const onChangeInput = (e: React.FormEvent<HTMLInputElement> ) => 
     {
-        formData_loc = {...formData,[e.currentTarget.name]:e.currentTarget.value};
-        setFormData(
-            {
-                ...formData,
-                [e.currentTarget.name]:e.currentTarget.value
-            }
-        );    
+        formData_loc = 
+        {
+            ...formData_loc,
+            [e.currentTarget.name]:e.currentTarget.value
+        };
+        setFormData(formData_loc);    
     }
 
     function showData(data: any/*, e: React.FormEvent<HTMLFormElement> | React.MouseEvent<HTMLButtonElement>*/)
@@ -76,12 +90,6 @@ function Profil()
         if(data.success)
         {
             toast.success('Daten geändert!');
-
-            // setSuccessMsg and setErrMsg force rendering
-            // if(e as React.FormEvent<HTMLFormElement> !== null)
-            //     (e as React.FormEvent<HTMLFormElement>).currentTarget.reset();
-            // if(e as React.MouseEvent<HTMLButtonElement> !== null)
-            //     (e as React.MouseEvent<HTMLButtonElement>).currentTarget.onre();
         }
         else if(!data.success && data.message)
         {
@@ -103,20 +111,25 @@ function Profil()
         const data = await updateDog(formData);
         mutate();
         showData(data);
-
     }
 
     const qr_refresh = (e: React.MouseEvent<HTMLButtonElement>) => 
     {
         e.preventDefault();
-        formData.qr_code = null;
+        formData.qr_code = '';
         setFormData(formData);
         showData(data/*, e*/);
 
         if(document.getElementById("canvas") != null)
         {
             // qrcode generieren und in der Datenbank speichern
-            CreateQr({qr_id: user?.qr_id});
+            CreateQr({qr_id: user?.qr_id})
+            .catch(err => 
+                {
+                    console.log('qr_refresh CreateQr Error');
+                    console.error(err);
+                });
+        
         }              
         // update data with phpapi
         mutate();
@@ -126,6 +139,7 @@ function Profil()
     console.log(formData);
     console.log('Profil formData_loc');
     console.log(formData_loc);
+
     return (
         <div className='Profil'>
             <Toaster toastOptions={{ position: "top-center" }} />

src/services/CreateQr.ts

@@ -28,6 +28,9 @@ export default async function CreateQr({qr_id}:{qr_id: string | undefined})
             type: "extra-rounded",
         }
     });    
+    console.log(qrCode); 
+    console.log(document.getElementById("canvas")); 
+
     document.getElementById("canvas")!.innerHTML = "";
     qrCode.append(document.getElementById("canvas") as HTMLElement);