phpapi not ready

src/App.css

@@ -12,6 +12,11 @@
     justify-content: center;
 }
 
+.margin
+{
+  margin: 10px;
+}
+
 .prevUplImg
 {
   display: flex;

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>
+            <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);

src/context/UserContext.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
+import React from 'react';
-import {createContext, useState, useEffect} from 'react'
+import {createContext, useState, useEffect} from 'react';
-import axios from 'axios'
+import { Axios } from '../services/PhpApi';
 
 export type TUserContextProviderProps =
 {
@@ -45,162 +45,24 @@ export type ResponseT =
 export type UserCtxT =
 {
     user: TUser | null,
-    
     setUser: React.Dispatch<React.SetStateAction<TUser | null>>,
-    
-    registerUser: ({ email, password }: {
-        email: string;
-        password: string;
-    }) => Promise<any>,
-    
-    updateDog: ({ email, name, phone }: {
-        email: string;
-        name: string;
-        phone: string;
-    }) => Promise<any>,
-    
-    updateQR: ({qr_width_cm, qr_height_cm, qr_fontsize, qr_visible_items, qr_item_sequence}: {
-        qr_width_cm: number;
-        qr_height_cm: number;
-        qr_fontsize: number;
-        qr_visible_items: number;
-        qr_item_sequence: number;
-    }) => Promise<any>,
-    
-    loginUser: (
-        { email, password } : 
-        {
-        email: string;
-        password: string;
-        },
-                ) => Promise<{
-        success: number;
-        message?: undefined;
-    } | {
-        success: number;
-        message: any;
-    }>,
-
-    wait: boolean,
-
     getUser: () => Promise<void>,
     
-    logout: () => void,
+    wait: boolean,
+    setWait: React.Dispatch<React.SetStateAction<boolean>>,
 
-    getDog: (str: string | undefined) => Promise<ResponseT>,
+    dog: ResponseT,
-
+    setDog: React.Dispatch<any>
-    dog: ResponseT
 }
 
 export const UserCtx = createContext<UserCtxT | null>(null);
 
-export const Axios = axios.create({
-//    baseURL: 'http://localhost/dog/php-dog/',
-//    baseURL: 'https://hope-fly.de/dog/php-dog/',
-    baseURL: process.env.REACT_APP_PHP_ROOT,
-});
-
 export const UserCtxProvider = ({children}:TUserContextProviderProps) => {
 
     const [user, setUser] = useState<TUser | null>(null);
     const [wait, setWait] = useState(false);
     const [dog, setDog] = useState<ResponseT>({});
 
-    const registerUser = async ({email,password}:
-        {email: string, password: string}) => {
-        setWait(true);
-        try{
-            const {data} = await Axios.post('register.php',{
-                email,
-                password 
-            });
-            setWait(false);
-            return data;
-        }
-        catch(err){
-            setWait(false);
-            return {success:0, message:'Server Error!'};
-        }
-    }
-
-    const updateDog = async ({email, name, phone}:
-        {email: string, name: string, phone: string}) => {
-        setWait(true);
-        try{
-            const {data} = await Axios.post('updateDog.php',{
-                email,
-                name,
-                phone 
-            });
-            setWait(false);
-            return data;
-        }
-        catch(err){
-            setWait(false);
-            return {success:0, message:'Server Error!'};
-        }
-    }
-
-    const updateQR = async ({qr_width_cm, qr_height_cm, qr_fontsize, qr_visible_items, qr_item_sequence}:
-        {qr_width_cm: number, qr_height_cm: number, qr_fontsize: number, qr_visible_items: number, qr_item_sequence: number}) => {
-        setWait(true);
-        try{
-            const {data} = await Axios.post('updateQR.php',{
-                qr_width_cm,
-                qr_height_cm,
-                qr_fontsize,
-                qr_visible_items,
-                qr_item_sequence 
-            });
-            setWait(false);
-            return data;
-        }
-        catch(err){
-            setWait(false);
-            return {success:0, message:'Server Error!'};
-        }
-    }
-
-    const loginUser = async ({email,password}:{email: string, password: string}) => 
-    {
-        setWait(true);
-        try
-        {
-            var postReturn:
-            {   
-                data:
-                {
-                    success: number;
-                    message: string;
-                    data: TUser | null;
-                } 
-            } 
-            = { data : {success: 0, message: '', data: null } };
-
-
-
-
-            postReturn = await Axios.post('login.php',{
-                    email,
-                    password 
-                });
-
-            const {data} = postReturn;
-            if(data.success && data.data)
-            {
-                setUser(data.data);
-                setWait(false);
-                return {success:1};
-            }
-            setWait(false);
-            return {success:0, message:data.message};
-        }
-        catch(err){
-            setWait(false);
-            return {success:0, message:'Server Error!'};
-        }
-
-    }
 
     const getUser = async () => 
     {
@@ -236,49 +98,16 @@ export const UserCtxProvider = ({children}:TUserContextProviderProps) => {
         asyncCall();
     },[]);
     
-    const logout = async () => 
-    {
-        await Axios.get('logout.php');
-        setUser(null);
-    }
-
-    const getDog = async ( str: string | undefined) =>
-    {
-      var ret: ResponseT = {};
-      setWait(true);
-    
-      try 
-      {
-        ret = await Axios.post<ResponseT>('getDog.php', 
-        {
-          qr_id: str
-        });
-        setDog(ret.data as ResponseT);
-        setWait(false);
-        return;
-      } 
-      catch (error:any) 
-      {
-            console.log('error message: ', error.message);
-            setWait(false);
-            return;
-      } 
-    };
-    
     return (
         <UserCtx.Provider value={
             {
-                registerUser,
-                updateDog,
-                updateQR,
-                loginUser,
                 wait,
+                setWait,
                 user, 
                 setUser, 
                 getUser,
-                logout,
+                dog,
-                getDog,
+                setDog
-                dog
             }}
         >
             {children}

src/services/CreateQr.ts

@@ -1,4 +1,4 @@
-import { Axios } from '../context/UserContext';
+import { Axios } from './PhpApi';
 
 import React from 'react'
 import QRCodeStyling from 'qr-code-styling';

src/services/FileUploadService.ts

@@ -1,6 +1,6 @@
 //import http from "../http-common";
 
-import { Axios } from '../context/UserContext';
+import { Axios } from './PhpApi';
 
 const upload = (file: File, onUploadProgress: any): Promise<any> => {
   let formData = new FormData();

src/services/PhpApi.ts

@@ -0,0 +1,144 @@
+import {UserCtx, UserCtxT, ResponseT, TUser} from '../context/UserContext';
+import React, {useContext} from 'react';
+import axios from 'axios'
+
+export const Axios = axios.create({
+    //    baseURL: 'http://localhost/dog/php-dog/',
+    //    baseURL: 'https://hope-fly.de/dog/php-dog/',
+        baseURL: process.env.REACT_APP_PHP_ROOT,
+    });
+    
+
+export const updateDog = async ({email, name, phone}:
+    {email: string, name: string, phone: string}) => 
+{
+    const { setWait } = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
+    setWait(true);
+    try{
+        const {data} = await Axios.post('updateDog.php',{
+            email,
+            name,
+            phone 
+        });
+        setWait(false);
+        return data;
+    }
+    catch(err){
+        setWait(false);
+        return {success:0, message:'Server Error!'};
+    }
+}
+
+export const getDog = async ( str: string | undefined) =>
+{
+  const { setWait, setDog } = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
+
+  var ret: ResponseT = {};
+  setWait(true);
+
+  try 
+  {
+    ret = await Axios.post<ResponseT>('getDog.php', 
+    {
+      qr_id: str
+    });
+    setDog(ret.data as ResponseT);
+    setWait(false);
+    return;
+  } 
+  catch (error:any) 
+  {
+        console.log('error message: ', error.message);
+        setWait(false);
+        return;
+  } 
+}
+
+export const registerUser = async ({email,password}:
+    {email: string, password: string}) => 
+{
+    const { setWait } = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
+    setWait(true);
+    try{
+        const {data} = await Axios.post('register.php',{
+            email,
+            password 
+        });
+        setWait(false);
+        return data;
+    }
+    catch(err){
+        setWait(false);
+        return {success:0, message:'Server Error!'};
+    }
+}
+
+export const updateQR = async ({qr_width_cm, qr_height_cm, qr_fontsize, qr_visible_items, qr_item_sequence}:
+    {qr_width_cm: number, qr_height_cm: number, qr_fontsize: number, qr_visible_items: number, qr_item_sequence: number}) => 
+{
+    const { setWait } = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
+
+    setWait(true);
+    try{
+        const {data} = await Axios.post('updateQR.php',{
+            qr_width_cm,
+            qr_height_cm,
+            qr_fontsize,
+            qr_visible_items,
+            qr_item_sequence 
+        });
+        setWait(false);
+        return data;
+    }
+    catch(err){
+        setWait(false);
+        return {success:0, message:'Server Error!'};
+    }
+}
+
+export const loginUser = async ({email,password}:{email: string, password: string}) => 
+{
+    const { setWait } = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
+    setWait(true);
+    try
+    {
+        var postReturn:
+        {   
+            data:
+            {
+                success: number;
+                message: string;
+                data: TUser | null;
+            } 
+        } 
+        = { data : {success: 0, message: '', data: null } };
+
+        postReturn = await Axios.post('login.php',{
+                email,
+                password 
+            });
+
+        const {data} = postReturn;
+        if(data.success && data.data)
+        {
+            setUser(data.data);
+            setWait(false);
+            return {success:1};
+        }
+        setWait(false);
+        return {success:0, message:data.message};
+    }
+    catch(err){
+        setWait(false);
+        return {success:0, message:'Server Error!'};
+    }
+}
+
+export const logout = async () => 
+{
+    const { setUser } = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
+    await Axios.get('logout.php');
+    setUser(null);
+}
+
+