fix toast problem

components/calendar/avcalendar.tsx

@@ -511,7 +511,8 @@ const AvCalendar = ({ publisherId, events, selectedDate, cartEvents, lastPublish
         <> <div  {...handlers} className="flex flex-col"
         >
             {/* достъпности на {publisherId} */}
-            <ToastContainer position="top-center" style={{ zIndex: 9999 }} />
+            {/* having multiple ToastContainers causes double rendering of toasts and all kind of problems */}
+            {/* <ToastContainer position="top-center" style={{ zIndex: 9999 }} /> */}
         </div>
             <Calendar
                 localizer={localizer}

pages/_app.tsx

@@ -86,10 +86,14 @@ function SmwsApp({ Component, pageProps, session, locale, messages }) {
   // }, [locale]);
 
   useEffect(() => {
+    try {
       const use = async () => {
         (await import('tw-elements')).default;
       };
       use();
+    } catch (e) {
+      console.error('Error loading tw-elements:', e);
+    }
   }, []);
 
 

pages/dash.tsx

@@ -1,6 +1,6 @@
 import { useSession } from "next-auth/react"
 import { useRouter } from 'next/router';
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, use } from 'react';
 import Layout from "../components/layout"
 import { toast } from 'react-toastify';
 
@@ -66,18 +66,28 @@ export default function DashboardPage({ initialItems, initialUserId, cartEvents,
     // }, []);// show the message every time we load the page
 
 
+    // const [processedMessages, setProcessedMessages] = useState(new Set());
+    // useEffect(() => {
+    //     if (messages && messages.length > 0) {
+    //         const unprocessedMessages = messages.filter(message => !processedMessages.has(message.id));
+    //         if (unprocessedMessages.length > 0) {
+    //             showMessageToasts(unprocessedMessages);
+    //             setProcessedMessages(new Set([...processedMessages, ...unprocessedMessages.map(msg => msg.id)]));
+    //         }
+    //     }
+    // }, [messages, processedMessages]);
+
     useEffect(() => {
         if (messages && messages.length > 0) {
-            console.log("user has ", messages.length, " messages.");
             showMessageToasts(messages);
         }
-    }, []);
+    }, [messages]);
 
-    const showMessageToasts = (messages, handleMessageOptionAnswer) => {
+    const showMessageToasts = (messages) => {
         const handleOptionClick = async (messageId, option, toastId) => {
             try {
                 await axiosInstance.put(`/api/data/messages/${messageId}`, { answer: option });
-                toast.dismiss(toastId);
+                handleClose(toastId);
             } catch (error) {
                 console.error("Error updating message:", error);
                 toast.error("Error updating message. Please try again.");
@@ -88,8 +98,8 @@ export default function DashboardPage({ initialItems, initialUserId, cartEvents,
             toast.dismiss(toastId);
         };
 
-        messages.forEach((message) => {
-            const toastId = `message-${message.id}`;
+        messages.forEach((message, messageIndex) => {
+            const toastId = `message-${message.id}-${messageIndex}`;
             const content = (
                 <div>
                     <div>{message.content.message}</div>
@@ -109,13 +119,17 @@ export default function DashboardPage({ initialItems, initialUserId, cartEvents,
 
             toast(content, {
                 toastId,
-                autoClose: false, // Keep the toast open until manually closed
-                closeButton: false,
+                autoClose: false,
+                closeButton: true,
                 onClose: () => handleClose(toastId),
             });
         });
     };
 
+
+
+
+
     // const showMessageToastNewModal = (messages, handleMessageOptionAnswer) => {
     //     let currentMessageIndex = 0;