Add notification feature #11

package.json

@@ -9,6 +9,7 @@
     "@testing-library/react": "^11.2.3",
     "@testing-library/user-event": "^12.6.2",
     "axios": "^0.21.1",
+    "notistack": "^1.0.10",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",

src/App.js

@@ -1,4 +1,5 @@
 import { CssBaseline } from "@material-ui/core";
+import { SnackbarProvider } from "notistack";
 import { BrowserRouter as Router, Route } from "react-router-dom";
 import AppRouter from "./AppRouter";
 import Header from "./components/Header";
@@ -11,16 +12,23 @@ import Theme from "./theme/theme";
 
 function App() {
   return (
-    <GlobalContextProvider>
-      <JobsContextProvider>
-        <Theme>
-          <CssBaseline />
-          <div className="App">
-            <AppRouter />
-          </div>
-        </Theme>
-      </JobsContextProvider>
-    </GlobalContextProvider>
+    <SnackbarProvider
+      anchorOrigin={{
+        vertical: "bottom",
+        horizontal: "right",
+      }}
+    >
+      <GlobalContextProvider>
+        <JobsContextProvider>
+          <Theme>
+            <CssBaseline />
+            <div className="App">
+              <AppRouter />
+            </div>
+          </Theme>
+        </JobsContextProvider>
+      </GlobalContextProvider>
+    </SnackbarProvider>
   );
 }
 

src/contexts/JobsContext.js

@@ -1,25 +1,57 @@
+import { Button } from "@material-ui/core";
+import { useSnackbar } from "notistack";
 import React, { createContext, useState, useContext, useEffect } from "react";
+import { Link } from "react-router-dom";
 import API from "../api/API";
+import notificationSound from "../assets/notification-sound.mp3";
 
 const jobsContext = createContext();
 
 export default function JobsContextProvider({ children }) {
   const [jobsData, setJobsData] = useState();
+  const { enqueueSnackbar, closeSnackbar } = useSnackbar();
+
+  function playNotification() {
+    const audio = new Audio(notificationSound);
+    audio.play();
+  }
 
   useEffect(() => {
     if (!jobsData)
       API.getJobs().then((res) => {
         setJobsData(res.data);
       });
-  },[]);
+  }, []);
 
   useEffect(() => {
     if (jobsData)
       API.getJobs(5000).then((res) => {
-        console.log(res.data);
-        if (res.data.length !== jobsData.length || res.data.find((val) => val.status !== "done"))
-          console.log("seteffect");
-          setJobsData(res.data);
+        let completedJobs = jobsData.filter((job) =>
+          res.data.find(
+            (newJob) => job.id === newJob.id && job.status !== newJob.status
+          )
+        );
+        completedJobs.forEach((job) => {
+          enqueueSnackbar(
+            `Job ${job.id} (${job.type.toUpperCase()}) completed`,
+            { variant: "success" }
+          );
+          playNotification();
+        });
+        if (res.data.length !== jobsData.length) {
+          res.data.map((job) => {
+            if (!jobsData.find((oldJob) => job.id === oldJob.id)) {
+              if (job.status === "done") {
+                enqueueSnackbar(
+                  `Job ${job.id} (${job.type.toUpperCase()}) completed`,
+                  { variant: "success" }
+                );
+                playNotification();
+              }
+            }
+          });
+        }
+        setJobsData(res.data);
       });
   });