localhost geht hop-fly nicht

src/components/Dog.tsx

@@ -1,15 +1,47 @@
-import React from 'react'
-import { useParams, useSearchParams } from "react-router-dom";
+import { ResponseT, UserCtx, UserCtxT } from '../context/UserContext';
+import React, { useContext, useState } from 'react'
+import { useParams } from "react-router-dom";
+import Img from './Img';
+import DogNameTxt from './DogNameTxt';
 
-export default function Dog() 
+const Dog = () => 
 {
+  const {getDog, dog} = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
+
+  // m7MdMK
   const params = useParams();
-  const searchParams = useSearchParams();
+  const qr_id = Object.values(params)[0];
+  var data;
+  var needData = dog.success === undefined;
+  if(needData)
+  {
+    data = getDog(qr_id); // await not allowed?! => workaraound
+  }
+  var email = "nicht definiert;"
+  var phone = "nicht definiert;"
+  var picPath = "nicht definiert;"
+  var qrPath = "nicht definiert;"
+  var name = "nicht definiert;"
+  if(dog.success === 1)
+  {
+    name = dog.data.name;
+    qrPath = dog.data.qr_code;
+    picPath = dog.data.picture;
+    email = dog.data.email;
+    phone = dog.data.phone;
+  }
+
   return (
     <div>
-      <h1>Dog</h1>
-      <p>{Object.keys(params)[0]}: {Object.values(params)[0]}</p>     
-      <p>{Object.keys(params)[1]}: {Object.values(params)[1]}</p>     
+      <h1>Hast Du mich gefunden?</h1>
+      {/* <p>name: {name}</p>
+      <p>email: {email}</p>
+      <p>phone: {phone}</p>
+      <p>pic: {picPath}</p>
+      <p>qr: {qrPath}</p> */}
+      <Img pth={picPath} />
+      <DogNameTxt name={name} email={email} phone={phone} />
     </div>
   )
-}
+}
+export default Dog;

src/components/DogNameTxt.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+export default function DogNameTxt(
+    {name, email, phone}: 
+    {name: string, email: string, phone: string}) {
+  return (
+    <div>
+      <p>Hallo ich bin die <p>{name}!</p></p>
+      <p>bitte schreib eine Mail an <p>{email}</p>  
+      oder ruf <p>{phone} an,</p>damit ich schnell wieder Heim komme.</p>
+    </div>
+  )
+}

src/components/Img.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+
+export default function Img({pth}: {pth: string}) 
+{
+  return (
+    <div>
+      <img src={'./uploads' + pth} width="300" />
+    </div>
+  )
+}

src/components/Pic.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function Pic() {
+  return (
+    <div>
+      
+    </div>
+  )
+}

src/components/Register.tsx

@@ -19,7 +19,8 @@ const Register = () => {
         })
     }
 
-    const submitForm = async (e: React.FormEvent<HTMLFormElement>) => {
+    const submitForm = async (e: React.FormEvent<HTMLFormElement>) => 
+    {
         e.preventDefault();
 
         if(!Object.values(formData).every(val => val.trim() !== '')){
@@ -38,7 +39,6 @@ const Register = () => {
             setSuccessMsg("false");
             setErrMsg(data.message);
         }
-        
     }
 
     return (