profil

src/App.tsx

@@ -13,6 +13,7 @@ import Footer from './components/Footer';
 import Impressum from './components/Impressum';
 import "bootstrap/dist/css/bootstrap.min.css";
 import FileUpload from './components/FileUpload';
+import Profil from './components/Profil';
 
 
 const App: React.FC = () => 
@@ -34,6 +35,7 @@ const App: React.FC = () =>
                   <Route path="/reg" element={<Register/>} />
                   <Route path="/impressum" element={<Impressum/>} />
                   {user && <Route path="/upload" element={<FileUpload/>} />}
+                  {user && <Route path="/profil" element={<Profil/>} />}
               </Routes>
               <Footer/>
             </BrowserRouter>

src/components/Profil.css

@@ -0,0 +1,8 @@
+.Profil
+form
+{
+    width: 65%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+}

src/components/Profil.tsx

@@ -0,0 +1,92 @@
+import React, { useContext, useState } from 'react'
+import { Axios, ResponseT, UserCtx, UserCtxT } from '../context/UserContext';
+import './Profil.css';
+
+function Profil() 
+{
+    const { user, updateDog, 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:''
+    });
+
+    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
+                });   
+        })
+        .catch((err) => console.error(err));
+    }
+
+    const onChangeInput = (e: React.FormEvent<HTMLInputElement> ) => {
+        setFormData({
+            ...formData,
+            [e.currentTarget.name]:e.currentTarget.value
+        })
+    }
+
+    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);
+        if(data.success)
+        {
+            setSuccessMsg('Daten geändert!');
+            setErrMsg("false");
+            e.currentTarget.reset();
+        }
+        else if(!data.success && data.message)
+        {
+            setSuccessMsg("false");
+            setErrMsg(data.message);
+        }
+    }
+
+    return (
+        <div className='Profil'>
+            <h2>Profil</h2>
+            <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="password2" 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>
+        </div>
+  )
+}
+
+export default Profil

src/context/UserContext.tsx

@@ -48,6 +48,12 @@ export type UserCtxT =
         password: string;
     }) => Promise<any>,
     
+    updateDog: ({ email, name, phone }: {
+        email: string;
+        name: string;
+        phone: string;
+    }) => Promise<any>,
+    
     loginUser: (
         { email, password } : 
         {
@@ -104,6 +110,24 @@ export const UserCtxProvider = ({children}:TUserContextProviderProps) => {
         }
     }
 
+    const updateDog = async ({email, name, phone}:
+        {email: string, name: string, phone: string}) => {
+        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!'};
+        }
+    }
+
     const loginUser = async ({email,password}:{email: string, password: string}) => 
     {
         setWait(true);
@@ -212,6 +236,7 @@ export const UserCtxProvider = ({children}:TUserContextProviderProps) => {
         <UserCtx.Provider value={
             {
                 registerUser,
+                updateDog,
                 loginUser,
                 wait, 
                 user,