preview

src/components/Dog.tsx

@@ -5,29 +5,29 @@ import Img from './Img';
 import DogNameTxt from './DogNameTxt';
 import './Dog.css';
 import {getDog} from '../services/PhpApi'
+import useSWR from 'swr';
 
 const Dog = () => 
 {
-  const [success, setSuccess] = useState<number>(0);
   // m7MdMK
   const params = useParams();
   const qr_id = Object.values(params)[0];
   var dogRes : ResponseT = {};
   var dog: DogT = dogRes.data;
 
-  getDog(qr_id).then((resDog) =>
-  {
-    dogRes = Object.assign({},resDog);
-    dog = Object.assign({},resDog.data);
-    setSuccess(dogRes.success);
-  });
+  const { data, error, isLoading  } = useSWR(['Dog', qr_id], getDog );
+  if (error) return (<div>failed to load</div>);
+  if (isLoading) return (<div>loading...</div>);
+
+  dogRes = Object.assign({}, data);
+  dog = Object.assign({}, data.data);
 
   var email = "nicht definiert;"
   var phone = "nicht definiert;"
   var picPath = "nicht definiert;"
   //var qrPath = "nicht definiert;"
   var name = "nicht definiert;"
-  if(success === 1)
+  if(dogRes.success === 1)
   {
     name = dog.name;
     //qrPath = dog.data.qr_code;
@@ -36,7 +36,7 @@ const Dog = () =>
     phone = dog.phone;
   }
 
-  const content: ReactNode = success === 1 ?
+  const content: ReactNode = dogRes.success === 1 ?
   <div className = 'Dog'>
   <h1>Hast Du mich gefunden?</h1>
   {/* <p>name: {name}</p>