fix: remove react-router-dom dependency from NotificationProvider

Signed-off-by: Mason Hu <[email protected]>
canonical · Jan 19, 2024 · b195d5c · b195d5c
1 parent 0d44c0f
commit b195d5c
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 63 deletions.
diff --git a/package.json b/package.json
@@ -41,7 +41,6 @@
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "14.1.2",
     "@testing-library/user-event": "14.5.2",
-    "@types/react-router-dom": "5.3.3",
     "@typescript-eslint/eslint-plugin": "5.62.0",
     "@typescript-eslint/parser": "5.62.0",
     "babel-jest": "27.5.1",
@@ -95,7 +94,6 @@
     "classnames": "2.5.1",
     "nanoid": "3.3.7",
     "prop-types": "15.8.1",
-    "react-router-dom": "6.21.1",
     "react-table": "7.8.0",
     "react-useportal": "1.0.19"
   },

diff --git a/src/components/NotificationProvider/NotificationProvider.test.tsx b/src/components/NotificationProvider/NotificationProvider.test.tsx
@@ -7,7 +7,6 @@ import {
   NotificationProvider,
   useNotify,
 } from "./NotificationProvider";
-import { BrowserRouter } from "react-router-dom";
 import Button from "../Button";
 import { act } from "react-dom/test-utils";
 
@@ -51,8 +50,7 @@ describe("NotificationProvider", () => {
             <NotificationConsumer />
           </div>
         </NotificationProvider>
-      </div>,
-      { wrapper: BrowserRouter }
+      </div>
     );
 
     const clickBtn = async (testId: string) =>

diff --git a/src/components/NotificationProvider/NotificationProvider.tsx b/src/components/NotificationProvider/NotificationProvider.tsx
@@ -9,10 +9,8 @@ import React, {
 import {
   NotificationType,
   NotificationHelper,
-  QueuedNotification,
   NotifyProviderProps,
 } from "./types";
-import { useLocation } from "react-router-dom";
 import isEqual from "lodash/isEqual";
 import { info, failure, success, queue } from "./messageBuilder";
 import Notification, { DefaultTitles } from "../Notification/Notification";
@@ -27,7 +25,11 @@ const NotifyContext = createContext<NotificationHelper>({
   setDeduplicated: () => undefined,
 });
 
-export const NotificationProvider: FC<NotifyProviderProps> = ({ children }) => {
+export const NotificationProvider: FC<NotifyProviderProps> = ({
+  children,
+  state,
+  pathname,
+}) => {
   const [notification, setNotification] = useState<NotificationType | null>(
     null
   );
@@ -41,6 +43,15 @@ export const NotificationProvider: FC<NotifyProviderProps> = ({ children }) => {
     return value;
   };
 
+  useEffect(() => {
+    if (state?.queuedNotification) {
+      setDeduplicated(state.queuedNotification);
+      window.history.replaceState({}, "");
+    } else {
+      clear();
+    }
+  }, [state, pathname]);
+
   const helper: NotificationHelper = {
     notification,
     clear,
@@ -58,19 +69,7 @@ export const NotificationProvider: FC<NotifyProviderProps> = ({ children }) => {
 };
 
 export function useNotify() {
-  const ctx = useContext(NotifyContext);
-  const { state, pathname } = useLocation() as QueuedNotification;
-
-  useEffect(() => {
-    if (state?.queuedNotification) {
-      ctx.setDeduplicated(state.queuedNotification);
-      window.history.replaceState({}, "");
-    } else {
-      ctx.clear();
-    }
-  }, [state, pathname]);
-
-  return ctx;
+  return useContext(NotifyContext);
 }
 
 export const NotificationConsumer: FC = () => {

diff --git a/src/components/NotificationProvider/types.ts b/src/components/NotificationProvider/types.ts
@@ -3,6 +3,10 @@ import { ValueOf } from "types";
 import { NotificationSeverity } from "../Notification";
 
 export interface NotifyProviderProps {
+  state?: {
+    queuedNotification: NotificationType | null;
+  };
+  pathname?: string;
   children: ReactNode;
 }
 

diff --git a/yarn.lock b/yarn.lock
@@ -2687,11 +2687,6 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
-"@remix-run/[email protected]":
-  version "1.14.1"
-  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.14.1.tgz#6d2dd03d52e604279c38911afc1079d58c50a755"
-  integrity sha512-Qg4DMQsfPNAs88rb2xkdk03N3bjK4jgX5fR24eHCTR9q6PrhZQZ4UJBPzCHJkIpTRN1UKxx2DzjZmnC+7Lj0Ow==
-
 "@rushstack/eslint-patch@^1.1.0":
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.5.1.tgz#5f1b518ec5fa54437c0b7c4a821546c64fed6922"
@@ -3754,11 +3749,6 @@
   dependencies:
     "@types/node" "*"
 
-"@types/history@^4.7.11":
-  version "4.7.11"
-  resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.11.tgz#56588b17ae8f50c53983a524fc3cc47437969d64"
-  integrity sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==
-
 "@types/html-minifier-terser@^6.0.0":
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#4fc33a00c1d0c16987b1a20cf92d20614c55ac35"
@@ -3932,23 +3922,6 @@
   dependencies:
     "@types/react" "*"
 
-"@types/[email protected]":
-  version "5.3.3"
-  resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.3.3.tgz#e9d6b4a66fcdbd651a5f106c2656a30088cc1e83"
-  integrity sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==
-  dependencies:
-    "@types/history" "^4.7.11"
-    "@types/react" "*"
-    "@types/react-router" "*"
-
-"@types/react-router@*":
-  version "5.1.20"
-  resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-5.1.20.tgz#88eccaa122a82405ef3efbcaaa5dcdd9f021387c"
-  integrity sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==
-  dependencies:
-    "@types/history" "^4.7.11"
-    "@types/react" "*"
-
 "@types/[email protected]":
   version "7.7.19"
   resolved "https://registry.yarnpkg.com/@types/react-table/-/react-table-7.7.19.tgz#5175cb52a7df9e0234a67bdbdfe592738c92c862"
@@ -10782,21 +10755,6 @@ [email protected]:
     use-callback-ref "^1.3.0"
     use-sidecar "^1.1.2"
 
-[email protected]:
-  version "6.21.1"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.21.1.tgz#58b459d2fe1841388c95bb068f85128c45e27349"
-  integrity sha512-QCNrtjtDPwHDO+AO21MJd7yIcr41UetYt5jzaB9Y1UYaPTCnVuJq6S748g1dE11OQlCFIQg+RtAA1SEZIyiBeA==
-  dependencies:
-    "@remix-run/router" "1.14.1"
-    react-router "6.21.1"
-
-[email protected]:
-  version "6.21.1"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.21.1.tgz#8db7ee8d7cfc36513c9a66b44e0897208c33be34"
-  integrity sha512-W0l13YlMTm1YrpVIOpjCADJqEUpz1vm+CMo47RuFX4Ftegwm6KOYsL5G3eiE52jnJpKvzm6uB/vTKTPKM8dmkA==
-  dependencies:
-    "@remix-run/router" "1.14.1"
-
 react-style-singleton@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4"