From 68915628a95b0fc947877826c5587bd94f4ffed0 Mon Sep 17 00:00:00 2001
From: Dobromir Popov <dobromir.popov@gateway.one>
Date: Mon, 17 Jun 2024 23:26:55 +0300
Subject: [PATCH] fix toast problem

---
 components/calendar/avcalendar.tsx |  3 ++-
 pages/_app.tsx                     | 12 +++++++----
 pages/dash.tsx                     | 32 +++++++++++++++++++++---------
 3 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/components/calendar/avcalendar.tsx b/components/calendar/avcalendar.tsx
index 27b66d9..a829268 100644
--- a/components/calendar/avcalendar.tsx
+++ b/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}
diff --git a/pages/_app.tsx b/pages/_app.tsx
index f2ce7f2..772b003 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -86,10 +86,14 @@ function SmwsApp({ Component, pageProps, session, locale, messages }) {
   // }, [locale]);
 
   useEffect(() => {
-    const use = async () => {
-      (await import('tw-elements')).default;
-    };
-    use();
+    try {
+      const use = async () => {
+        (await import('tw-elements')).default;
+      };
+      use();
+    } catch (e) {
+      console.error('Error loading tw-elements:', e);
+    }
   }, []);
 
 
diff --git a/pages/dash.tsx b/pages/dash.tsx
index 0ff470f..93b7c75 100644
--- a/pages/dash.tsx
+++ b/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;