useSWR

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",

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",

php/php-dog/getProfilData.php

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

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,11 +13,13 @@ 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">

src/components/Button.tsx

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

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

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<UserCtxT | null>(UserCtx) as UserCtxT;
     const [redirect, setRedirect] = useState("false");
-    const [errMsg, setErrMsg] = useState("false");
     const [formData, setFormData] = useState({
         email:'',
         password:''

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 toast, { Toaster } from 'react-hot-toast';
-import {Axios, getDog, updateDog} from '../services/PhpApi';
+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});
             }              
+                 
+
+    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)
+        {
+            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)
+        {
+            toast.error(data.message);
+        }
+    }
+
+    const submitForm = async (e: React.FormEvent<HTMLFormElement>) => 
+    {
+        e.preventDefault();
+
+        if(!Object.values(formData).every(val => val?.trim() !== ''))
+        {
+            toast.error('Bitte alle Felder ausfüllen!');
+            return;
+        }
+        setFormData(formData);
+    }
+
+    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>got data</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>
-//         .catch((err) => console.error(err));
+                <div className='neben'>
-//     }
+                    <label htmlFor="name">Name: </label>
-
+                    <input type="text" name="name" onChange={onChangeInput} id="name" value={formData.name} required />
-//     const onChangeInput = (e: React.FormEvent<HTMLInputElement> ) => {
+                </div> 
-//         setFormData({
+                <div className='neben'>
-//             ...formData,
+                    <label htmlFor="phone">Telefon: </label>
-//             [e.currentTarget.name]:e.currentTarget.value
+                    <input type="text" name="phone" onChange={onChangeInput} id="phone" value={formData.phone} required />
-//         })
+                </div>
-//     }
+                <button type="submit">Update</button>
-
+            </form>
-//     function showData(data: any/*, e: React.FormEvent<HTMLFormElement> | React.MouseEvent<HTMLButtonElement>*/)
+        <Link to={"/qr"}>QR-Code drucken</Link>
-//     {
+        </div>
-//         if(data.success)
+  )
-//         {
-//             setSuccessMsg('Daten geändert!');
-//             setErrMsg("false");
-
-//             // 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);
-//         }
-//     }
-
-//     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 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>
-//   )
 }
 
 export default Profil

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

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(
   <React.StrictMode>
-    <UserCtxProvider>
       <App />
-    </UserCtxProvider>
   </React.StrictMode>
 );
 

src/services/PhpApi.ts

@@ -1,5 +1,4 @@
-import {UserCtx, UserCtxT, ResponseT, TUser} from '../context/UserContext';
+import {ResponseT, TUser} from '../context/UserContext';
-import React, {useContext} from 'react';
 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 () => 
+export const getProfilData = async () =>
-// {
+{
-//     await Axios.get('logout.php');
+    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;
+    }
+}
+