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

24
package-lock.json generated
View File

@ -21,6 +21,7 @@
"qr-code-styling": "^1.6.0-rc.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hot-toast": "^2.4.0",
"react-repeatable": "^2.0.1",
"react-router-dom": "^6.4.5",
"react-scripts": "5.0.1",
@ -8303,6 +8304,14 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/goober": {
"version": "2.1.11",
"resolved": "https://registry.npmjs.org/goober/-/goober-2.1.11.tgz",
"integrity": "sha512-5SS2lmxbhqH0u9ABEWq7WPU69a4i2pYcHeCxqaNq6Cw3mnrF0ghWNM4tEGid4dKy8XNIAUbuThuozDHHKJVh3A==",
"peerDependencies": {
"csstype": "^3.0.10"
}
},
"node_modules/gopd": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
@ -14038,6 +14047,21 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
"integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
},
"node_modules/react-hot-toast": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.4.0.tgz",
"integrity": "sha512-qnnVbXropKuwUpriVVosgo8QrB+IaPJCpL8oBI6Ov84uvHZ5QQcTp2qg6ku2wNfgJl6rlQXJIQU5q+5lmPOutA==",
"dependencies": {
"goober": "^2.1.10"
},
"engines": {
"node": ">=10"
},
"peerDependencies": {
"react": ">=16",
"react-dom": ">=16"
}
},
"node_modules/react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",

1
package.json
View File

@ -16,6 +16,7 @@
"qr-code-styling": "^1.6.0-rc.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hot-toast": "^2.4.0",
"react-repeatable": "^2.0.1",
"react-router-dom": "^6.4.5",
"react-scripts": "5.0.1",

58
php/php-dog/getProfilData.php Normal file
View File

@ -0,0 +1,58 @@
<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: access");
header("Access-Control-Allow-Methods: POST");
header("Content-Type: application/json; charset=UTF-8");
header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
session_start();
require __DIR__.'/classes/Database.php';
require __DIR__.'/classes/lib.php';
$db_connection = new Database();
$conn = $db_connection->dbConnection();
$returnData = new CMsg(0);
$fields = ['fields' => ['qr_id']];
if(isset($_SESSION['user']))
{
$returnData = new CMsg(0,422,'Please Login!');
}
// IF THERE ARE NO EMPTY FIELDS THEN-
else
{
$user = $_SESSION['user'];
$qr_id = trim($user->qr_id);
try
{
$fetch_user_qr_id =
"SELECT id, qr_id, email, name, phone,
qr_width_cm, qr_height_cm, qr_fontsize, qr_visible_items, qr_item_sequence,
qr_code, picture FROM `dogs` WHERE `qr_id`=:qr_id";
$query_stmt = $conn->prepare($fetch_user_qr_id);
$query_stmt->bindValue(':qr_id', $qr_id,PDO::PARAM_STR);
$query_stmt->execute();
// IF THE dog IS FOUNDED BY qr_id
if($query_stmt->rowCount())
{
$row = $query_stmt->fetch(PDO::FETCH_ASSOC);
$returnData = new CMsg(1,200,'get dog',$fields,$row);
}
else
{
$returnData = new CMsg(0,422,'no dog',$fields);
}
}
catch(PDOException $e)
{
$returnData = new CMsg(0,500,$e->getMessage(),$fields);
}
}
echo $returnData->jsonarray();
?>

9
src/App.tsx
View File

@ -6,7 +6,6 @@ import Login from './components/Login';
import Register from './components/Register';
import Home from './components/Home';
import Dog from './components/Dog';
import {UserCtx, UserCtxT} from './context/UserContext';
import Qr from './components/Qr';
import Header from './components/Header';
import Footer from './components/Footer';
@ -14,12 +13,14 @@ import Impressum from './components/Impressum';
import "bootstrap/dist/css/bootstrap.min.css";
import FileUpload from './components/FileUpload';
import Profil from './components/Profil';
import useSWR from 'swr';
import {getUser} from './services/PhpApi'
const App: React.FC = () =>
{
const {user} = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
const {data} = useSWR("user", getUser);
const user = data.user;
return (
<div className="App">
<div className="col middle">

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

81
src/context/UserContext.tsx
View File

@ -1,11 +1,5 @@
import React from 'react';
import {createContext, useState, useEffect} from 'react';
import { Axios } from '../services/PhpApi';
export type TUserContextProviderProps =
{
children: React.ReactNode
}
export type TUser =
{
@ -40,78 +34,3 @@ export type ResponseT =
data: DogT
} | any;
export type UserCtxT =
{
user: TUser | null,
setUser: React.Dispatch<React.SetStateAction<TUser | null>>,
getUser: () => Promise<void>,
wait: boolean,
setWait: React.Dispatch<React.SetStateAction<boolean>>,
dog: ResponseT,
setDog: React.Dispatch<any>
}
export const UserCtx = createContext<UserCtxT | null>(null);
export const UserCtxProvider = ({children}:TUserContextProviderProps) => {
const [user, setUser] = useState<TUser | null>(null);
const [wait, setWait] = useState(false);
const [dog, setDog] = useState<ResponseT>({});
const getUser = async () =>
{
if(user)
{
const {data} = await Axios.get('getUser.php');
if(data.success && data.user)
{
setUser(data.user);
return;
}
//setUser(null);
}
else
{
const session = await Axios.get('session.php');
const {data} = session;
if(data.success && data.user)
{
setUser(data.user);
return;
}
}
setUser(null);
}
useEffect(() =>
{
async function asyncCall()
{
await getUser();
}
asyncCall();
},[]);
return (
<UserCtx.Provider value={
{
wait,
setWait,
user,
setUser,
getUser,
dog,
setDog
}}
>
{children}
</UserCtx.Provider>
);
}

3
src/index.tsx
View File

@ -2,16 +2,13 @@ import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { UserCtxProvider } from './context/UserContext';
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<React.StrictMode>
<UserCtxProvider>
<App />
</UserCtxProvider>
</React.StrictMode>
);

56
src/services/PhpApi.ts
View File

@ -1,5 +1,4 @@
import {UserCtx, UserCtxT, ResponseT, TUser} from '../context/UserContext';
import React, {useContext} from 'react';
import {ResponseT, TUser} from '../context/UserContext';
import axios from 'axios'
export const Axios = axios.create({
@ -12,19 +11,15 @@ export const Axios = axios.create({
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!'};
}
}
@ -32,7 +27,6 @@ export const updateDog = async ({email, name, phone}:
export const getDog = async ( str: string | undefined) : Promise<ResponseT> =>
{
var ret: ResponseT = {};
// setWait(true);
try
{
@ -40,14 +34,11 @@ export const getDog = async ( str: string | undefined) : Promise<ResponseT> =>
{
qr_id: str
});
// setDog(ret.data as ResponseT);
// setWait(false);
return ret.data as ResponseT;
}
catch (error:any)
{
console.log('error message: ', error.message);
// setWait(false);
ret =
{
success: 0,
@ -63,20 +54,16 @@ export const getDog = async ( str: string | undefined) : Promise<ResponseT> =>
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!'};
}
}
@ -84,9 +71,6 @@ export const registerUser = async ({email,password}:
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',
@ -97,20 +81,16 @@ export const updateQR = async ({qr_width_cm, qr_height_cm, qr_fontsize, qr_visib
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:
@ -133,23 +113,41 @@ export const loginUser = async ({email,password}:{email: string, password: strin
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 () =>
// {
// await Axios.get('logout.php');
// }
export const getProfilData = async () =>
{
const profilData = await Axios.post('getProfilData.php');
const {data} = profilData;
if(data.success && data.user)
{
return data;
}
else
{
return null;
}
}
export const getUser = async () =>
{
const {data} = await Axios.get('getUser.php');
if(data.success && data.user)
{
return data;
}
else
{
return null;
}
}