20230316: added Notification mechanism

package.json

@@ -30,6 +30,7 @@
     "less": "^4.1.3",
     "less-loader": "^11.1.0",
     "moment": "^2.29.1",
+    "notistack": "^3.0.1",
     "pako": "^2.0.4",
     "react": "^17.0.1",
     "react-beautiful-dnd": "^13.1.0",
@@ -99,7 +100,6 @@
     "@types/react-dom": "^16.9.8",
     "@types/react-router-dom": "^5.1.6",
     "@types/styled-components": "^5.1.12",
-    "prettier": "2.7.1",
     "babel-plugin-import-graphql": "^2.8.1",
     "babel-plugin-styled-components": "^2.0.7",
     "babel-preset-env": "^1.7.0",
@@ -111,6 +111,7 @@
     "html-webpack-plugin": "^5.5.0",
     "node-polyfill-webpack-plugin": "^2.0.1",
     "path-browserify": "^1.0.1",
+    "prettier": "2.7.1",
     "raw-loader": "^4.0.2",
     "stream-browserify": "^3.0.0",
     "style-loader": "^3.3.1",

src/components/Dashboard/index.tsx

@@ -13,6 +13,7 @@ import Banner from "../ui/Banner";
 import { useElectedCouncils } from '@/hooks';
 import { ElectedCouncil } from "@/graphtypes";
 import Proposals from "./Proposals";
+import { SnackbarProvider, VariantType, useSnackbar } from 'notistack';
 
 
 const Dashboard = (props) => {
@@ -21,6 +22,9 @@ const Dashboard = (props) => {
 	const [description1, setDescription1] = useState('');
 
 	const council: ElectedCouncil | undefined = data && data[0]
+  const { enqueueSnackbar } = useSnackbar();
+
+  const hello = <h3>This is a success message!</h3>
 
 	useEffect(() => {
 		if (!council) 
@@ -31,6 +35,8 @@ const Dashboard = (props) => {
 			", From: " + new Date(council.electedAt.timestamp) + 
 			", Councilors: [ " + council.councilors.map(each => each.member.handle).join(", ") + " ]")
 
+    enqueueSnackbar(hello);
+
 	}, [council])
  
 

src/index.tsx

@@ -2,6 +2,9 @@ import React from "react";
 import ReactDOM from "react-dom";
 import { BrowserRouter as Router } from "react-router-dom";
 import Providers from "./Providers";
+import { SnackbarProvider } from 'notistack';
+
+
 import "./index.css";
 import App from "./App";
 
@@ -10,7 +13,9 @@ import "./i18n";
 ReactDOM.render(
   <Router>
     <Providers>
-      <App />
+      <SnackbarProvider maxSnack={5}>
+        <App />
+      </SnackbarProvider>
     </Providers>
   </Router>,
   document.getElementById("root")

webpack.config.js

@@ -15,20 +15,20 @@ module.exports = {
         path: path.join(__dirname, '/public'),
         filename: 'bundle.js'
     },
-    devServer: {
-        port: 8080,
-        client: {
-          logging: 'error',
-          progress: true,
-          overlay: true,
-          webSocketURL: {
-            hostname: 'dev.joystreamstats.live',
-            pathname: '/ws',
-            port: 443,
-            protocol: 'wss'
-          }
-        }
-    },
+    // devServer: {
+    //     port: 8080,
+    //     client: {
+    //       logging: 'error',
+    //       progress: true,
+    //       overlay: true,
+    //       webSocketURL: {
+    //         hostname: 'dev.joystreamstats.live',
+    //         pathname: '/ws',
+    //         port: 443,
+    //         protocol: 'wss'
+    //       }
+    //     }
+    // },
     module: {
         rules: [
             {

yarn.lock

@@ -6532,7 +6532,7 @@ clone@^1.0.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
 
-clsx@^1.0.4:
+clsx@^1.0.4, clsx@^1.1.0:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
   integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
@@ -9230,6 +9230,11 @@ globby@^6.1.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
+goober@^2.0.33:
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/goober/-/goober-2.1.12.tgz#6c1645314ac9a68fe76408e1f502c63df8a39042"
+  integrity sha512-yXHAvO08FU1JgTXX6Zn6sYCUFfB/OJSX8HHjDSgerZHZmFKAb08cykp5LBw5QnmyMcZyPRMqkdyHUSSzge788Q==
+
 gopd@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c"
@@ -12542,6 +12547,14 @@ normalize-url@^3.0.0:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
   integrity sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==
 
+notistack@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/notistack/-/notistack-3.0.1.tgz#daf59888ab7e2c30a1fa8f71f9cba2978773236e"
+  integrity sha512-ntVZXXgSQH5WYfyU+3HfcXuKaapzAJ8fBLQ/G618rn3yvSzEbnOB8ZSOwhX+dAORy/lw+GC2N061JA0+gYWTVA==
+  dependencies:
+    clsx "^1.1.0"
+    goober "^2.0.33"
+
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"