From 7fa3f95cd0e3a61790f9c4dbbcf33fdbc7d8ae68 Mon Sep 17 00:00:00 2001
From: M M <cosmicray23@hotmail.com>
Date: Mon, 17 Jun 2024 16:59:07 -0700
Subject: [PATCH] Updated toast with prop, prop validation, and JSDocs.

---
 Client/src/Components/Toast/index.jsx | 30 ++++++++++++++++++++++-----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/Client/src/Components/Toast/index.jsx b/Client/src/Components/Toast/index.jsx
index ceb7a6f60..87e6c2ea9 100644
--- a/Client/src/Components/Toast/index.jsx
+++ b/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;