protet admin page; gix toaster multiple show bug

This commit is contained in:
Dobromir Popov
2024-06-17 22:17:51 +03:00
parent 090b1704d3
commit 905ea86329
2 changed files with 104 additions and 110 deletions

View File

@ -7,12 +7,14 @@ 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>
<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>
@ -52,21 +54,11 @@ const SurveyPage = ({ serverSurveys }) => {
<h2 className="text-xl font-semibold mb-4">Детайли</h2>
<SurveyForm existingItem={selectedSurvey} />
</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>
);
};

View File

@ -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) => {