fileinput

src/components/Profil.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import useSWR from 'swr';
 import { Link } from 'react-router-dom';
 import toast, { Toaster } from 'react-hot-toast';
@@ -8,6 +8,7 @@ import CreateQr from '../services/CreateQr';
 import Img from './Img';
 import './InputForm.css';
 import './Profil.css';
+import { TextInput } from '@mantine/core';
 
 function Profil() 
 {
@@ -20,6 +21,9 @@ function Profil()
 
 //    const { data, error, isLoading } = useSWR( user?.qr_id, getDog);
     const { data, error, isLoading, mutate } = useSWR( "profilData", getProfilData);
+
+    const edit = useRef(false);
+    const formDataSave = useRef(formData); // just to fill it
 // data ist dogdata, logindata holt sich getProfilData.php aus $_SESSION
     if (error) return (<div>failed to load</div>);
     if (isLoading) return (<div>loading...</div>);
@@ -55,15 +59,9 @@ function Profil()
         qr_code: ''
     };
 
-    if (formData.email)
+    if (edit.current)
     {
-        formData_loc =
-        {
-            email: formData.email,
-            name: formData.name,
-            phone: formData.phone,
-            qr_code: formData.qr_code
-        };
+        formData_loc = {...formDataSave.current}; // copy constructor
     }
     else
     {
@@ -83,7 +81,9 @@ function Profil()
             ...formData_loc,
             [e.currentTarget.name]:e.currentTarget.value
         };
-        setFormData(formData_loc);    
+        setFormData(formData_loc);   
+        edit.current = true; 
+        formDataSave.current = {...formData_loc};
     }
 
     function showData(data: any/*, e: React.FormEvent<HTMLFormElement> | React.MouseEvent<HTMLButtonElement>*/)
@@ -159,18 +159,32 @@ function Profil()
                 <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_loc.email} required />
-                </div>
-                <div className='neben'>
-                    <label htmlFor="name">Name: </label>
-                    <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_loc.phone} required />
-                </div>
+            <TextInput
+                label = 'Email:'
+                type="email" 
+                name="email" 
+                onChange={onChangeInput} 
+                placeholder="Deine Email" 
+                id="email" 
+                value={formData_loc.email} 
+                required />
+            <TextInput
+                label = 'Name:'
+                type="text" 
+                name="name" 
+                onChange={onChangeInput} 
+                placeholder="Name des Tieres" 
+                id="name" 
+                value={formData_loc.name} 
+                required />
+            <TextInput
+                label = 'Telefon:'
+                type="text" 
+                name="phone" 
+                onChange={onChangeInput} 
+                id="phone" 
+                value={formData_loc.phone} 
+                required />
                 <button type="submit">Update</button>
             </form>
             </div>