update deps, add snackbar

iamnapo · Jun 3, 2021 · eb5d1e8 · eb5d1e8
1 parent acfac23
commit eb5d1e8
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 38 deletions.
diff --git a/template.json b/template.json
@@ -70,23 +70,22 @@
 			"@craco/craco": "^6.1.2",
 			"@emotion/react": "^11.4.0",
 			"@emotion/styled": "^11.3.0",
-			"@fontsource/roboto": "^4.3.0",
+			"@fontsource/roboto": "^4.4.2",
 			"@iamnapo/construct-url": "^2.0.1",
-			"@material-ui/core": "^5.0.0-alpha.34",
-			"@material-ui/icons": "^5.0.0-alpha.34",
-			"@material-ui/lab": "^5.0.0-alpha.34",
-			"@sentry/browser": "^6.4.0",
+			"@material-ui/core": "^5.0.0-alpha.35",
+			"@material-ui/icons": "^5.0.0-alpha.35",
+			"@material-ui/lab": "^5.0.0-alpha.35",
+			"@sentry/browser": "^6.5.1",
 			"clsx": "^1.1.1",
-			"date-fns": "^2.21.3",
+			"date-fns": "^2.22.1",
 			"history": "^4.10.1",
-			"ky": "^0.28.1",
-			"notistack": "^1.0.8",
+			"ky": "^0.28.5",
 			"prop-types": "^15.7.2",
 			"query-string": "^7.0.0",
 			"react-ga": "^3.3.0",
 			"react-router-dom": "^5.2.0",
 			"swr": "^0.5.6",
-			"web-vitals": "^1.1.2",
+			"web-vitals": "^2.0.1",
 			"workbox-background-sync": "^6.1.5",
 			"workbox-broadcast-update": "^6.1.5",
 			"workbox-cacheable-response": "^6.1.5",
@@ -102,23 +101,23 @@
 			"zustand": "^3.5.1"
 		},
 		"devDependencies": {
-			"@cypress/code-coverage": "^3.9.5",
+			"@cypress/code-coverage": "^3.9.6",
 			"@cypress/instrument-cra": "^1.4.0",
 			"@iamnapo/prettier-config": "^1.0.3",
 			"babel-plugin-import": "^1.13.3",
-			"cypress": "^7.3.0",
-			"dotenv": "^9.0.2",
-			"eslint": "^7.26.0",
+			"cypress": "^7.4.0",
+			"dotenv": "^10.0.0",
+			"eslint": "^7.27.0",
 			"eslint-config-iamnapo": "^15.0.0",
 			"eslint-plugin-cypress": "^2.11.3",
-			"eslint-plugin-import": "^2.23.2",
+			"eslint-plugin-import": "^2.23.4",
 			"eslint-plugin-jsx-a11y": "^6.4.1",
-			"eslint-plugin-react": "^7.23.2",
+			"eslint-plugin-react": "^7.24.0",
 			"eslint-plugin-react-hooks": "^4.2.0",
-			"eslint-plugin-unicorn": "^32.0.1",
-			"sass": "^1.32.13",
+			"eslint-plugin-unicorn": "^33.0.1",
+			"sass": "^1.34.1",
 			"source-map-explorer": "^2.5.2",
-			"start-server-and-test": "^1.12.2"
+			"start-server-and-test": "^1.12.3"
 		},
 		"engines": {
 			"node": ">=14"

diff --git a/template/public/index.html b/template/public/index.html
@@ -8,10 +8,7 @@
 		/>
 		<link rel="shortcut icon" href="%PUBLIC_URL%/favicons/favicon.ico" />
 		<link rel="apple-touch-icon" href="%PUBLIC_URL%/favicons/favicon-192.png" />
-		<meta
-			name="viewport"
-			content="width=device-width, initial-scale=1, shrink-to-fit=no"
-		/>
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<meta name="theme-color" content="#000000" />
 		<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 		<title>React App</title>

diff --git a/template/src/components/SnackBar.js b/template/src/components/SnackBar.js
@@ -0,0 +1,35 @@
+import { Alert, Slide, Snackbar as MaterialSnackbar, Typography } from "@material-ui/core";
+import { useCallback } from "react";
+import shallow from "zustand/shallow";
+
+import { snackStore } from "../utils";
+
+const SnackBar = () => {
+	const { severity, message, open, setOpen } = snackStore(useCallback(((e) => ({
+		severity: e.severity,
+		message: e.message,
+		open: e.open,
+		setOpen: e.setOpen,
+	})), []), shallow);
+
+	const handleClose = useCallback((_, reason) => {
+		if (reason !== "clickaway") setOpen(false);
+	}, [setOpen]);
+
+	return (
+		<MaterialSnackbar
+			open={open}
+			autoHideDuration={6000}
+			onClose={handleClose}
+			anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+			TransitionComponent={Slide}
+			TransitionProps={{ direction: "left" }}
+		>
+			<Alert onClose={handleClose} severity={severity} variant="filled" sx={{ alignItems: "center" }}>
+				<Typography>{message}</Typography>
+			</Alert>
+		</MaterialSnackbar>
+	);
+};
+
+export default SnackBar;
diff --git a/template/src/index.js b/template/src/index.js
@@ -1,9 +1,8 @@
 import { lazy, StrictMode, Suspense, useCallback, useEffect } from "react";
 import ReactDOM from "react-dom";
 import { Router, Switch, Route, useLocation } from "react-router-dom";
-import { LinearProgress } from "@material-ui/core";
+import { LinearProgress, CssBaseline } from "@material-ui/core";
 import { ThemeProvider, createTheme, StyledEngineProvider } from "@material-ui/core/styles";
-import { SnackbarProvider } from "notistack";
 import ReactGA from "react-ga";
 import * as Sentry from "@sentry/browser";
 import { LocalizationProvider, AdapterDateFns } from "@material-ui/lab";
@@ -12,6 +11,7 @@ import shallow from "zustand/shallow";
 
 import "./index.scss";
 
+import SnackBar from "./components/SnackBar";
 import history from "./history";
 import { useGlobalState } from "./utils";
 import api from "./api";
@@ -59,18 +59,18 @@ const App = () => {
 
 	return (
 		<StyledEngineProvider injectFirst>
+			<CssBaseline />
 			<ThemeProvider theme={theme}>
 				<SWRConfig value={swrConfig}>
 					<LocalizationProvider dateAdapter={AdapterDateFns}>
-						<SnackbarProvider anchorOrigin={{ vertical: "bottom", horizontal: "right" }} maxSnack={1}>
-							<main>
-								<Switch>
-									<Suspense fallback={<LinearProgress />}>
-										<Route exact path="/" component={Home} />
-									</Suspense>
-								</Switch>
-							</main>
-						</SnackbarProvider>
+						<main>
+							<Switch>
+								<Suspense fallback={<LinearProgress />}>
+									<Route exact path="/" component={Home} />
+								</Suspense>
+							</Switch>
+						</main>
+						<SnackBar />
 					</LocalizationProvider>
 				</SWRConfig>
 			</ThemeProvider>

diff --git a/template/src/utils/index.js b/template/src/utils/index.js
@@ -1,3 +1,3 @@
-export { default as useSnackbar } from "./use-snackbar";
+export { default as useSnackbar, snackStore } from "./use-snackbar";
 export { default as useGlobalState } from "./use-global-state";
 export const STUFF = [1, 2, 3];
diff --git a/template/src/utils/use-snackbar.js b/template/src/utils/use-snackbar.js
@@ -1,11 +1,34 @@
 import { useCallback } from "react";
-import { useSnackbar as useSnackbar_ } from "notistack";
+import create from "zustand";
+import shallow from "zustand/shallow";
+
+export const snackStore = create((set) => ({
+	severity: "success",
+	setSeverity: (severity) => set({ severity }),
+	message: "Done.",
+	setMessage: (message) => set({ message }),
+	open: false,
+	setOpen: (open) => set({ open }),
+}));
 
 const useSnackbar = () => {
-	const { enqueueSnackbar } = useSnackbar_();
+	const { setSeverity, setMessage, setOpen } = snackStore(useCallback((e) => ({
+		setSeverity: e.setSeverity,
+		setMessage: e.setMessage,
+		setOpen: e.setOpen,
+	}), []), shallow);
+
+	const success = useCallback((msg = "Done.") => {
+		setMessage(msg);
+		setSeverity("success");
+		setOpen(true);
+	}, [setMessage, setOpen, setSeverity]);
 
-	const success = useCallback((msg = "Done.") => enqueueSnackbar(msg, { variant: "success" }), [enqueueSnackbar]);
-	const error = useCallback((msg = "Something went wrong. Please try again later.") => enqueueSnackbar(msg, { variant: "error" }), [enqueueSnackbar]);
+	const error = useCallback((msg = "Something went wrong. Please try again later.") => {
+		setMessage(msg);
+		setSeverity("error");
+		setOpen(true);
+	}, [setMessage, setOpen, setSeverity]);
 
 	return { success, error };
 };