web client v0.5

//notifications
//delete restaurant
//change picture
//redesigned data store

src/components/Notifier.js

@@ -0,0 +1,45 @@
+import React from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { useSnackbar } from "notistack";
+import { removeSnackbar } from "../actions/toggles.js";
+
+let displayed = [];
+
+const Notifier = () => {
+  const dispatch = useDispatch();
+  const notifications = useSelector((store) => store.notifications || []);
+  const { enqueueSnackbar } = useSnackbar();
+
+  const storeDisplayed = (id) => {
+    displayed = [...displayed, id];
+  };
+
+  const removeDisplayed = (id) => {
+    displayed = [...displayed.filter((key) => id !== key)];
+  };
+
+  React.useEffect(() => {
+    notifications.forEach(({ key, message, options = {} }) => {
+      // do nothing if snackbar is already displayed
+      if (displayed.includes(key)) return;
+
+      // display snackbar using notistack
+      enqueueSnackbar(message, {
+        key,
+        ...options,
+        onExited: (event, myKey) => {
+          // remove this snackbar from redux store
+          dispatch(removeSnackbar(myKey));
+          removeDisplayed(myKey);
+        },
+      });
+
+      // keep track of snackbars that we've displayed
+      storeDisplayed(key);
+    });
+  }, [notifications, enqueueSnackbar, dispatch]);
+
+  return null;
+};
+
+export default Notifier;