profil mit bild

src/components/PreviewUpload.tsx

@@ -1,10 +1,29 @@
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
+import { Axios, ResponseT, UserCtx, UserCtxT } from '../context/UserContext';
 
 function PreviewUpload({chgFile}:{chgFile: any}) {
   const [file, setFile] = useState<string | undefined >(undefined);
   const [dimensionWidth, setDimensionWidth] = useState(0);
   const [dimensionHeight, setDimensionHeight] = useState(0);
 
+  const { user } = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
+  const [dog, setDog] = useState<ResponseT | any>({}); // local dog not the dog in UserContext
+
+  if(user && (dog === undefined || dog.success === undefined))
+  {
+	  Axios.post<ResponseT>('getDog.php', 
+	  {
+		  qr_id: user.qr_id
+	  })
+	  .then((resDog) =>
+	  {
+		  setDog(resDog.data);
+      setFile("./uploads"+resDog.data.data.picture);
+	  })
+	  .catch((err) => console.error(err));
+  }
+
+
   const handleChange = async (
     event: React.ChangeEvent<HTMLInputElement>
   ): Promise<any> => {

src/components/Profil.tsx

@@ -1,5 +1,7 @@
 import React, { useContext, useState } from 'react'
+import { Link } from 'react-router-dom';
 import { Axios, ResponseT, UserCtx, UserCtxT } from '../context/UserContext';
+import Img from './Img';
 import './Profil.css';
 
 function Profil() 
@@ -68,6 +70,10 @@ function Profil()
     return (
         <div className='Profil'>
             <h2>Profil</h2>
+            <div>
+                {dog.data && <Img pth={dog.data.picture}/>}
+                <Link to={'/upload'}>Bild ändern</Link>
+            </div>
             <form onSubmit={submitForm}>
                 <div className='neben'>
                     <label htmlFor="email">Email: </label>