replace material-ui-snackbar-provider with notistack

package.json

@@ -19,7 +19,7 @@
     "clsx": "^1.1.1",
     "date-fns": "^2.19.0",
     "graphql": "^15.5.0",
-    "material-ui-snackbar-provider": "^1.4.0",
+    "notistack": "^1.0.5",
     "query-string": "^6.14.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",

src/features/SignInPage/SignInPage.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
-import { useSnackbar } from 'material-ui-snackbar-provider';
+import { useSnackbar } from 'notistack';
 import { ApolloError } from '@apollo/client';
 import { useAuth } from 'libs/auth';
 import { Role } from 'libs/graphql/types';
@@ -40,12 +40,15 @@ const SignInPage = () => {
         }
         return true;
       });
-      snackbar.showMessage('Logowanie przebiegło pomyślnie.');
+      snackbar.enqueueSnackbar('Logowanie przebiegło pomyślnie.', {
+        variant: 'success',
+      });
     } catch (e) {
-      snackbar.showMessage(
+      snackbar.enqueueSnackbar(
         e instanceof ApolloError && e.graphQLErrors.length > 0
           ? e.graphQLErrors[0].message
-          : e.message
+          : e.message,
+        { variant: 'error' }
       );
       setIsSubmitting(false);
     }

src/features/UsersPage/UsersPage.tsx

@@ -6,7 +6,7 @@ import {
   useQueryParams,
   withDefault,
 } from 'use-query-params';
-import { useSnackbar } from 'material-ui-snackbar-provider';
+import { useSnackbar } from 'notistack';
 import SortParam, { decodeSort } from 'libs/serialize-query-params/SortParam';
 import useUsers from './UsersPage.useUsers';
 import { validateRowsPerPage } from 'common/Table/helpers';
@@ -72,10 +72,11 @@ const UsersPage = () => {
       await refetch();
       return true;
     } catch (e) {
-      snackbar.showMessage(
+      snackbar.enqueueSnackbar(
         e instanceof ApolloError && e.graphQLErrors.length > 0
           ? e.graphQLErrors[0].message
-          : e.message
+          : e.message,
+        { variant: 'error' }
       );
     }
     return false;

src/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter, Route } from 'react-router-dom';
 import { ApolloProvider } from '@apollo/client';
-import { SnackbarProvider } from 'material-ui-snackbar-provider';
+import { SnackbarProvider } from 'notistack';
 import { QueryParamProvider } from 'use-query-params';
 import App from './features/App';
 import { AuthProvider } from './libs/auth';
@@ -20,12 +20,7 @@ ReactDOM.render(
       <ThemeProvider>
         <AuthProvider tokenStorage={tokenStorage}>
           <QueryParamProvider ReactRouterRoute={Route}>
-            <SnackbarProvider
-              SnackbarProps={{
-                autoHideDuration: 4000,
-                anchorOrigin: { vertical: 'top', horizontal: 'center' },
-              }}
-            >
+            <SnackbarProvider maxSnack={3}>
               <App />
             </SnackbarProvider>
           </QueryParamProvider>

yarn.lock

@@ -4411,7 +4411,7 @@ clone-response@^1.0.2:
   dependencies:
     mimic-response "^1.0.0"
 
-clsx@^1.0.4, clsx@^1.1.1:
+clsx@^1.0.4, clsx@^1.1.0, clsx@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
   integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
@@ -6928,7 +6928,7 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -9024,13 +9024,6 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
-material-ui-snackbar-provider@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/material-ui-snackbar-provider/-/material-ui-snackbar-provider-1.4.0.tgz#93948effc8e34d794e66bf7ea7cdee7dadc88fc7"
-  integrity sha512-ANwIFb3c46iWGNYIFlU7H0yNet9gLXoWrrxJKEG0A30j+HnjgAwe7u+HA3Y3Rts0qCsDGb/M3pMeRx6kOvI8Fw==
-  dependencies:
-    prop-types "^15.7.2"
-
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -9529,6 +9522,14 @@ normalize-url@^4.1.0:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-4.5.0.tgz#453354087e6ca96957bd8f5baf753f5982142129"
   integrity sha512-2s47yzUxdexf1OhyRi4Em83iQk0aPvwTddtFz4hnSSw9dCEsLEGf6SwIO8ss/19S9iBb5sJaOuTvTGDeZI00BQ==
 
+notistack@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/notistack/-/notistack-1.0.5.tgz#239d5888105c89a9a7f26d75a07d279446dc1624"
+  integrity sha512-xCMG0OhzEdczmDs2lDABEiphKQMZUavdOIRAJhfIcyJkCA4UqBDANL3YCLt+mz8VbAPCeKTn76kbCmYQIqksnA==
+  dependencies:
+    clsx "^1.1.0"
+    hoist-non-react-statics "^3.3.0"
+
 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"