phpapi not ready

src/components/Header.tsx

@@ -1,8 +1,9 @@
 import React, { useContext } from 'react'
 import './Header.css';
 import '../App.css';
-import {Axios, UserCtx, UserCtxT} from '../context/UserContext';
+import {UserCtx, UserCtxT} from '../context/UserContext';
 import { useNavigate } from 'react-router-dom';
+import {Axios} from '../services/PhpApi'
 
 
 function Header() {

src/components/PreviewUpload.tsx

@@ -1,5 +1,6 @@
 import React, { useContext, useState } from 'react';
-import { Axios, ResponseT, UserCtx, UserCtxT } from '../context/UserContext';
+import { ResponseT, UserCtx, UserCtxT } from '../context/UserContext';
+import {Axios} from '../services/PhpApi';
 
 function PreviewUpload({chgFile}:{chgFile: any}) {
   const [file, setFile] = useState<string | undefined >(undefined);

src/components/Profil.tsx

@@ -1,20 +1,22 @@
 import React, { useContext, useState } from 'react'
 import { Link } from 'react-router-dom';
-import { Axios, ResponseT, UserCtx, UserCtxT } from '../context/UserContext';
+import { ResponseT, UserCtx, UserCtxT } from '../context/UserContext';
+import {Axios, updateDog} from '../services/PhpApi';
 import CreateQr from '../services/CreateQr';
 import Img from './Img';
 import './Profil.css';
 
 function Profil() 
 {
-    const { user, updateDog, wait } = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
+    const { user, wait } = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
     const [dog, setDog] = useState<ResponseT | any>({}); // local dog not the dog in UserContext
     const [errMsg, setErrMsg] = useState("false");
     const [successMsg, setSuccessMsg] = useState("false");
     const [formData, setFormData] = useState({
         email:'',
         name:'',
-        phone:''
+        phone:'',
+        qr_code: null
     });
 
     if(user && (dog === undefined || dog.success === undefined))
@@ -30,7 +32,8 @@ function Profil()
                 { 
                     email: resDog.data.data.email, 
                     name: resDog.data.data.name,
-                    phone: resDog.data.data.phone
+                    phone: resDog.data.data.phone,
+                    qr_code: resDog.data.data.qr_code
                 });
             if(resDog.data.data.qr_code === null)
             {
@@ -50,23 +53,18 @@ function Profil()
         })
     }
 
-    const submitForm = async (e: React.FormEvent<HTMLFormElement>) => 
+    function showData(data: any/*, e: React.FormEvent<HTMLFormElement> | React.MouseEvent<HTMLButtonElement>*/)
     {
-        e.preventDefault();
-
-        if(!Object.values(formData).every(val => val.trim() !== '')){
-            setSuccessMsg("false");
-            setErrMsg('Bitte alle Felder ausfüllen!');
-            return;
-        }
-
-
-        const data = await updateDog(formData);
         if(data.success)
         {
             setSuccessMsg('Daten geändert!');
             setErrMsg("false");
-            e.currentTarget?.reset();
+
+            // 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)
         {
@@ -75,13 +73,40 @@ function Profil()
         }
     }
 
+    const submitForm = async (e: React.FormEvent<HTMLFormElement>) => 
+    {
+        e.preventDefault();
+
+        if(!Object.values(formData).every(val => val?.trim() !== '')){
+            setSuccessMsg("false");
+            setErrMsg('Bitte alle Felder ausfüllen!');
+            return;
+        }
+
+        const data = await updateDog(formData);
+        showData(data/*, e*/);
+    }
+
+    const qr_refresh = async (e: React.MouseEvent<HTMLButtonElement>) => 
+    {
+        e.preventDefault();
+        formData.qr_code = null;
+        const data = await updateDog(formData);
+        showData(data/*, e*/);
+    }
+
     return (
         <div className='Profil'>
             <h2>Profil</h2>
-            <div>
-                {dog.data && <Img pth={dog.data.picture} className=''/>}
-                <Link to={'/upload'}>Bild ändern</Link>
-                {dog.data && <Img pth={dog.data.qr_code} className=''/>}
+            <div className='neben'>
+                <div className='margin'>
+                    {dog.data && <Img pth={dog.data.picture} className=''/>}
+                    <Link to={'/upload'}>Bild ändern</Link>
+                </div>
+                <div className='margin'>
+                    {dog.data && <Img pth={dog.data.qr_code} className=''/>}
+                    <button onClick={qr_refresh}>QR aktualisieren</button>
+                </div>
                 <div id="canvas"></div>
             </div>
             <form onSubmit={submitForm}>

src/components/Qr.tsx

@@ -1,6 +1,7 @@
 import React, { ChangeEvent, MouseEventHandler, useContext, useState } from 'react'
 import { Link } from 'react-router-dom';
-import { UserCtx, UserCtxT, DogT, Axios, ResponseT, TUser } from '../context/UserContext';
+import { UserCtx, UserCtxT, DogT, ResponseT, TUser } from '../context/UserContext';
+import {Axios, updateQR} from '../services/PhpApi';
 import Checkbox from './Checkbox';
 import Img from './Img';
 import './Qr.css';
@@ -13,7 +14,7 @@ type ListItemT =
 
 export default function Qr() 
 {
-    const { user, updateQR } = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
+    const { user } = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
     const [dog, setDog] = useState<ResponseT | any>({}); // local dog not the dog in UserContext
     const [width, setWidth] = useState(2.4);
     const [height, setHeight] = useState(3.7);