Merge branch 'bluewave-labs:master' into monitors

Client/src/Components/Toast/index.jsx

@@ -1,19 +1,32 @@
+import PropTypes from "prop-types";
 import ComplexAlert from "../../Components/Icons/ComplexAlert/ComplexAlert";
 import AnnouncementsDualButtonWithIcon from "../../Components/Announcements/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon";
 import "react-toastify/dist/ReactToastify.css";
 import { toast, ToastContainer } from "react-toastify";
 import "./index.css";
 
-const ToastComponent = () => {
+/**
+ * ToastComponent displays a notification that is triggered by error messages.
+ *
+ * @component
+ * @param {Object} props - The component props
+ * @param {string} props.subject - The subject or title of the toast message
+ * @param {string} props.body - The body content of the toast message
+ * @param {string} props.esc - The text for the dismiss action button
+ * @param {string} props.primary - The text for the primary action button
+ * @returns {JSX.Element} JSX element representing the ToastComponent
+ */
+
+const ToastComponent = ({ subject, body, esc, primary }) => {
   const displayMsg = () => {
     toast(
       ({ closeToast, toastProps }) => (
         <AnnouncementsDualButtonWithIcon
           icon={<ComplexAlert theme="red" />}
-          subject="There was a problem with that action"
-          body="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum dolor."
-          esc="Dismiss"
-          primary="Learn more"
+          subject={subject}
+          body={body}
+          esc={esc}
+          primary={primary}
           closeToast={closeToast}
         />
       ),
@@ -29,4 +42,11 @@ const ToastComponent = () => {
   );
 };
 
+ToastComponent.propTypes = {
+  subject: PropTypes.string.isRequired,
+  body: PropTypes.string.isRequired,
+  esc: PropTypes.string.isRequired,
+  primary: PropTypes.string.isRequired,
+};
+
 export default ToastComponent;