From f9437ff0af03e4586aaf2b65bd08991c7c0aa7b3 Mon Sep 17 00:00:00 2001 From: Sidney Alcantara Date: Tue, 7 Sep 2021 16:35:45 +1000 Subject: [PATCH] migrate SnackContext to notistack --- package.json | 1 + src/App.tsx | 44 ++++--- src/components/ConfirmationDialog/Dialog.tsx | 122 ++++++++---------- src/components/FloatingSearch.tsx | 8 ++ src/components/InlineOpenInNewIcon.tsx | 12 ++ .../Settings/ProjectSettings/About.tsx | 112 ++++++++-------- .../ProjectSettings/Authentication.tsx | 8 +- .../Settings/ProjectSettings/CloudRun.tsx | 9 +- src/components/Settings/ThemeColorPicker.tsx | 69 +++++----- src/components/Snack.tsx | 101 --------------- src/components/SnackbarProgress.tsx | 43 ++++++ src/components/Table/BulkActions/index.tsx | 9 +- .../Table/ColumnMenu/FieldSettings/index.tsx | 16 +-- .../Table/TableHeader/Export/Download.tsx | 49 ++++--- .../Table/TableHeader/Export/Export.tsx | 11 +- .../Table/TableHeader/Extensions/index.tsx | 10 +- .../Table/formatters/FinalColumn.tsx | 3 - .../Wizards/ImportCsvWizard/index.tsx | 6 +- src/components/fields/Action/ActionFab.tsx | 11 +- src/contexts/AppContext.tsx | 1 - src/contexts/ProjectContext.tsx | 18 +-- src/contexts/SnackContext.tsx | 60 --------- src/contexts/SnackbarContext.tsx | 59 +++++++++ src/hooks/useTable/useTableData.tsx | 59 ++++----- src/pages/Auth/ImpersonatorAuth.tsx | 11 +- src/pages/Auth/JwtAuth.tsx | 8 +- src/pages/Settings/ProjectSettings.tsx | 12 +- src/pages/Settings/UserSettings.tsx | 8 +- src/pages/Test.tsx | 82 +++++++++--- yarn.lock | 10 +- 30 files changed, 480 insertions(+), 492 deletions(-) create mode 100644 src/components/InlineOpenInNewIcon.tsx delete mode 100644 src/components/Snack.tsx create mode 100644 src/components/SnackbarProgress.tsx delete mode 100644 src/contexts/SnackContext.tsx create mode 100644 src/contexts/SnackbarContext.tsx diff --git a/package.json b/package.json index 0e09566b..08e1568e 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "jszip": "^3.6.0", "lodash": "^4.17.21", "moment": "^2.29.1", + "notistack": "^1.0.6-next.2", "query-string": "^6.8.3", "react": "^17.0.2", "react-beautiful-dnd": "^13.0.0", diff --git a/src/App.tsx b/src/App.tsx index d19222c0..525815d1 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -13,10 +13,10 @@ import Loading from "components/Loading"; import Navigation from "components/Navigation"; import Logo from "assets/Logo"; -import { SnackProvider } from "contexts/SnackContext"; import ConfirmationProvider from "components/ConfirmationDialog/Provider"; import { AppProvider } from "contexts/AppContext"; import { ProjectContextProvider } from "contexts/ProjectContext"; +import { SnackbarProvider } from "contexts/SnackbarContext"; import { SnackLogProvider } from "contexts/SnackLogContext"; import routes from "constants/routes"; @@ -52,8 +52,8 @@ export default function App() { - - + + }> @@ -170,28 +170,34 @@ export default function App() { ( - - Go Home - - } - fullScreen - /> + } + > + + Go Home + + } + fullScreen + style={{ marginTop: -64 }} + /> + )} /> - - + + diff --git a/src/components/ConfirmationDialog/Dialog.tsx b/src/components/ConfirmationDialog/Dialog.tsx index 7555cc22..99f2a48d 100644 --- a/src/components/ConfirmationDialog/Dialog.tsx +++ b/src/components/ConfirmationDialog/Dialog.tsx @@ -1,24 +1,16 @@ import { useState } from "react"; -import Button from "@material-ui/core/Button"; -import Dialog from "@material-ui/core/Dialog"; -import DialogActions from "@material-ui/core/DialogActions"; -import DialogContent from "@material-ui/core/DialogContent"; -import DialogContentText from "@material-ui/core/DialogContentText"; -import DialogTitle from "@material-ui/core/DialogTitle"; -import TextField from "@material-ui/core/TextField"; -import { makeStyles, createStyles } from "@material-ui/styles"; -//import {confirmationProps} from './props' -const useStyles = makeStyles(() => - createStyles({ - root: { - display: "flex", - flexWrap: "wrap", - }, - dryWrapper: {}, - dryField: {}, - }) -); +import { + Dialog, + DialogActions, + DialogContent, + DialogContentText, + DialogTitle, + TextField, + Button, +} from "@material-ui/core"; + +import { SlideTransitionMui } from "components/Modal/SlideTransition"; export default function Confirmation({ title, @@ -32,56 +24,54 @@ export default function Confirmation({ handleClose, maxWidth = "xs", }: any) { - const classes = useStyles(); const [dryText, setDryText] = useState(""); + return ( - <> - - {title ?? "Are you sure?"} + + {title ?? "Are you sure?"} - - {customBody} - {body && {body}} - {confirmationCommand && ( -
- - Type {confirmationCommand} below to continue: - - { - setDryText(e.target.value); - }} - className={classes.dryField} - InputProps={{ disableUnderline: true }} - autoFocus - margin="dense" - label={confirmationCommand} - fullWidth - /> -
- )} - + + {customBody} + {body && {body}} + {confirmationCommand && ( +
+ + Type {confirmationCommand} below to continue: + + setDryText(e.target.value)} + autoFocus + label={confirmationCommand} + placeholder={confirmationCommand} + fullWidth + /> +
+ )} + - - - - - - + + + + + ); } diff --git a/src/components/FloatingSearch.tsx b/src/components/FloatingSearch.tsx index d269ca37..c0af4933 100644 --- a/src/components/FloatingSearch.tsx +++ b/src/components/FloatingSearch.tsx @@ -31,6 +31,14 @@ export default function FloatingSearch({ top: (theme) => theme.spacing(APP_BAR_HEIGHT / 8 + 1), zIndex: "appBar", height: 48, + transition: (theme) => + theme.transitions.create(["box-shadow", "transform", "opacity"]) + + " !important", + transitionTimingFunction: ( + theme + ) => `${theme.transitions.easing.easeInOut}, + cubic-bezier(0.1, 0.8, 0.1, 1), + cubic-bezier(0.1, 0.8, 0.1, 1) !important`, ...paperSx, }} > diff --git a/src/components/InlineOpenInNewIcon.tsx b/src/components/InlineOpenInNewIcon.tsx new file mode 100644 index 00000000..7d829c8f --- /dev/null +++ b/src/components/InlineOpenInNewIcon.tsx @@ -0,0 +1,12 @@ +import { SvgIconProps } from "@material-ui/core/SvgIcon"; +import OpenInNewIcon from "@material-ui/icons/OpenInNew"; + +export default function InlineOpenInNewIcon(props: SvgIconProps) { + return ( + + ); +} diff --git a/src/components/Settings/ProjectSettings/About.tsx b/src/components/Settings/ProjectSettings/About.tsx index e208bd84..a0a16344 100644 --- a/src/components/Settings/ProjectSettings/About.tsx +++ b/src/components/Settings/ProjectSettings/About.tsx @@ -4,8 +4,9 @@ import { differenceInDays } from "date-fns"; import { Grid, Typography, Button, Link, Divider } from "@material-ui/core"; import LoadingButton from "@material-ui/lab/LoadingButton"; + import Logo from "assets/Logo"; -import OpenInNewIcon from "@material-ui/icons/OpenInNew"; +import InlineOpenInNewIcon from "components/InlineOpenInNewIcon"; import { name, version, repository } from "@root/package.json"; import { projectId } from "@src/firebase"; @@ -74,58 +75,55 @@ export default function About() { return ( <> - - - - - - - GitHub - - + - - Release notes - - +
+ + + + GitHub + + + + + + + Discord + + + + + + + Twitter + + + - +
+ +
- - + + {name} v{version} @@ -142,11 +140,7 @@ export default function About() { display="block" > Update available: {latestUpdate.tag_name} - + )} @@ -164,7 +158,9 @@ export default function About() { href={WIKI_LINKS.updating} target="_blank" rel="noopener noreferrer" - endIcon={} + endIcon={ + + } > How to Update @@ -194,11 +190,7 @@ export default function About() { variant="body2" > Firebase Console - + diff --git a/src/components/Settings/ProjectSettings/Authentication.tsx b/src/components/Settings/ProjectSettings/Authentication.tsx index bc63bf71..f9333089 100644 --- a/src/components/Settings/ProjectSettings/Authentication.tsx +++ b/src/components/Settings/ProjectSettings/Authentication.tsx @@ -4,7 +4,7 @@ import _startCase from "lodash/startCase"; import MultiSelect from "@antlerengineering/multiselect"; import { Typography, Link } from "@material-ui/core"; -import OpenInNewIcon from "@material-ui/icons/OpenInNew"; +import InlineOpenInNewIcon from "components/InlineOpenInNewIcon"; import { IProjectSettingsChildProps } from "pages/Settings/ProjectSettings"; @@ -42,11 +42,7 @@ export default function Authentication({ rel="noopener" > How to configure sign-in options - + diff --git a/src/components/Settings/ProjectSettings/CloudRun.tsx b/src/components/Settings/ProjectSettings/CloudRun.tsx index 03dc3ed6..197247fd 100644 --- a/src/components/Settings/ProjectSettings/CloudRun.tsx +++ b/src/components/Settings/ProjectSettings/CloudRun.tsx @@ -1,6 +1,6 @@ import { Typography, Link, Grid, TextField } from "@material-ui/core"; import LoadingButton from "@material-ui/lab/LoadingButton"; -import OpenInNewIcon from "@material-ui/icons/OpenInNew"; +import InlineOpenInNewIcon from "components/InlineOpenInNewIcon"; import { IProjectSettingsChildProps } from "pages/Settings/ProjectSettings"; import WIKI_LINKS from "constants/wikiLinks"; @@ -21,11 +21,7 @@ export default function CloudRun({ rel="noopener noreferrer" > Learn more - + @@ -51,7 +47,6 @@ export default function CloudRun({ .join("/")}/FunctionsBuilder.git`} target="_blank" rel="noopener noreferrer" - endIcon={} loading={ settings.cloudRunDeployStatus === "BUILDING" || settings.cloudRunDeployStatus === "COMPLETE" diff --git a/src/components/Settings/ThemeColorPicker.tsx b/src/components/Settings/ThemeColorPicker.tsx index 6c09bb02..d24a734a 100644 --- a/src/components/Settings/ThemeColorPicker.tsx +++ b/src/components/Settings/ThemeColorPicker.tsx @@ -60,14 +60,6 @@ export default function ThemeColorPicker({ backgroundColor={light} textColor={lightTheme.palette.getContrastText(light)} /> - - + @@ -112,14 +105,6 @@ export default function ThemeColorPicker({ backgroundColor={dark} textColor={darkTheme.palette.getContrastText(dark)} /> - - + @@ -148,8 +136,16 @@ export default function ThemeColorPicker({ borderRadius: 1, borderTopLeftRadius: 0, borderTopRightRadius: 0, - bgcolor: "background.paper", - boxShadow: (theme) => `0 0 0 16px ${theme.palette.background.paper}`, + bgcolor: (theme) => + theme.palette.mode === "dark" + ? "#1C1E21" + : theme.palette.background.paper, + boxShadow: (theme) => + `0 0 0 16px ${ + theme.palette.mode === "dark" + ? "#1C1E21" + : theme.palette.background.paper + }`, paddingBottom: "env(safe-area-inset-bottom)", }} > @@ -185,39 +181,40 @@ function Swatch({ backgroundColor, textColor }: Record) { bgcolor: backgroundColor, color: textColor, p: 1, - pl: 1.5, + pr: 1.5, typography: "button", display: "flex", justifyContent: "space-between", alignItems: "center", fontVariantNumeric: "tabular-nums", + textAlign: "right", }} > - {contrast} - - {AAA ? "AAA" : AA ? "AA" : "FAIL"} {AAA || AA ? : } + {AAA ? "AAA" : AA ? "AA" : "FAIL"} + + {contrast.toFixed(2)} ); } diff --git a/src/components/Snack.tsx b/src/components/Snack.tsx deleted file mode 100644 index ac62f4f1..00000000 --- a/src/components/Snack.tsx +++ /dev/null @@ -1,101 +0,0 @@ -import { makeStyles, createStyles } from "@material-ui/styles"; -import { Snackbar, CircularProgress } from "@material-ui/core"; -import Alert from "@material-ui/core/Alert"; - -import { useSnackContext } from "contexts/SnackContext"; -import antlerPalette from "theme/palette"; - -const useStyles = makeStyles((theme) => - createStyles({ - progressAction: { marginRight: 0 }, - progressText: { marginLeft: theme.spacing(2) }, - progress: { - color: antlerPalette.green[100], - marginLeft: theme.spacing(2), - }, - - alertIcon: { padding: 0 }, - alertMessage: { padding: theme.spacing(0.75, 2) }, - }) -); - -export default function Snack() { - const classes = useStyles(); - - const { - position, - isOpen, - close, - message, - duration, - action, - variant, - progress, - } = useSnackContext(); - - if (variant === "progress") - return ( - - - {progress.value} - {progress.target && `/${progress.target}`} - - - - - } - ContentProps={{ classes: { action: classes.progressAction } }} - // Stop closing when user clicks - ClickAwayListenerProps={{ mouseEvent: false }} - /> - ); - - if (!variant) - return ( - - ); - - return ( - - - {message} - - - ); -} diff --git a/src/components/SnackbarProgress.tsx b/src/components/SnackbarProgress.tsx new file mode 100644 index 00000000..70c427ec --- /dev/null +++ b/src/components/SnackbarProgress.tsx @@ -0,0 +1,43 @@ +import { useState, Dispatch, SetStateAction, MutableRefObject } from "react"; +import { Stack, CircularProgress } from "@material-ui/core"; + +export interface ISnackbarProgressRef { + setProgress: Dispatch>; + setTarget: Dispatch>; +} + +export interface ISnackbarProgressProps { + target?: number; + stateRef: MutableRefObject; +} + +export default function SnackbarProgress({ + target: targetProp = 100, + stateRef, +}: ISnackbarProgressProps) { + const [progress, setProgress] = useState(0); + const [target, setTarget] = useState(targetProp); + + stateRef.current = { setProgress, setTarget }; + + return ( + + + {progress}/{target} + + + + + ); +} diff --git a/src/components/Table/BulkActions/index.tsx b/src/components/Table/BulkActions/index.tsx index 70b3ee2a..c092a3b5 100644 --- a/src/components/Table/BulkActions/index.tsx +++ b/src/components/Table/BulkActions/index.tsx @@ -1,5 +1,6 @@ import { useState } from "react"; import _find from "lodash/find"; +import { useSnackbar } from "notistack"; import { makeStyles, createStyles } from "@material-ui/styles"; import { @@ -21,7 +22,6 @@ import ArrowDropUpIcon from "@material-ui/icons/ArrowDropUp"; import { useConfirmation } from "components/ConfirmationDialog/Context"; import { useProjectContext } from "contexts/ProjectContext"; -import { useSnackContext } from "contexts/SnackContext"; import { formatPath } from "utils/fns"; import { cloudFunction } from "firebase/callables"; @@ -105,7 +105,7 @@ export default function BulkActions({ selectedRows, columns, clearSelection }) { const { tableActions, tableState } = useProjectContext(); const { requestConfirmation } = useConfirmation(); - const snack = useSnackContext(); + const { enqueueSnackbar } = useSnackbar(); const actionColumns: { name: string; key: string; config: any }[] = columns .filter((column) => column.type === "ACTION") @@ -164,8 +164,7 @@ export default function BulkActions({ selectedRows, columns, clearSelection }) { async (response) => { const { message, cellValue, success } = response.data; // setIsRunning(false); - snack.open({ - message: JSON.stringify(message), + enqueueSnackbar(JSON.stringify(message), { variant: success ? "success" : "error", }); if (cellValue && cellValue.status) { @@ -175,7 +174,7 @@ export default function BulkActions({ selectedRows, columns, clearSelection }) { (error) => { console.error("ERROR", callableName, error); //setIsRunning(false); - snack.open({ message: JSON.stringify(error), variant: "error" }); + enqueueSnackbar(JSON.stringify(error), { variant: "error" }); } ); }); diff --git a/src/components/Table/ColumnMenu/FieldSettings/index.tsx b/src/components/Table/ColumnMenu/FieldSettings/index.tsx index 8bba2d30..b92a05cd 100644 --- a/src/components/Table/ColumnMenu/FieldSettings/index.tsx +++ b/src/components/Table/ColumnMenu/FieldSettings/index.tsx @@ -1,4 +1,5 @@ -import React, { useState, Suspense, useMemo } from "react"; +import { useState, Suspense, useMemo, createElement } from "react"; +import { useSnackbar } from "notistack"; import _set from "lodash/set"; import { IMenuModalProps } from ".."; @@ -10,7 +11,6 @@ import ErrorBoundary from "components/ErrorBoundary"; import Loading from "components/Loading"; import { useProjectContext } from "contexts/ProjectContext"; -import { useSnackContext } from "contexts/SnackContext"; import { useSnackLogContext } from "contexts/SnackLogContext"; import { db } from "../../../../firebase"; import { useAppContext } from "contexts/AppContext"; @@ -22,6 +22,7 @@ import Divider from "@material-ui/core/Divider"; import Button from "@material-ui/core/Button"; import routes from "constants/routes"; import { SETTINGS } from "config/dbPaths"; +import { name as appName } from "@root/package.json"; export default function FieldSettings(props: IMenuModalProps) { const { name, fieldName, type, open, config, handleClose, handleSave } = @@ -33,8 +34,8 @@ export default function FieldSettings(props: IMenuModalProps) { const initializable = getFieldProp("initializable", type); const { requestConfirmation } = useConfirmation(); + const { enqueueSnackbar } = useSnackbar(); const { tableState } = useProjectContext(); - const snack = useSnackContext(); const snackLog = useSnackLogContext(); const appContext = useAppContext(); @@ -85,7 +86,7 @@ export default function FieldSettings(props: IMenuModalProps) {
{customFieldSettings && - React.createElement(customFieldSettings, { + createElement(customFieldSettings, { config: newConfig, handleChange, })} @@ -94,10 +95,9 @@ export default function FieldSettings(props: IMenuModalProps) {
- {" "} Rendered field config - {React.createElement(rendedFieldSettings, { + {createElement(rendedFieldSettings, { config: newConfig, handleChange, })} @@ -126,12 +126,12 @@ export default function FieldSettings(props: IMenuModalProps) { const settingsDoc = await db.doc(SETTINGS).get(); const buildUrl = settingsDoc.get("buildUrl"); if (!buildUrl) { - snack.open({ - message: `Functions Builder is not yet setup`, + enqueueSnackbar(`${appName} Run is not set up`, { variant: "error", action: ( - ), - }); + enqueueSnackbar( + "Filtering while sorting by a column requires a new Firestore index", + { + variant: "warning", + action: ( + + ), + } + ); } else if (error.code === "permission-denied") { - snack.open({ - position: { horizontal: "center", vertical: "top" }, - variant: "error", - message: "You don't have permissions to see the results.", - duration: 10000, - }); + enqueueSnackbar( + "You do not have the permissions to see the results.", + { + variant: "error", + } + ); } } ); @@ -230,11 +233,8 @@ const useTableData = (initialOverrides: any) => { } catch (error) { console.log(error); if (error.code === "permission-denied") { - snack.open({ + enqueueSnackbar("You do not have the permissions to delete rows.", { variant: "error", - message: "You don't have permissions to delete row", - duration: 3000, - position: { vertical: "top", horizontal: "center" }, }); } } @@ -282,11 +282,8 @@ const useTableData = (initialOverrides: any) => { await db.collection(path).doc(newId).set(docData, { merge: true }); } catch (error) { if (error.code === "permission-denied") { - snack.open({ + enqueueSnackbar("You do not have the permissions to add new rows.", { variant: "error", - message: "You don't have permissions to add a new row", - duration: 3000, - position: { vertical: "top", horizontal: "center" }, }); } } diff --git a/src/pages/Auth/ImpersonatorAuth.tsx b/src/pages/Auth/ImpersonatorAuth.tsx index 89df3245..fe177ac9 100644 --- a/src/pages/Auth/ImpersonatorAuth.tsx +++ b/src/pages/Auth/ImpersonatorAuth.tsx @@ -1,4 +1,5 @@ import { useEffect, useState } from "react"; +import { useSnackbar } from "notistack"; import { Typography, Button, TextField } from "@material-ui/core"; @@ -6,12 +7,11 @@ import AuthLayout from "components/Auth/AuthLayout"; import FirebaseUi from "components/Auth/FirebaseUi"; import { signOut } from "utils/auth"; -import { useSnackContext } from "contexts/SnackContext"; import { ImpersonatorAuth } from "../../firebase/callables"; import { auth } from "../../firebase"; export default function ImpersonatorAuthPage() { - const snack = useSnackContext(); + const { enqueueSnackbar } = useSnackbar(); useEffect(() => { //sign out user on initial load @@ -27,11 +27,11 @@ export default function ImpersonatorAuthPage() { const resp = await ImpersonatorAuth(email); setLoading(false); if (resp.data.success) { - snack.open({ message: resp.data.message, variant: "success" }); + enqueueSnackbar(resp.data.message, { variant: "success" }); await auth.signInWithCustomToken(resp.data.jwt); window.location.href = "/"; } else { - snack.open({ message: resp.data.message, variant: "error" }); + enqueueSnackbar(resp.data.message, { variant: "error" }); } }; @@ -50,8 +50,7 @@ export default function ImpersonatorAuthPage() { if (result.claims.roles?.includes("ADMIN")) { setAdminUser(authUser.user); } else { - snack.open({ - message: "Not an admin account", + enqueueSnackbar("Not an admin account", { variant: "error", }); signOut(); diff --git a/src/pages/Auth/JwtAuth.tsx b/src/pages/Auth/JwtAuth.tsx index dbc1d4b3..1bfd8013 100644 --- a/src/pages/Auth/JwtAuth.tsx +++ b/src/pages/Auth/JwtAuth.tsx @@ -1,13 +1,13 @@ import { useState } from "react"; +import { useSnackbar } from "notistack"; import { TextField, Typography, Button } from "@material-ui/core"; import { auth } from "../../firebase"; -import { useSnackContext } from "contexts/SnackContext"; import AuthLayout from "components/Auth/AuthLayout"; export default function JwtAuthPage() { - const snack = useSnackContext(); + const { enqueueSnackbar } = useSnackbar(); const [jwt, setJWT] = useState(""); const [loading, setLoading] = useState(false); @@ -17,10 +17,10 @@ export default function JwtAuthPage() { try { await auth.signInWithCustomToken(jwt); - snack.open({ message: "Success", variant: "success" }); + enqueueSnackbar("Success", { variant: "success" }); window.location.assign("/"); } catch (e) { - snack.open({ message: e.message, variant: "error" }); + enqueueSnackbar(e.message, { variant: "error" }); } finally { setLoading(false); } diff --git a/src/pages/Settings/ProjectSettings.tsx b/src/pages/Settings/ProjectSettings.tsx index c60978c5..2e8afce3 100644 --- a/src/pages/Settings/ProjectSettings.tsx +++ b/src/pages/Settings/ProjectSettings.tsx @@ -1,4 +1,5 @@ import { useEffect } from "react"; +import { useSnackbar } from "notistack"; import { useDebouncedCallback } from "use-debounce"; import { Container, Stack, Fade } from "@material-ui/core"; @@ -10,7 +11,6 @@ import CloudRun from "@src/components/Settings/ProjectSettings/CloudRun"; import Authentication from "components/Settings/ProjectSettings/Authentication"; import Customization from "components/Settings/ProjectSettings/Customization"; -import { useSnackContext } from "contexts/SnackContext"; import { SETTINGS, PUBLIC_SETTINGS } from "config/dbPaths"; import useDoc from "hooks/useDoc"; import { db } from "@src/firebase"; @@ -24,7 +24,7 @@ export interface IProjectSettingsChildProps { } export default function ProjectSettingsPage() { - const snack = useSnackContext(); + const { enqueueSnackbar } = useSnackbar(); const [settingsState] = useDoc({ path: SETTINGS }, { createIfMissing: true }); const settings = settingsState.doc; @@ -33,9 +33,7 @@ export default function ProjectSettingsPage() { db .doc(SETTINGS) .update(data) - .then(() => - snack.open({ message: "Saved", variant: "success", duration: 3000 }) - ), + .then(() => enqueueSnackbar("Saved", { variant: "success" })), 1000 ); @@ -49,9 +47,7 @@ export default function ProjectSettingsPage() { db .doc(PUBLIC_SETTINGS) .update(data) - .then(() => - snack.open({ message: "Saved", variant: "success", duration: 3000 }) - ), + .then(() => enqueueSnackbar("Saved", { variant: "success" })), 1000 ); diff --git a/src/pages/Settings/UserSettings.tsx b/src/pages/Settings/UserSettings.tsx index 015b528d..6bd6cb20 100644 --- a/src/pages/Settings/UserSettings.tsx +++ b/src/pages/Settings/UserSettings.tsx @@ -1,4 +1,5 @@ import { useEffect } from "react"; +import { useSnackbar } from "notistack"; import { useDebouncedCallback } from "use-debounce"; import { Container, Stack, Fade } from "@material-ui/core"; @@ -10,7 +11,6 @@ import Theme from "components/Settings/UserSettings/Theme"; import Personalization from "components/Settings/UserSettings/Personalization"; import { useAppContext } from "@src/contexts/AppContext"; -import { useSnackContext } from "contexts/SnackContext"; import { USERS } from "config/dbPaths"; import useDoc from "hooks/useDoc"; import { db } from "@src/firebase"; @@ -22,7 +22,7 @@ export interface IUserSettingsChildProps { export default function UserSettingsPage() { const { currentUser } = useAppContext(); - const snack = useSnackContext(); + const { enqueueSnackbar } = useSnackbar(); const path = `${USERS}/${currentUser?.uid}`; @@ -33,9 +33,7 @@ export default function UserSettingsPage() { db .doc(path) .update(data) - .then(() => - snack.open({ message: "Saved", variant: "success", duration: 3000 }) - ), + .then(() => enqueueSnackbar("Saved", { variant: "success" })), 1000 ); diff --git a/src/pages/Test.tsx b/src/pages/Test.tsx index b8a467c2..c9b92a22 100644 --- a/src/pages/Test.tsx +++ b/src/pages/Test.tsx @@ -1,5 +1,5 @@ -import { useContext, useEffect, Fragment } from "react"; -import { SnackContext } from "contexts/SnackContext"; +import { Fragment, useRef, useState } from "react"; +import { useSnackbar } from "notistack"; import Navigation from "components/Navigation"; import { @@ -36,9 +36,12 @@ import { Tab, } from "@material-ui/core"; import SparkIcon from "@material-ui/icons/OfflineBoltOutlined"; -import { useState } from "react"; import { useConfirmation } from "components/ConfirmationDialog"; +import SnackbarProgress, { + ISnackbarProgressRef, +} from "components/SnackbarProgress"; + const typographyVariants = [ "h1", "h2", @@ -56,24 +59,15 @@ const typographyVariants = [ ]; export default function TestView() { - const snackContext = useContext(SnackContext); const theme = useTheme(); const { requestConfirmation } = useConfirmation(); - - useEffect(() => { - // alert("OPEN"); - snackContext.open({ - variant: "progress", - message: "Preparing files for download", - duration: undefined, - }); - - snackContext.setProgress({ value: 90, target: 120 }); - }, []); + const { enqueueSnackbar, closeSnackbar } = useSnackbar(); const [tab, setTab] = useState(0); const handleTabChange = (_, newTab) => setTab(newTab); + const snackbarProgressRef = useRef(); + return ( @@ -844,6 +838,64 @@ export default function TestView() { Confirmation
+ + + + + ), + } + ) + } + > + Error + + + + + + diff --git a/yarn.lock b/yarn.lock index cff4ff8d..7468c56b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5258,7 +5258,7 @@ clone@^1.0.2: resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e" integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4= -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== @@ -11536,6 +11536,14 @@ normalize-url@^4.1.0: resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-4.5.1.tgz#0dd90cf1288ee1d1313b87081c9a5932ee48518a" integrity sha512-9UZCFRHQdNrfTpGg8+1INIg93B6zE0aXMVFkw1WFwvO4SlZywU6aLg5Of0Ap/PgcbSw4LNxvMWXMeugwMCX0AA== +notistack@^1.0.6-next.2: + version "1.0.6-next.2" + resolved "https://registry.yarnpkg.com/notistack/-/notistack-1.0.6-next.2.tgz#025e98cd077919c5380f0cd5b30b67e3df48678e" + integrity sha512-ilyy7W2R7NZQG3xVe2fFkF39JtrnwkGS6CR+VekDI5aYLf+umvDrmImqs+R0WZc498C3HERFXxPOVNooPBKm0g== + 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"