From eb5d1e8ef6fba0ec740403ff47b73418653a7430 Mon Sep 17 00:00:00 2001 From: Napoleon-Christos Oikonomou Date: Fri, 4 Jun 2021 01:11:10 +0300 Subject: [PATCH] update deps, add snackbar --- template.json | 35 ++++++++++++++--------------- template/public/index.html | 5 +---- template/src/components/SnackBar.js | 35 +++++++++++++++++++++++++++++ template/src/index.js | 22 +++++++++--------- template/src/utils/index.js | 2 +- template/src/utils/use-snackbar.js | 31 +++++++++++++++++++++---- 6 files changed, 92 insertions(+), 38 deletions(-) create mode 100644 template/src/components/SnackBar.js diff --git a/template.json b/template.json index d8ee521..959db04 100644 --- 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 index 5102d7b..2982cd0 100644 --- a/template/public/index.html +++ b/template/public/index.html @@ -8,10 +8,7 @@ /> - + React App diff --git a/template/src/components/SnackBar.js b/template/src/components/SnackBar.js new file mode 100644 index 0000000..7af80a5 --- /dev/null +++ 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 ( + + + {message} + + + ); +}; + +export default SnackBar; diff --git a/template/src/index.js b/template/src/index.js index 9cb68b2..a7a3dad 100644 --- 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 ( + - -
- - }> - - - -
- +
+ + }> + + + +
+ diff --git a/template/src/utils/index.js b/template/src/utils/index.js index 11576a7..7ddf536 100644 --- 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 index dedc6c3..47040cf 100644 --- 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 }; };