install swr

2023-01-28 00:51:08 +01:00
parent 39921148ba
commit 752e6c491a
4 changed files with 133 additions and 101 deletions
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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": {
--- a/php/php-dog/upload.php
+++ b/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"])) 
    {
--- a/src/components/Profil.tsx
+++ b/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))
-    {
-        Axios.post<ResponseT>('getDog.php', 
-        {
-            qr_id: user.qr_id
-        })
-        .then((resDog) =>
-        {
-            setDog(resDog.data);
-            setFormData(
-                { 
-                    email: resDog.data.data.email, 
-                    name: resDog.data.data.name,
-                    phone: resDog.data.data.phone,
-                    qr_code: resDog.data.data.qr_code
-                });
-            if(resDog.data.data.qr_code === null)
+    if (error) return (<div>failed to load</div>);
+    if (isLoading) return (<div>loading...</div>);
+
+    console.log(data);
+    console.log(user);
+
+            // setDog(data);
+            // setFormData(
+            //     { 
+            //         email: data.data.email, 
+            //         name: data.data.name,
+            //         phone: data.data.phone,
+            //         qr_code: data.data.qr_code
+            //     });
+
+
+            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>
-            <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>
-  )
+            <div>got data</div>
+            </>
+            );
+              
+                 
+//         })
+//         .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>
+//             <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