register

src/components/Qr.tsx

@@ -2,6 +2,7 @@ import React, { ChangeEvent, MouseEventHandler, useState } from 'react'
 import { Link } from 'react-router-dom';
 import { DogT } from '../context/UserContext';
 import {getDog, updateQR} from '../services/PhpApi';
+import toast, { Toaster } from 'react-hot-toast';
 import Checkbox from './Checkbox';
 import Img from './Img';
 import './Qr.css';
@@ -34,8 +35,6 @@ export default function Qr()
             qr_code: '',
             picture: ''
         }); 
-    const [errMsg, setErrMsg] = useState("false");
-    const [successMsg, setSuccessMsg] = useState("false");
     //save reference for dragItem and dragOverItem
     const dragItem = React.useRef<any>(null);
     const dragOverItem = React.useRef<any>(null);
@@ -192,13 +191,12 @@ export default function Qr()
         {
             if(resQR.success)
             {
-                setSuccessMsg('Daten gesichert!');
+                toast.success('Daten gesichert!');
                 mutate();
             }
             else if(!resQR.success && resQR.message)
             {
-                setSuccessMsg("false");
-                setErrMsg(resQR.message);
+                toast.error(resQR.message);
             }
         })
         .catch((err) => console.error(err));
@@ -287,6 +285,7 @@ export default function Qr()
 
     return (
         <div>
+            <Toaster toastOptions={{ position: "top-center" }} />
             <h1>Qr-Code Druck</h1>
             <Link to={"/profil"}>Zurück zum Profil</Link>
             <div className='qrSettings____'>
@@ -352,8 +351,6 @@ export default function Qr()
                 <div className='column'>
                     <button id="saveButton" className='saveButton' onClick={saveHandler} >Werte sichern</button>
                     <button id="printButton" className='printButton' onClick={printHandler} >QR-Code drucken</button>
-                    {successMsg !== "false" && <div className="success-msg">{successMsg}</div>}
-                    {errMsg !== "false" && <div className="err-msg">{errMsg}</div>}
                 </div>
             </div>
             <div className='blockRepeat'>