diff --git a/src/App.css b/src/App.css index 99845ca..7bc54d2 100644 --- a/src/App.css +++ b/src/App.css @@ -12,6 +12,11 @@ justify-content: center; } +.margin +{ + margin: 10px; +} + .prevUplImg { display: flex; diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 4867cb0..fe16a3d 100644 --- a/src/components/Header.tsx +++ b/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() { diff --git a/src/components/PreviewUpload.tsx b/src/components/PreviewUpload.tsx index 0aea337..e922bdb 100644 --- a/src/components/PreviewUpload.tsx +++ b/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(undefined); diff --git a/src/components/Profil.tsx b/src/components/Profil.tsx index 604bff8..0bb9617 100644 --- a/src/components/Profil.tsx +++ b/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(UserCtx) as UserCtxT; + const { user, wait } = useContext(UserCtx) as UserCtxT; const [dog, setDog] = useState({}); // 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) => + function showData(data: any/*, e: React.FormEvent | React.MouseEvent*/) { - 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 !== null) + // (e as React.FormEvent).currentTarget.reset(); + // if(e as React.MouseEvent !== null) + // (e as React.MouseEvent).currentTarget.onre(); } else if(!data.success && data.message) { @@ -75,13 +73,40 @@ function Profil() } } + const submitForm = async (e: React.FormEvent) => + { + 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) => + { + e.preventDefault(); + formData.qr_code = null; + const data = await updateDog(formData); + showData(data/*, e*/); + } + return (

Profil

-
- {dog.data && } - Bild ändern - {dog.data && } +
+
+ {dog.data && } + Bild ändern +
+
+ {dog.data && } + +
diff --git a/src/components/Qr.tsx b/src/components/Qr.tsx index d511264..295f3db 100644 --- a/src/components/Qr.tsx +++ b/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(UserCtx) as UserCtxT; + const { user } = useContext(UserCtx) as UserCtxT; const [dog, setDog] = useState({}); // local dog not the dog in UserContext const [width, setWidth] = useState(2.4); const [height, setHeight] = useState(3.7); diff --git a/src/context/UserContext.tsx b/src/context/UserContext.tsx index fec09b3..bf74d80 100644 --- a/src/context/UserContext.tsx +++ b/src/context/UserContext.tsx @@ -1,6 +1,6 @@ -import React from 'react' -import {createContext, useState, useEffect} from 'react' -import axios from 'axios' +import React from 'react'; +import {createContext, useState, useEffect} from 'react'; +import { Axios } from '../services/PhpApi'; export type TUserContextProviderProps = { @@ -45,162 +45,24 @@ export type ResponseT = export type UserCtxT = { user: TUser | null, - setUser: React.Dispatch>, - - registerUser: ({ email, password }: { - email: string; - password: string; - }) => Promise, - - updateDog: ({ email, name, phone }: { - email: string; - name: string; - phone: string; - }) => Promise, - - 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, - - loginUser: ( - { email, password } : - { - email: string; - password: string; - }, - ) => Promise<{ - success: number; - message?: undefined; - } | { - success: number; - message: any; - }>, - - wait: boolean, - getUser: () => Promise, + + wait: boolean, + setWait: React.Dispatch>, - logout: () => void, - - getDog: (str: string | undefined) => Promise, - - dog: ResponseT + dog: ResponseT, + setDog: React.Dispatch } export const UserCtx = createContext(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(null); const [wait, setWait] = useState(false); const [dog, setDog] = useState({}); - 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 () => { @@ -235,50 +97,17 @@ 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('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 ( {children} diff --git a/src/services/CreateQr.ts b/src/services/CreateQr.ts index 574cb91..58bbe70 100644 --- a/src/services/CreateQr.ts +++ b/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'; diff --git a/src/services/FileUploadService.ts b/src/services/FileUploadService.ts index e40b423..69f981f 100644 --- a/src/services/FileUploadService.ts +++ b/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 => { let formData = new FormData(); diff --git a/src/services/PhpApi.ts b/src/services/PhpApi.ts new file mode 100644 index 0000000..4f28a8d --- /dev/null +++ b/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(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(UserCtx) as UserCtxT; + + var ret: ResponseT = {}; + setWait(true); + + try + { + ret = await Axios.post('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(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(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(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(UserCtx) as UserCtxT; + await Axios.get('logout.php'); + setUser(null); +} + +