From 1dc91a322147042c03f0e3fe500757412ec8a0a5 Mon Sep 17 00:00:00 2001 From: Thibaut Sardan Date: Wed, 6 Apr 2022 14:20:23 +0100 Subject: [PATCH 1/4] add remove all notif and cleanup unneeded deps --- packages/common-components/package.json | 5 +---- packages/common-components/rollup.config.js | 1 - .../src/Toasts/ToastContext.tsx | 19 ++++++++++++++----- packages/files-ui/package.json | 2 -- .../Notifications/NotificationList.tsx | 6 +++++- .../src/Components/Layouts/AppNav.tsx | 8 ++++++-- .../src/Contexts/NotificationsContext.tsx | 4 +--- packages/storage-ui/package.json | 2 -- yarn.lock | 17 +---------------- 9 files changed, 28 insertions(+), 36 deletions(-) diff --git a/packages/common-components/package.json b/packages/common-components/package.json index 3f1954a0c1..b474fdaa60 100644 --- a/packages/common-components/package.json +++ b/packages/common-components/package.json @@ -37,8 +37,7 @@ "@material-ui/styles": ">4.0.0", "formik": "^2.2.5", "react": ">16.8.0", - "react-dom": ">16.8.0", - "react-toast-notifications": ">2.4.0" + "react-dom": ">16.8.0" }, "devDependencies": { "@babel/core": "^7.12.10", @@ -56,7 +55,6 @@ "@svgr/webpack": "^5.5.0", "@types/react-blockies": "^1.4.0", "@types/react-router-dom": "^5.1.6", - "@types/react-toast-notifications": "^2.4.0", "babel-loader": "8.1.0", "fork-ts-checker-webpack-plugin": "^6.0.5", "formik": "^2.2.5", @@ -64,7 +62,6 @@ "react-blockies": "^1.4.1", "react-dom": "16.14.0", "react-router-dom": "^5.2.0", - "react-toast-notifications": "^2.4.0", "rollup": "2.34.2", "rollup-plugin-peer-deps-external": "^2.2.4", "rollup-plugin-postcss": "^3.1.8", diff --git a/packages/common-components/rollup.config.js b/packages/common-components/rollup.config.js index b9323226bb..05dd9c4f9b 100644 --- a/packages/common-components/rollup.config.js +++ b/packages/common-components/rollup.config.js @@ -39,7 +39,6 @@ export default { "react-dom", "@material-ui/styles", "formik", - "react-toast-notifications", "@chainsafe/common-theme" ] } diff --git a/packages/common-components/src/Toasts/ToastContext.tsx b/packages/common-components/src/Toasts/ToastContext.tsx index b9cc6e22bd..4538b283b6 100644 --- a/packages/common-components/src/Toasts/ToastContext.tsx +++ b/packages/common-components/src/Toasts/ToastContext.tsx @@ -88,12 +88,11 @@ interface ToastContext { addToast: (toastParams: ToastParams) => string updateToast: (toastId: string, toastParams: ToastParams, startDismissal?: boolean) => void removeToast: (toastId: string) => void + removeAllToasts: () => void toasts: Toast[] } -const ToastContext = React.createContext( - undefined -) +const ToastContext = React.createContext(undefined) const ToastProvider = ({ children, @@ -111,6 +110,16 @@ const ToastProvider = ({ setToastQueue(toasts.current) }, [toasts]) + const removeAllToasts = useCallback(() => { + // cancel any pending progress such as upload/downloads etc.. + toasts.current.forEach((toast) => { + toast.onProgressCancel && toast.onProgressCancel() + }) + + toasts.current = [] + setToastQueue(toasts.current) + }, [toasts]) + const addToast = useCallback((toastParams: ToastParams) => { const id = uuidv4() toasts.current = [ @@ -159,6 +168,7 @@ const ToastProvider = ({ addToast, updateToast, removeToast, + removeAllToasts, toasts: toastQueue }} > @@ -184,8 +194,7 @@ const ToastProvider = ({ ))} ) - )) - } + ))} {children} ) diff --git a/packages/files-ui/package.json b/packages/files-ui/package.json index bfb3f33509..0b486fabfb 100644 --- a/packages/files-ui/package.json +++ b/packages/files-ui/package.json @@ -50,7 +50,6 @@ "react-pdf": "5.3.0", "react-scripts": "3.4.4", "react-swipeable": "^6.0.1", - "react-toast-notifications": "^2.4.0", "react-qr-code": "2.0.3", "react-zoom-pan-pinch": "^1.6.1", "remark-gfm": "^1.0.0", @@ -74,7 +73,6 @@ "@types/react-beforeunload": "^2.1.0", "@types/react-dom": "^16.9.10", "@types/react-pdf": "^5.0.0", - "@types/react-toast-notifications": "^2.4.0", "@types/yup": "^0.29.9", "@types/zxcvbn": "^4.4.0", "babel-plugin-macros": "^2.8.0", diff --git a/packages/files-ui/src/Components/Elements/Notifications/NotificationList.tsx b/packages/files-ui/src/Components/Elements/Notifications/NotificationList.tsx index e64ec2357a..304ef72ad0 100644 --- a/packages/files-ui/src/Components/Elements/Notifications/NotificationList.tsx +++ b/packages/files-ui/src/Components/Elements/Notifications/NotificationList.tsx @@ -1,4 +1,4 @@ -import React from "react" +import React, { useEffect } from "react" import { Typography, ScrollbarWrapper, Divider } from "@chainsafe/common-components" import { createStyles, ITheme, makeStyles } from "@chainsafe/common-theme" import dayjs from "dayjs" @@ -58,6 +58,10 @@ const NotificationList = ({ notifications }: INotificationListProps) => { const thisWeeksNotifications = notifications.filter(n => dayjs(Date.now()).diff(dayjs.unix(n.createdAt), "day") <= 7) const olderNotifications = notifications.filter(n => dayjs(Date.now()).diff(dayjs.unix(n.createdAt), "day") > 7) + useEffect(() => { + console.log("notif", notifications.length) + }, [notifications]) + return ( { const { publicKey, isNewDevice, shouldInitializeAccount, logout } = useThresholdKey() const { removeUser, getProfileTitle, profile } = useUser() const location = useLocation() + const { removeAllToasts } = useToasts() const signOut = useCallback(() => { + console.log("hop") logout() removeUser() - }, [logout, removeUser]) + removeAllToasts() + }, [logout, removeAllToasts, removeUser]) const handleOnClick = useCallback(() => { if (!desktop && navOpen) { diff --git a/packages/files-ui/src/Contexts/NotificationsContext.tsx b/packages/files-ui/src/Contexts/NotificationsContext.tsx index a5daa2354b..dd3b9ea73c 100644 --- a/packages/files-ui/src/Contexts/NotificationsContext.tsx +++ b/packages/files-ui/src/Contexts/NotificationsContext.tsx @@ -12,9 +12,7 @@ interface INotificationsContext { removeNotification: (id: string) => void } -const NotificationsContext = React.createContext( - undefined -) +const NotificationsContext = React.createContext(undefined) const NotificationsProvider = ({ children }: NotificationsContextProps) => { const [notifications, setNotifications] = useState([]) diff --git a/packages/storage-ui/package.json b/packages/storage-ui/package.json index 0ce787974a..0ac86e9ea2 100644 --- a/packages/storage-ui/package.json +++ b/packages/storage-ui/package.json @@ -38,7 +38,6 @@ "react-pdf": "5.3.0", "react-scripts": "3.4.4", "react-swipeable": "^6.0.1", - "react-toast-notifications": "^2.4.0", "react-use-hotjar": "1.0.8", "react-zoom-pan-pinch": "^1.6.1", "remark-gfm": "^1.0.0", @@ -61,7 +60,6 @@ "@types/react-beforeunload": "^2.1.0", "@types/react-dom": "^16.9.10", "@types/react-pdf": "^5.0.0", - "@types/react-toast-notifications": "^2.4.0", "@types/yup": "^0.29.9", "@types/zxcvbn": "^4.4.0", "babel-plugin-macros": "^2.8.0", diff --git a/yarn.lock b/yarn.lock index 52be84721c..4d279ff2d4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2108,7 +2108,7 @@ "@emotion/utils" "0.11.3" "@emotion/weak-memoize" "0.2.5" -"@emotion/core@^10.0.14", "@emotion/core@^10.0.15", "@emotion/core@^10.0.20", "@emotion/core@^10.0.9": +"@emotion/core@^10.0.15", "@emotion/core@^10.0.20", "@emotion/core@^10.0.9": version "10.0.35" resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.35.tgz#513fcf2e22cd4dfe9d3894ed138c9d7a859af9b3" integrity sha512-sH++vJCdk025fBlRZSAhkRlSUoqSqgCzYf5fMOmqqi3bM6how+sQpg3hkgJonj8GxXM4WbD7dRO+4tegDB9fUw== @@ -6346,13 +6346,6 @@ dependencies: "@types/react" "*" -"@types/react-toast-notifications@^2.4.0": - version "2.4.0" - resolved "https://registry.yarnpkg.com/@types/react-toast-notifications/-/react-toast-notifications-2.4.0.tgz#0ca0732cfae5a6ef5939a676fffac6e64c78bc25" - integrity sha512-nBI6gQ0E5gwi3IcTrVOR3oKoMGRfH1gK67kI6RIKUmiV5Sc3ZC/eymYBFt6iDo0dhlYET6kdtR0tcUh9h5L0sQ== - dependencies: - "@types/react" "*" - "@types/react-transition-group@*": version "4.4.0" resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.0.tgz#882839db465df1320e4753e6e9f70ca7e9b4d46d" @@ -21376,14 +21369,6 @@ react-textarea-autosize@^8.1.1: use-composed-ref "^1.0.0" use-latest "^1.0.0" -react-toast-notifications@^2.4.0: - version "2.4.0" - resolved "https://registry.yarnpkg.com/react-toast-notifications/-/react-toast-notifications-2.4.0.tgz#6213730bd1fe158fc01aeef200687ea94c5c5b24" - integrity sha512-8tkrbNh7LxkiFmtqAL/AiI55efIeI+fBk3c6ImsiZ0VObb4yvOq0cqYuJHyUiv9fuD2aBxvXGVH+n4Snt8qoWA== - dependencies: - "@emotion/core" "^10.0.14" - react-transition-group "^4.3.0" - react-transition-group@^4.3.0: version "4.4.1" resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9" From c7f8f692766232f34cbbe4f571f4f5928d099bc5 Mon Sep 17 00:00:00 2001 From: Thibaut Sardan Date: Wed, 6 Apr 2022 14:24:15 +0100 Subject: [PATCH 2/4] for storage --- packages/storage-ui/src/Components/Layouts/AppHeader.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/storage-ui/src/Components/Layouts/AppHeader.tsx b/packages/storage-ui/src/Components/Layouts/AppHeader.tsx index 7f7713e9f3..2e7158a30d 100644 --- a/packages/storage-ui/src/Components/Layouts/AppHeader.tsx +++ b/packages/storage-ui/src/Components/Layouts/AppHeader.tsx @@ -8,7 +8,8 @@ import { HamburgerMenu, MenuDropdown, PowerDownSvg, - useHistory + useHistory, + useToasts } from "@chainsafe/common-components" import { ROUTE_LINKS } from "../StorageRoutes" import { Trans } from "@lingui/macro" @@ -177,13 +178,15 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => { const { isLoggedIn, logout } = useStorageApi() const { history } = useHistory() const { getProfileTitle, profile } = useUser() + const { removeAllToasts } = useToasts() const profileTitle = getProfileTitle() const signOut = useCallback(async () => { logout() + removeAllToasts() history.replace("/", {}) - }, [logout, history]) + }, [logout, removeAllToasts, history]) return (
Date: Wed, 6 Apr 2022 15:29:02 +0200 Subject: [PATCH 3/4] Apply suggestions from code review --- .../Components/Elements/Notifications/NotificationList.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/files-ui/src/Components/Elements/Notifications/NotificationList.tsx b/packages/files-ui/src/Components/Elements/Notifications/NotificationList.tsx index 304ef72ad0..e64ec2357a 100644 --- a/packages/files-ui/src/Components/Elements/Notifications/NotificationList.tsx +++ b/packages/files-ui/src/Components/Elements/Notifications/NotificationList.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from "react" +import React from "react" import { Typography, ScrollbarWrapper, Divider } from "@chainsafe/common-components" import { createStyles, ITheme, makeStyles } from "@chainsafe/common-theme" import dayjs from "dayjs" @@ -58,10 +58,6 @@ const NotificationList = ({ notifications }: INotificationListProps) => { const thisWeeksNotifications = notifications.filter(n => dayjs(Date.now()).diff(dayjs.unix(n.createdAt), "day") <= 7) const olderNotifications = notifications.filter(n => dayjs(Date.now()).diff(dayjs.unix(n.createdAt), "day") > 7) - useEffect(() => { - console.log("notif", notifications.length) - }, [notifications]) - return ( Date: Wed, 6 Apr 2022 15:29:45 +0200 Subject: [PATCH 4/4] Update packages/files-ui/src/Components/Layouts/AppNav.tsx --- packages/files-ui/src/Components/Layouts/AppNav.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/files-ui/src/Components/Layouts/AppNav.tsx b/packages/files-ui/src/Components/Layouts/AppNav.tsx index 9fe2d8ba83..5651b96017 100644 --- a/packages/files-ui/src/Components/Layouts/AppNav.tsx +++ b/packages/files-ui/src/Components/Layouts/AppNav.tsx @@ -264,7 +264,6 @@ const AppNav = ({ navOpen, setNavOpen }: IAppNav) => { const { removeAllToasts } = useToasts() const signOut = useCallback(() => { - console.log("hop") logout() removeUser() removeAllToasts()