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

useSWR

Browse Source
This commit is contained in:
Peter Hoppe
2023-01-30 00:02:26 +01:00
parent 752e6c491a
commit ff8e4bc831
11 changed files with 204 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
src/components/Profil.tsx
View File

@ -1,26 +1,30 @@
import React, { useContext, useState } from 'react';
import useSWR from 'swr';
import { Link } from 'react-router-dom';
import { ResponseT, UserCtx, UserCtxT } from '../context/UserContext';
import {Axios, getDog, updateDog} from '../services/PhpApi';
import toast, { Toaster } from 'react-hot-toast';
import { ResponseT} from '../context/UserContext';
import {getProfilData} from '../services/PhpApi';
import CreateQr from '../services/CreateQr';
import Img from './Img';
import './Profil.css';
function Profil()
{
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:'',
qr_code: null
});
const { data, error, isLoading } = useSWR( user?.qr_id, getDog);
const fetcher = () =>
{
}
// const { data, error, isLoading } = useSWR( user?.qr_id, getDog);
const { data, error, isLoading } = useSWR( "profilData", getProfilData);
// data ist dogdata und logindata
if (error) return (<div>failed to load</div>);
if (isLoading) return (<div>loading...</div>);
@ -37,106 +41,94 @@ function Profil()
// });
if(data.data.qr_code === null)
if(data.data.qr_code === null && document.getElementById("canvas") != null)
{
// qrcode generieren und in der Datenbank speichern
CreateQr({qr_id: user?.qr_id});
}
return (
<>
<div id="canvas"></div>
<div>got data</div>
</>
);
}
// })
// .catch((err) => console.error(err));
// }
// const onChangeInput = (e: React.FormEvent<HTMLInputElement> ) => {
// setFormData({
// ...formData,
// [e.currentTarget.name]:e.currentTarget.value
// })
// }
const onChangeInput = (e: React.FormEvent<HTMLInputElement> ) => {
setFormData({
...formData,
[e.currentTarget.name]:e.currentTarget.value
})
}
// function showData(data: any/*, e: React.FormEvent<HTMLFormElement> | React.MouseEvent<HTMLButtonElement>*/)
// {
// if(data.success)
// {
// setSuccessMsg('Daten geändert!');
// setErrMsg("false");
function showData(data: any/*, e: React.FormEvent<HTMLFormElement> | React.MouseEvent<HTMLButtonElement>*/)
{
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)
// {
// setSuccessMsg("false");
// setErrMsg(data.message);
// }
// }
// 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)
{
toast.error(data.message);
}
}
// const submitForm = async (e: React.FormEvent<HTMLFormElement>) =>
// {
// e.preventDefault();
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;
// }
if(!Object.values(formData).every(val => val?.trim() !== ''))
{
toast.error('Bitte alle Felder ausfüllen!');
return;
}
setFormData(formData);
}
// 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 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}>
// <div className='neben'>
// <label htmlFor="email">Email: </label>
// <input type="email" name="email" onChange={onChangeInput} placeholder="Deine email" id="email" value={formData.email} required />
// </div>
// <div className='neben'>
// <label htmlFor="name">Name: </label>
// <input type="text" name="name" onChange={onChangeInput} id="name" value={formData.name} required />
// </div>
// <div className='neben'>
// <label htmlFor="phone">Telefon: </label>
// <input type="text" name="phone" onChange={onChangeInput} id="phone" value={formData.phone} required />
// </div>
// {successMsg !== "false" && <div className="success-msg">{successMsg}</div>}
// {errMsg !== "false" && <div className="err-msg">{errMsg}</div>}
// <button type="submit" disabled={wait}>Update</button>
// </form>
// <Link to={"/qr"}>QR-Code drucken</Link>
// </div>
// )
const qr_refresh = (e: React.MouseEvent<HTMLButtonElement>) =>
{
e.preventDefault();
formData.qr_code = null;
setFormData(formData);
showData(data/*, e*/);
}
formData.email = data.data.email;
formData.name = data.data.name;
formData.phone = data.data.phone;
console.log(formData);
return (
<div className='Profil'>
<Toaster toastOptions={{ position: "top-center" }} />
<h2>Profil</h2>
<div className='neben'>
<div className='margin'>
{data.data && <Img pth={data.data.picture} className=''/>}
<Link to={'/upload'}>Bild ändern</Link>
</div>
<div className='margin'>
{data.data && <Img pth={data.data.qr_code} className=''/>}
<button onClick={qr_refresh}>QR aktualisieren</button>
</div>
<div id="canvas"></div>
</div>
<form onSubmit={submitForm}>
<div className='neben'>
<label htmlFor="email">Email: </label>
<input type="email" name="email" onChange={onChangeInput} placeholder="Deine email" id="email" value={formData.email} required />
</div>
<div className='neben'>
<label htmlFor="name">Name: </label>
<input type="text" name="name" onChange={onChangeInput} id="name" value={formData.name} required />
</div>
<div className='neben'>
<label htmlFor="phone">Telefon: </label>
<input type="text" name="phone" onChange={onChangeInput} id="phone" value={formData.phone} required />
</div>
<button type="submit">Update</button>
</form>
<Link to={"/qr"}>QR-Code drucken</Link>
</div>
)
}
export default Profil