From 905ea863299597831fb4fb7a1d6f5a8e83a4197a Mon Sep 17 00:00:00 2001
From: Dobromir Popov <dobromir.popov@gateway.one>
Date: Mon, 17 Jun 2024 22:17:51 +0300
Subject: [PATCH] protet admin page; gix toaster multiple show bug

---
 pages/cart/surveys/index.tsx |  92 ++++++++++++--------------
 pages/dash.tsx               | 122 ++++++++++++++++++-----------------
 2 files changed, 104 insertions(+), 110 deletions(-)

diff --git a/pages/cart/surveys/index.tsx b/pages/cart/surveys/index.tsx
index 309b8af..f8cf1e8 100644
--- a/pages/cart/surveys/index.tsx
+++ b/pages/cart/surveys/index.tsx
@@ -7,66 +7,58 @@ const common = require('../../../src/helpers/common');
 // import * as common from '../../../src/helpers/common';
 import SurveyForm from '../../../components/survey/SurveyForm';
 import _ from 'lodash';
+import ProtectedRoute from 'components/protectedRoute';
 
 const SurveyPage = ({ serverSurveys }) => {
     const [selectedSurvey, setSelectedSurvey] = useState(null);
 
     return (
         <Layout>
-            <div className="max-w-4xl mx-auto my-8 p-4 bg-white shadow-md rounded">
-                <h1 className="text-2xl font-bold mb-4">Анкети</h1>
+            <ProtectedRoute allowedRoles={[UserRole.ADMIN, UserRole.POWERUSER]}>
+                <div className="max-w-4xl mx-auto my-8 p-4 bg-white shadow-md rounded">
+                    <h1 className="text-2xl font-bold mb-4">Анкети</h1>
 
-                <div className="flex flex-row justify-between">
-                    <div className="w-1/2 pr-4">
-                        <h2 className="text-xl font-semibold mb-4">Списък</h2>
-                        <ul className="space-y-4">
-                            {serverSurveys.map((survey) => (
-                                <li key={survey.id} className="p-4 border rounded bg-gray-50 shadow-sm">
-                                    <p className="font-medium">{survey.id}: {survey.content}</p>
-                                    {/* <p className="text-gray-700">{survey.publicFrom} - {survey.publicUntil}</p> */}
-                                    <p className="mt-2"> [{survey.answers}] </p>
-                                    <div className="mt-2">
-                                        {Object.entries(_.groupBy(survey.messages, message => message.answer || "Без отговор")).map(([key, items]) => (
-                                            <div key={key} className="text-sm text-gray-700">
-                                                {key}: {items.length}
-                                            </div>
-                                        ))}
-                                    </div>
-                                    <button
-                                        className="btn mt-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded"
-                                        onClick={() => setSelectedSurvey(survey)}
-                                    >
-                                        Зареди детайли
-                                    </button>
-                                </li>
-                            ))}
-                        </ul>
-                        <button
-                            className="btn mt-4 bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded"
-                            onClick={() => setSelectedSurvey(null)}
-                        >
-                            Нова анкета
-                        </button>
+                    <div className="flex flex-row justify-between">
+                        <div className="w-1/2 pr-4">
+                            <h2 className="text-xl font-semibold mb-4">Списък</h2>
+                            <ul className="space-y-4">
+                                {serverSurveys.map((survey) => (
+                                    <li key={survey.id} className="p-4 border rounded bg-gray-50 shadow-sm">
+                                        <p className="font-medium">{survey.id}: {survey.content}</p>
+                                        {/* <p className="text-gray-700">{survey.publicFrom} - {survey.publicUntil}</p> */}
+                                        <p className="mt-2"> [{survey.answers}] </p>
+                                        <div className="mt-2">
+                                            {Object.entries(_.groupBy(survey.messages, message => message.answer || "Без отговор")).map(([key, items]) => (
+                                                <div key={key} className="text-sm text-gray-700">
+                                                    {key}: {items.length}
+                                                </div>
+                                            ))}
+                                        </div>
+                                        <button
+                                            className="btn mt-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded"
+                                            onClick={() => setSelectedSurvey(survey)}
+                                        >
+                                            Зареди детайли
+                                        </button>
+                                    </li>
+                                ))}
+                            </ul>
+                            <button
+                                className="btn mt-4 bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded"
+                                onClick={() => setSelectedSurvey(null)}
+                            >
+                                Нова анкета
+                            </button>
+                        </div>
+                        <div className="w-1/2 pl-4">
+                            <h2 className="text-xl font-semibold mb-4">Детайли</h2>
+                            <SurveyForm existingItem={selectedSurvey} />
+                        </div>
                     </div>
-                    <div className="w-1/2 pl-4">
-                        <h2 className="text-xl font-semibold mb-4">Детайли</h2>
-                        <SurveyForm existingItem={selectedSurvey} />
+                    <div className="mt-8">
                     </div>
-                    {/* <div className="w-1/2 pl-4">
-                        <h2 className="text-xl font-semibold mb-4">Selected Survey</h2>
-                        {selectedSurvey ? (
-                            <div className="p-4 border rounded bg-gray-50 shadow-sm">
-                                <h3 className="text-lg font-bold">{selectedSurvey.title}</h3>
-                                <p className="text-gray-700 mt-2">{selectedSurvey.description}</p>
-                            </div>
-                        ) : (
-                            <p className="text-gray-700">No survey selected.</p>
-                        )}
-                    </div> */}
                 </div>
-                <div className="mt-8">
-                </div>
-            </div>
+            </ProtectedRoute>
         </Layout>
     );
 };
diff --git a/pages/dash.tsx b/pages/dash.tsx
index 2aeb5f7..0ff470f 100644
--- a/pages/dash.tsx
+++ b/pages/dash.tsx
@@ -65,11 +65,13 @@ export default function DashboardPage({ initialItems, initialUserId, cartEvents,
     //     }
     // }, []);// show the message every time we load the page
 
+
     useEffect(() => {
-        if (messages.length > 0) {
+        if (messages && messages.length > 0) {
+            console.log("user has ", messages.length, " messages.");
             showMessageToasts(messages);
         }
-    }, [messages]);
+    }, []);
 
     const showMessageToasts = (messages, handleMessageOptionAnswer) => {
         const handleOptionClick = async (messageId, option, toastId) => {
@@ -86,8 +88,8 @@ export default function DashboardPage({ initialItems, initialUserId, cartEvents,
             toast.dismiss(toastId);
         };
 
-        messages.forEach((message, messageIndex) => {
-            const toastId = `message-${messageIndex}`;
+        messages.forEach((message) => {
+            const toastId = `message-${message.id}`;
             const content = (
                 <div>
                     <div>{message.content.message}</div>
@@ -114,68 +116,68 @@ export default function DashboardPage({ initialItems, initialUserId, cartEvents,
         });
     };
 
-    const showMessageToastNewModal = (messages, handleMessageOptionAnswer) => {
-        let currentMessageIndex = 0;
+    // const showMessageToastNewModal = (messages, handleMessageOptionAnswer) => {
+    //     let currentMessageIndex = 0;
 
-        const showModal = () => {
-            if (currentMessageIndex >= messages.length) {
-                return; // All messages have been shown
-            }
+    //     const showModal = () => {
+    //         if (currentMessageIndex >= messages.length) {
+    //             return; // All messages have been shown
+    //         }
 
-            const message = messages[currentMessageIndex];
-            const content = (
-                <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-                    <div className="bg-white rounded shadow-lg p-4 max-w-lg w-full">
-                        <div className="text-right">
-                            <button
-                                className="text-gray-500 hover:text-gray-700"
-                                onClick={handleClose}
-                            >
-                                &times;
-                            </button>
-                        </div>
-                        <div className="mb-4">{message.content.message}</div>
-                        <div>
-                            {message.content.options?.map((option, index) => (
-                                <button
-                                    key={index}
-                                    onClick={() => handleOptionClick(message.id, option)}
-                                    className="btn bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded m-1"
-                                >
-                                    {option}
-                                </button>
-                            ))}
-                        </div>
-                    </div>
-                </div>
-            );
+    //         const message = messages[currentMessageIndex];
+    //         const content = (
+    //             <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+    //                 <div className="bg-white rounded shadow-lg p-4 max-w-lg w-full">
+    //                     <div className="text-right">
+    //                         <button
+    //                             className="text-gray-500 hover:text-gray-700"
+    //                             onClick={handleClose}
+    //                         >
+    //                             &times;
+    //                         </button>
+    //                     </div>
+    //                     <div className="mb-4">{message.content.message}</div>
+    //                     <div>
+    //                         {message.content.options?.map((option, index) => (
+    //                             <button
+    //                                 key={index}
+    //                                 onClick={() => handleOptionClick(message.id, option)}
+    //                                 className="btn bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded m-1"
+    //                             >
+    //                                 {option}
+    //                             </button>
+    //                         ))}
+    //                     </div>
+    //                 </div>
+    //             </div>
+    //         );
 
-            toast(content, {
-                autoClose: false, // Keep the toast open until manually closed
-                closeButton: false,
-                onClose: handleClose,
-                //className: 'custom-toast', // Optional custom class for additional styling
-            });
-        };
+    //         toast(content, {
+    //             autoClose: false, // Keep the toast open until manually closed
+    //             closeButton: false,
+    //             onClose: handleClose,
+    //             //className: 'custom-toast', // Optional custom class for additional styling
+    //         });
+    //     };
 
-        const handleOptionClick = async (messageId, option) => {
-            try {
-                await axiosInstance.put(`/api/data/messages/${messageId}`, { answer: option });
-                toast.dismiss();
-                currentMessageIndex++;
-                showModal();
-            } catch (error) {
-                console.error("Error updating message:", error);
-                toast.error("Error updating message. Please try again.");
-            }
-        };
+    //     const handleOptionClick = async (messageId, option) => {
+    //         try {
+    //             await axiosInstance.put(`/api/data/messages/${messageId}`, { answer: option });
+    //             toast.dismiss();
+    //             currentMessageIndex++;
+    //             showModal();
+    //         } catch (error) {
+    //             console.error("Error updating message:", error);
+    //             toast.error("Error updating message. Please try again.");
+    //         }
+    //     };
 
-        const handleClose = () => {
-            toast.dismiss();
-        };
+    //     const handleClose = () => {
+    //         toast.dismiss();
+    //     };
 
-        showModal();
-    };
+    //     showModal();
+    // };
 
     //  FOR ADMINS ONLY
     const handleUserSelection = async (publisher) => {