mantine

src/components/Qr.tsx

@@ -2,11 +2,15 @@ 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';
 import useSWR from 'swr';
+import { MantineProvider } from '@mantine/core';
+import { NotificationsProvider, showNotification } from '@mantine/notifications';
+import {DndList, DndListProps} from './DndList';
+
+
 
 type ListItemT = 
 {
@@ -45,7 +49,18 @@ export default function Qr()
         {id: '2', name:'Email', ordernum: 3}
     ]; 
 
+    const dndListInit: DndListProps = 
+    {
+        data:
+        [
+            {id: '0', name:'Name', ordernum: 1},
+            {id: '1', name:'Telefon', ordernum: 2},
+            {id: '2', name:'Email', ordernum: 3}
+        ]
+    }; 
+
     const itemList = React.useRef<ListItemT[]>(itemListInit); 
+    const dndList = React.useRef<DndListProps>(dndListInit); 
  
     if (error) return (<div>failed to load</div>);
     if (isLoading) return (<div>loading...</div>);
@@ -191,12 +206,19 @@ export default function Qr()
         {
             if(resQR.success)
             {
-                toast.success('Daten gesichert!');
+                showNotification(
+                {
+                    message: 'Daten gesichert!'
+                });
                 mutate();
             }
             else if(!resQR.success && resQR.message)
             {
-                toast.error(resQR.message);
+                showNotification(
+                {
+                    message: resQR.message
+                    
+                });
             }
         })
         .catch((err) => console.error(err));
@@ -265,6 +287,17 @@ export default function Qr()
         setDogRender(dog);
     }
 
+    function callBackDragEnd(state: {
+        id: string;
+        name: string;
+        ordernum: number;
+    }[])
+    {
+        console.log('callBackDragEnd');
+        console.log(state);
+    }
+
+
     console.log('dogRender');
     console.log(dogRender);
 
@@ -283,9 +316,15 @@ export default function Qr()
 
     console.log(dog);
 
+
+
+    dndList.current = { data: [...itemList.current] };
+    console.log(dndList);
+
     return (
-        <div>
-            <Toaster toastOptions={{ position: "top-center" }} />
+<MantineProvider withNormalizeCSS withGlobalStyles>
+      <NotificationsProvider position="top-center" >       
+      <div>
             <h1>Qr-Code Druck</h1>
             <Link to={"/profil"}>Zurück zum Profil</Link>
             <div className='qrSettings____'>
@@ -347,6 +386,7 @@ export default function Qr()
                         ))}
                         </div>
                     </div>
+                    <DndList dragEndHandler={callBackDragEnd} dataprops={dndList.current} />
                 </div>
                 <div className='column'>
                     <button id="saveButton" className='saveButton' onClick={saveHandler} >Werte sichern</button>
@@ -362,5 +402,7 @@ export default function Qr()
                 {oneQrBlock()}
             </div>
         </div> 
+      </NotificationsProvider>
+    </MantineProvider>
      );
 }