hope/dog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

phpapi not ready

Browse Source
This commit is contained in:
Peter Hoppe
2023-01-18 16:58:10 +01:00
parent da15265766
commit 3cee42fd50
9 changed files with 215 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/App.css
View File

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

3
src/components/Header.tsx
View File

@ -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() {

3
src/components/PreviewUpload.tsx
View File

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

65
src/components/Profil.tsx
View File

@ -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}>

5
src/components/Qr.tsx
View File

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

191
src/context/UserContext.tsx
View File

@ -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<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
dog: ResponseT,
setDog: React.Dispatch<any>
}
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,
getDog,
dog
dog,
setDog
}}
>
{children}

2
src/services/CreateQr.ts
View File

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

2
src/services/FileUploadService.ts
View File

@ -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();

144
src/services/PhpApi.ts Normal file
View File

@ -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);
}