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

Implemented the toastify notifications.

Client/package-lock.json

@@ -26,7 +26,8 @@
         "react-dom": "^18.2.0",
         "react-redux": "9.1.2",
         "react-router": "^6.23.0",
-        "react-router-dom": "^6.23.1"
+        "react-router-dom": "^6.23.1",
+        "react-toastify": "^10.0.5"
       },
       "devDependencies": {
         "@types/react": "^18.2.66",
@@ -4712,6 +4713,18 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-toastify": {
+      "version": "10.0.5",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.5.tgz",
+      "integrity": "sha512-mNKt2jBXJg4O7pSdbNUfDdTsK9FIdikfsIE/yUCxbAEXl4HMyJaivrVFcn3Elvt5xvCQYhUZm+hqTIu1UXM3Pw==",
+      "dependencies": {
+        "clsx": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",

Client/package.json

@@ -28,7 +28,8 @@
     "react-dom": "^18.2.0",
     "react-redux": "9.1.2",
     "react-router": "^6.23.0",
-    "react-router-dom": "^6.23.1"
+    "react-router-dom": "^6.23.1",
+    "react-toastify": "^10.0.5"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",

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 */}