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

63
src/components/Button.tsx
View File

@ -1,63 +0,0 @@
import { useState, useEffect } from 'react'
let timer : NodeJS.Timer; //you need to have a global variable for your `timer`
export default function Button(
{
label,
MouseAction,
}:
{
label: string,
MouseAction: () => void
}
)
{
const [mouseDown, setMouseDown] = useState(false);
const [forceRender, setForceRender] = useState(0);
useEffect(() =>
{
if(mouseDown)
{ //if holding mouse, we trigger `repeat`
repeat(() =>
{
MouseAction();
//setForceRender(forceRender + 1);
//console.log("\nuseEffect mouseDown " + forceRender);
});
}
else
{
stop() //stop it if releasing mouse holding
//console.log("\nuseEffect stop " + forceRender);
}
}, [mouseDown, MouseAction]) //to track mouse holding behaviour changes
const repeat = (what: () => void) =>
{
timer = setInterval(what, 100)
};
function start()
{
console.log("\nstart");
setMouseDown(true);
}
function stop()
{
console.log("\nstop");
clearInterval(timer);
setMouseDown(false);
}
return (
<div>
<button
onMouseDown={start}
onMouseUp={stop}
>{label}</button>
</div>
)
}

4
src/components/Header.tsx
View File

@ -1,13 +1,11 @@
import React, { useContext } from 'react'
import './Header.css';
import '../App.css';
import {UserCtx, UserCtxT} from '../context/UserContext';
import { useNavigate } from 'react-router-dom';
import {Axios} from '../services/PhpApi'
function Header() {
const {setUser} = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
const navigate = useNavigate();
const logOut = () =>
@ -19,8 +17,6 @@ function Header() {
})
.catch((err) => console.error(err));
setUser(null);
navigate('/'); // login
}

3
src/components/Login.tsx
View File

@ -1,14 +1,11 @@
import {useState,useContext} from 'react';
import { Link, useNavigate } from 'react-router-dom';
import {UserCtx, UserCtxT} from '../context/UserContext';
import './Login.css';
import {loginUser} from '../services/PhpApi'
const Login = () =>
{
const {wait, getUser, user} = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
const [redirect, setRedirect] = useState("false");
const [errMsg, setErrMsg] = useState("false");
const [formData, setFormData] = useState({
email:'',
password:''

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