From bea552169ca1e31615853665f7e606f770ba10af Mon Sep 17 00:00:00 2001
From: Mason Hu <mason.hu@canonical.com>
Date: Thu, 18 Jan 2024 15:49:30 +0200
Subject: [PATCH] fix: move useLocation within useNotify hook to cater for
 latest react-router-dom limitations

Signed-off-by: Mason Hu <mason.hu@canonical.com>
---
 .../NotificationProvider.tsx                  | 26 +++++++++++--------
 src/components/NotificationProvider/types.ts  |  1 +
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/components/NotificationProvider/NotificationProvider.tsx b/src/components/NotificationProvider/NotificationProvider.tsx
index fcf73fb13..97cb6664d 100644
--- a/src/components/NotificationProvider/NotificationProvider.tsx
+++ b/src/components/NotificationProvider/NotificationProvider.tsx
@@ -24,13 +24,13 @@ const NotifyContext = createContext<NotificationHelper>({
   success: () => undefined,
   info: () => undefined,
   queue: () => undefined,
+  setDeduplicated: () => undefined,
 });
 
 export const NotificationProvider: FC<NotifyProviderProps> = ({ children }) => {
   const [notification, setNotification] = useState<NotificationType | null>(
     null
   );
-  const { state, pathname } = useLocation() as QueuedNotification;
 
   const clear = () => notification !== null && setNotification(null);
 
@@ -41,15 +41,6 @@ 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,6 +49,7 @@ export const NotificationProvider: FC<NotifyProviderProps> = ({ children }) => {
       setDeduplicated(failure(title, error, message, actions)),
     info: (message, title) => setDeduplicated(info(message, title)),
     success: (message) => setDeduplicated(success(message)),
+    setDeduplicated,
   };
 
   return (
@@ -66,7 +58,19 @@ export const NotificationProvider: FC<NotifyProviderProps> = ({ children }) => {
 };
 
 export function useNotify() {
-  return useContext(NotifyContext);
+  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;
 }
 
 export const NotificationConsumer: FC = () => {
diff --git a/src/components/NotificationProvider/types.ts b/src/components/NotificationProvider/types.ts
index b0f8d5e47..f45bfc500 100644
--- a/src/components/NotificationProvider/types.ts
+++ b/src/components/NotificationProvider/types.ts
@@ -37,4 +37,5 @@ export interface NotificationHelper {
   info: (message: ReactNode, title?: string) => NotificationType;
   success: (message: ReactNode) => NotificationType;
   queue: (notification: NotificationType) => QueuedNotification;
+  setDeduplicated: (value: NotificationType) => NotificationType;
 }