Profil

src/components/PreviewUpload.tsx

@@ -5,19 +5,20 @@ import useSWR from 'swr';
 
 function PreviewUpload({chgFile}:{chgFile: any}) 
 {
+  const [file, setFile] = useState('');
   const [dimensionWidth, setDimensionWidth] = useState(0);
   const [dimensionHeight, setDimensionHeight] = useState(0);
 
 //  const [dog, setDog] = useState<ResponseT | any>({}); // local dog not the dog in UserContext
 
-  const { data, error, isLoading  } = useSWR(['PreviewUpload', 'SESS'], getDog );
+  const { data, error, isLoading, mutate } = useSWR(['PreviewUpload', 'SESS'], getDog );
   if (error) return (<div>failed to load</div>);
   if (isLoading) return (<div>loading...</div>);
 
   console.log('PreviewUpload getDog');
   console.log(data);
   const dog: ResponseT | any = data.data;
-  let file: string | undefined = "./uploads"+ data.data.picture;
+  let file_loc: string | undefined = "./uploads"+ data.data.picture;
 
 //  setDog(data.data);
 //  setFile("./uploads"+ data.data.picture);
@@ -46,7 +47,7 @@ function PreviewUpload({chgFile}:{chgFile: any})
     console.log('dimensions: ', dimensions);
     console.log('dimensions width: ', dimensions.width);
     console.log('dimensions height: ', dimensions.height);
-    file = fileLoaded;
+    setFile(fileLoaded);
 
     chgFile(event);
   };
@@ -79,7 +80,7 @@ function PreviewUpload({chgFile}:{chgFile: any})
       />
       <div className='prevUplImg'>
       <img
-        src={file}
+        src={file ? file : file_loc}
         style={{
           display: 'flex',
           border: '2px solid tomato',

src/components/Profil.css

@@ -6,3 +6,8 @@ form
     flex-direction: column;
     align-items: flex-end;
 }
+
+button.QRakt
+{
+    max-width: 80%;
+}

src/components/Profil.tsx

@@ -3,7 +3,7 @@ import useSWR from 'swr';
 import { Link } from 'react-router-dom';
 import toast, { Toaster } from 'react-hot-toast';
 import { ResponseT, TUser} from '../context/UserContext';
-import {getProfilData} from '../services/PhpApi';
+import {getProfilData, updateDog} from '../services/PhpApi';
 import CreateQr from '../services/CreateQr';
 import Img from './Img';
 import './Profil.css';
@@ -18,7 +18,7 @@ function Profil()
     });
 
 //    const { data, error, isLoading } = useSWR( user?.qr_id, getDog);
-    const { data, error, isLoading } = useSWR( "profilData", getProfilData);
+    const { data, error, isLoading, mutate } = useSWR( "profilData", getProfilData);
 // data ist dogdata, logindata holt sich getProfilData.php aus $_SESSION
     if (error) return (<div>failed to load</div>);
     if (isLoading) return (<div>loading...</div>);
@@ -51,12 +51,24 @@ function Profil()
                 CreateQr({qr_id: user?.qr_id});
             }              
 
+    let formData_loc =
+    {
+        email: data.data.email,
+        name: data.data.name,
+        phone: data.data.phone
+    };
 
-    const onChangeInput = (e: React.FormEvent<HTMLInputElement> ) => {
+                     
-        setFormData({
+
-            ...formData,
+    const onChangeInput = (e: React.FormEvent<HTMLInputElement> ) => 
-            [e.currentTarget.name]:e.currentTarget.value
+    {
-        })
+        formData_loc = {...formData,[e.currentTarget.name]:e.currentTarget.value};
+        setFormData(
+            {
+                ...formData,
+                [e.currentTarget.name]:e.currentTarget.value
+            }
+        );    
     }
 
     function showData(data: any/*, e: React.FormEvent<HTMLFormElement> | React.MouseEvent<HTMLButtonElement>*/)
@@ -88,8 +100,10 @@ function Profil()
         }
         setFormData(formData);
 
-        // update data with phpapi
+        const data = await updateDog(formData);
-        // mutate
+        mutate();
+        showData(data);
+
     }
 
     const qr_refresh = (e: React.MouseEvent<HTMLButtonElement>) => 
@@ -99,14 +113,19 @@ function Profil()
         setFormData(formData);
         showData(data/*, e*/);
 
+        if(document.getElementById("canvas") != null)
+        {
+            // qrcode generieren und in der Datenbank speichern
+            CreateQr({qr_id: user?.qr_id});
+        }              
         // update data with phpapi
-        // mutate
+        mutate();
     }
-    formData.email = data.data.email;
+
-    formData.name = data.data.name;
-    formData.phone = data.data.phone;
     console.log('Profil formData');
     console.log(formData);
+    console.log('Profil formData_loc');
+    console.log(formData_loc);
     return (
         <div className='Profil'>
             <Toaster toastOptions={{ position: "top-center" }} />
@@ -118,22 +137,22 @@ function Profil()
                 </div>
                 <div className='margin'>
                     {data.data && <Img pth={data.data.qr_code} className=''/>}
-                    <button onClick={qr_refresh}>QR aktualisieren</button>
+                    <button className='QRakt' 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 />
+                    <input type="email" name="email" onChange={onChangeInput} placeholder="Deine email" id="email" value={formData_loc.email} required />
                 </div>
                 <div className='neben'>
                     <label htmlFor="name">Name: </label>
-                    <input type="text" name="name" onChange={onChangeInput} id="name" value={formData.name} required />
+                    <input type="text" name="name" onChange={onChangeInput} id="name" value={formData_loc.name} required />
                 </div> 
                 <div className='neben'>
                     <label htmlFor="phone">Telefon: </label>
-                    <input type="text" name="phone" onChange={onChangeInput} id="phone" value={formData.phone} required />
+                    <input type="text" name="phone" onChange={onChangeInput} id="phone" value={formData_loc.phone} required />
                 </div>
                 <button type="submit">Update</button>
             </form>