Merge pull request #127 from bluewave-labs/feat/notifications

Implemented the toastify notifications.

Client/src/App.jsx

@@ -15,6 +15,7 @@ import ForgotPassword from "./Pages/ForgotPassword";
 import CheckEmail from "./Pages/CheckEmail";
 import SetNewPassword from "./Pages/SetNewPassword";
 import NewPasswordConfirmed from "./Pages/NewPasswordConfirmed";
+import ToastComponent from "./Components/Toast";
 
 function App() {
   return (
@@ -30,6 +31,7 @@ function App() {
         <Route exact path="/register" element={<Register />} />
         <Route exact path="/login" element={<Login />} />
         <Route exact path="/demo" element={<Demo />} />
+        <Route path="/toast" element={<ToastComponent />} />
         <Route path="*" element={<NotFound />} />
         <Route path="/playground" element={<PlayGround />} />
         <Route path="/forgot-password" element={<ForgotPassword />} />

Client/src/Components/Announcements/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon.jsx

@@ -1,5 +1,4 @@
 import "./announcementsDualButtonWithIcon.css";
-import React from "react";
 import CloseIcon from "@mui/icons-material/Close";
 import PropTypes from "prop-types";
 import { useTheme } from "@mui/material";
@@ -12,6 +11,7 @@ import { useTheme } from "@mui/material";
  * @param {string} props.body - The announcement body text content
  * @param {string} props.esc - The text for the escape button (usually "Close")
  * @param {string} props.primary - The text for the primary button
+ * @param {function} props.closeToast - Function to close the toast notification
  * @returns {JSX.Element} - Renders the announcement dual button with icon component
  */
 
@@ -21,6 +21,7 @@ const AnnouncementsDualButtonWithIcon = ({
   body,
   esc,
   primary,
+  closeToast,
 }) => {
   const theme = useTheme();
 
@@ -40,14 +41,18 @@ const AnnouncementsDualButtonWithIcon = ({
         {body && <div className="announcement-content-body">{body}</div>}
         {(esc || primary) && (
           <div className="announcement-content-controllers">
-            {esc && <div className="controllers-button-esc">{esc}</div>}
+            {esc && (
+              <div className="controllers-button-esc" onClick={closeToast}>
+                {esc}
+              </div>
+            )}
             {primary && (
               <div className="controllers-button-primary">{primary}</div>
             )}
           </div>
         )}
       </div>
-      <div className="announcement-close">
+      <div className="announcement-close" onClick={closeToast}>
         <CloseIcon style={{ fill: "#98A2B3" }} />
       </div>
     </div>
@@ -60,6 +65,7 @@ AnnouncementsDualButtonWithIcon.propTypes = {
   body: PropTypes.string,
   esc: PropTypes.string,
   primary: PropTypes.string,
+  closeToast: PropTypes.func.isRequired,
 };
 
 export default AnnouncementsDualButtonWithIcon;

Client/src/Components/Toast/index.css

@@ -0,0 +1,3 @@
+.Toastify__toast-container {
+  width: auto;
+}

Client/src/Components/Toast/index.jsx

@@ -0,0 +1,32 @@
+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 = () => {
+  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"
+          closeToast={closeToast}
+        />
+      ),
+      { closeButton: false }
+    );
+  };
+
+  return (
+    <div>
+      <button onClick={displayMsg}>Click me</button>
+      <ToastContainer className="Toastify__toast-container" />
+    </div>
+  );
+};
+
+export default ToastComponent;

Client/src/Pages/PlayGround/PlayGround.jsx

@@ -13,6 +13,7 @@ import AnnouncementUpdateSubscription from "../../Components/Announcements/Annou
 import PlayGroundCharts from "./PlayGround-Charts";
 import PlayGroundPopupModals from "./PlayGround-Popup-Modals";
 import PlayGroundTooltips from "./PlayGround-Tooltips";
+import Toast from "../../Components/Toast";
 
 // This Component is just for the development and test
 // purposes and just to see what my components look like while development
@@ -52,6 +53,7 @@ function PlayGround() {
         hasCopyButton={true}
         hintText="This is a hint text to help user."
       />
+      <Toast />
 
       <hr />
       {/* Now, illustration of the Description text fields */}