install swr

package-lock.json

@@ -24,6 +24,7 @@
         "react-repeatable": "^2.0.1",
         "react-router-dom": "^6.4.5",
         "react-scripts": "5.0.1",
+        "swr": "^2.0.2",
         "typescript": "^4.9.4",
         "use-fit-text": "^2.4.0",
         "web-vitals": "^2.1.4"
@@ -15403,6 +15404,20 @@
         "boolbase": "~1.0.0"
       }
     },
+    "node_modules/swr": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-2.0.2.tgz",
+      "integrity": "sha512-iHbQW17hsduonMEliZnr6/yaxb+yvLe2r0+AH+ZfeqKzwc2bb+QRYpZm5/b/H0Lxgy7VWow4o71JeSazSun+9A==",
+      "dependencies": {
+        "use-sync-external-store": "^1.2.0"
+      },
+      "engines": {
+        "pnpm": "7"
+      },
+      "peerDependencies": {
+        "react": "^16.11.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -15925,6 +15940,14 @@
         "react": ">=16.8.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",

package.json

@@ -19,6 +19,7 @@
     "react-repeatable": "^2.0.1",
     "react-router-dom": "^6.4.5",
     "react-scripts": "5.0.1",
+    "swr": "^2.0.2",
     "typescript": "^4.9.4",
     "use-fit-text": "^2.4.0",
     "web-vitals": "^2.1.4"
@@ -30,7 +31,7 @@
     "eject": "react-scripts eject",
     "build:local": "env-cmd -f .env.local npm run build",
     "build:hope-fly": "env-cmd -f .env.hope-fly npm run build",
-    "postbuild:local": "cp ./src/.htaccess ./build && sudo cp -vrRT ./build/. /opt/lampp/htdocs/dog/",
+    "postbuild:local": "cp ./src/.htaccess ./build && cp -vrRT ./build/. /opt/lampp/htdocs/dog/",
     "postbuild:hope-fly": "cp ./src/.htaccess ./build"
   },
   "eslintConfig": {

php/php-dog/upload.php

@@ -135,7 +135,7 @@ try {
     }
 
     $targetFilePath = $targetDir . '/' . $newFilename;
-//    echo "targetFilePath   ". $targetFilePath."\n";
+    echo "targetFilePath   ". $targetFilePath."\n";
 
     if (isset($_POST["submit"]) && !empty($_FILES["file"]["name"])) 
     {

src/components/Profil.tsx

@@ -1,7 +1,8 @@
-import React, { useContext, useState } from 'react'
+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, updateDog} from '../services/PhpApi';
+import {Axios, getDog, updateDog} from '../services/PhpApi';
 import CreateQr from '../services/CreateQr';
 import Img from './Img';
 import './Profil.css';
@@ -18,117 +19,124 @@ function Profil()
         phone:'',
         qr_code: null
     });
+    const { data, error, isLoading } = useSWR( user?.qr_id, getDog);
 
-    if(user && (dog === undefined || dog.success === undefined))
+    if (error) return (<div>failed to load</div>);
-    {
+    if (isLoading) return (<div>loading...</div>);
-        Axios.post<ResponseT>('getDog.php', 
+
-        {
+    console.log(data);
-            qr_id: user.qr_id
+    console.log(user);
-        })
+
-        .then((resDog) =>
+            // setDog(data);
-        {
+            // setFormData(
-            setDog(resDog.data);
+            //     { 
-            setFormData(
+            //         email: data.data.email, 
-                { 
+            //         name: data.data.name,
-                    email: resDog.data.data.email, 
+            //         phone: data.data.phone,
-                    name: resDog.data.data.name,
+            //         qr_code: data.data.qr_code
-                    phone: resDog.data.data.phone,
+            //     });
-                    qr_code: resDog.data.data.qr_code
+
-                });
+
-            if(resDog.data.data.qr_code === null)
+            if(data.data.qr_code === null)
             {
                 // qrcode generieren und in der Datenbank speichern
-                CreateQr({qr_id: user.qr_id});
+                CreateQr({qr_id: user?.qr_id});
             }
-              
-                 
-        })
-        .catch((err) => console.error(err));
-    }
-
-    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");
-
-            // 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>
+            <div>got data</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'>
+//         .catch((err) => console.error(err));
-                    <label htmlFor="name">Name: </label>
+//     }
-                    <input type="text" name="name" onChange={onChangeInput} id="name" value={formData.name} required />
+
-                </div> 
+//     const onChangeInput = (e: React.FormEvent<HTMLInputElement> ) => {
-                <div className='neben'>
+//         setFormData({
-                    <label htmlFor="phone">Telefon: </label>
+//             ...formData,
-                    <input type="text" name="phone" onChange={onChangeInput} id="phone" value={formData.phone} required />
+//             [e.currentTarget.name]:e.currentTarget.value
-                </div>
+//         })
-                {successMsg !== "false" && <div className="success-msg">{successMsg}</div>}
+//     }
-                {errMsg !== "false" && <div className="err-msg">{errMsg}</div>}
+
-                <button type="submit" disabled={wait}>Update</button>
+//     function showData(data: any/*, e: React.FormEvent<HTMLFormElement> | React.MouseEvent<HTMLButtonElement>*/)
-            </form>
+//     {
-        <Link to={"/qr"}>QR-Code drucken</Link>
+//         if(data.success)
-        </div>
+//         {
-  )
+//             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