From ff8e4bc831fb6f358f67e287d19127103575d6ed Mon Sep 17 00:00:00 2001 From: Peter Hoppe Date: Mon, 30 Jan 2023 00:02:26 +0100 Subject: [PATCH] useSWR --- package-lock.json | 24 +++++ package.json | 1 + php/php-dog/getProfilData.php | 58 +++++++++++ src/App.tsx | 9 +- src/components/Button.tsx | 63 ------------ src/components/Header.tsx | 4 - src/components/Login.tsx | 3 - src/components/Profil.tsx | 186 ++++++++++++++++------------------ src/context/UserContext.tsx | 81 --------------- src/index.tsx | 3 - src/services/PhpApi.ts | 56 +++++----- 11 files changed, 204 insertions(+), 284 deletions(-) create mode 100644 php/php-dog/getProfilData.php delete mode 100644 src/components/Button.tsx diff --git a/package-lock.json b/package-lock.json index a9fa663..12517f0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index e8c7248..2c3833a 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/php/php-dog/getProfilData.php b/php/php-dog/getProfilData.php new file mode 100644 index 0000000..971356b --- /dev/null +++ b/php/php-dog/getProfilData.php @@ -0,0 +1,58 @@ +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(); +?> \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 7d08fbf..23c9b41 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -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(UserCtx) as UserCtxT; - + const {data} = useSWR("user", getUser); + const user = data.user; + return (
diff --git a/src/components/Button.tsx b/src/components/Button.tsx deleted file mode 100644 index 812ac4a..0000000 --- a/src/components/Button.tsx +++ /dev/null @@ -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 ( -
- -
- ) -} diff --git a/src/components/Header.tsx b/src/components/Header.tsx index fe16a3d..e85df42 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -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(UserCtx) as UserCtxT; const navigate = useNavigate(); const logOut = () => @@ -19,8 +17,6 @@ function Header() { }) .catch((err) => console.error(err)); - setUser(null); - navigate('/'); // login } diff --git a/src/components/Login.tsx b/src/components/Login.tsx index 6983ec6..0b50a95 100644 --- a/src/components/Login.tsx +++ b/src/components/Login.tsx @@ -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(UserCtx) as UserCtxT; const [redirect, setRedirect] = useState("false"); - const [errMsg, setErrMsg] = useState("false"); const [formData, setFormData] = useState({ email:'', password:'' diff --git a/src/components/Profil.tsx b/src/components/Profil.tsx index b77d388..e4786c3 100644 --- a/src/components/Profil.tsx +++ b/src/components/Profil.tsx @@ -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(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:'', 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 (
failed to load
); if (isLoading) return (
loading...
); @@ -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 ( - <> -
-
got data
- - ); - + } -// }) -// .catch((err) => console.error(err)); -// } -// const onChangeInput = (e: React.FormEvent ) => { -// setFormData({ -// ...formData, -// [e.currentTarget.name]:e.currentTarget.value -// }) -// } + const onChangeInput = (e: React.FormEvent ) => { + setFormData({ + ...formData, + [e.currentTarget.name]:e.currentTarget.value + }) + } -// function showData(data: any/*, e: React.FormEvent | React.MouseEvent*/) -// { -// if(data.success) -// { -// setSuccessMsg('Daten geändert!'); -// setErrMsg("false"); + function showData(data: any/*, e: React.FormEvent | React.MouseEvent*/) + { + if(data.success) + { + toast.success('Daten geändert!'); -// // 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) -// { -// setSuccessMsg("false"); -// setErrMsg(data.message); -// } -// } + // 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) + { + toast.error(data.message); + } + } -// const submitForm = async (e: React.FormEvent) => -// { -// e.preventDefault(); + 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; -// } + 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) => -// { -// e.preventDefault(); -// formData.qr_code = null; -// const data = await updateDog(formData); -// showData(data/*, e*/); -// } - -// return ( -//
-//

Profil

-//
-//
-// {dog.data && } -// Bild ändern -//
-//
-// {dog.data && } -// -//
-//
-//
-//
-//
-// -// -//
-//
-// -// -//
-//
-// -// -//
-// {successMsg !== "false" &&
{successMsg}
} -// {errMsg !== "false" &&
{errMsg}
} -// -//
-// QR-Code drucken -//
-// ) + const qr_refresh = (e: React.MouseEvent) => + { + 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 ( +
+ +

Profil

+
+
+ {data.data && } + Bild ändern +
+
+ {data.data && } + +
+
+
+
+
+ + +
+
+ + +
+
+ + +
+ +
+ QR-Code drucken +
+ ) } export default Profil \ No newline at end of file diff --git a/src/context/UserContext.tsx b/src/context/UserContext.tsx index bf74d80..c0200a1 100644 --- a/src/context/UserContext.tsx +++ b/src/context/UserContext.tsx @@ -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>, - getUser: () => Promise, - - wait: boolean, - setWait: React.Dispatch>, - - dog: ResponseT, - setDog: React.Dispatch -} - -export const UserCtx = createContext(null); - -export const UserCtxProvider = ({children}:TUserContextProviderProps) => { - - const [user, setUser] = useState(null); - const [wait, setWait] = useState(false); - const [dog, setDog] = useState({}); - - - 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 ( - - {children} - - ); - -} \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index 4b6314a..378934e 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -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( - - ); diff --git a/src/services/PhpApi.ts b/src/services/PhpApi.ts index a74c7c4..b8a7634 100644 --- a/src/services/PhpApi.ts +++ b/src/services/PhpApi.ts @@ -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(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 => { var ret: ResponseT = {}; -// setWait(true); try { @@ -40,14 +34,11 @@ export const getDog = async ( str: string | undefined) : Promise => { 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 => 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!'}; } } @@ -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(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(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; + } +} +