From 2103b69feaf5b1feef06d7b8617b1ecd73a76c16 Mon Sep 17 00:00:00 2001
From: Ruslan Khayrullin <ruslfm08@gmail.com>
Date: Wed, 15 Mar 2023 15:06:36 +0500
Subject: [PATCH] fix(in-316): rewrite token update listener

---
 src/features/AuthStore/config.tsx        |  2 --
 src/features/AuthStore/hooks/useAuth.tsx | 18 +++++++++---------
 src/helpers/token/index.tsx              |  2 +-
 src/hooks/useEventListener.tsx           |  4 ++--
 4 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/src/features/AuthStore/config.tsx b/src/features/AuthStore/config.tsx
index 61072f62..2f168442 100644
--- a/src/features/AuthStore/config.tsx
+++ b/src/features/AuthStore/config.tsx
@@ -3,5 +3,3 @@ import { UserManager } from 'oidc-client'
 import { getClientSettings } from './helpers'
 
 export const userManager = new UserManager(getClientSettings())
-
-export const channel = new BroadcastChannel('access_token')
diff --git a/src/features/AuthStore/hooks/useAuth.tsx b/src/features/AuthStore/hooks/useAuth.tsx
index 92f994c7..d2a6c5ad 100644
--- a/src/features/AuthStore/hooks/useAuth.tsx
+++ b/src/features/AuthStore/hooks/useAuth.tsx
@@ -21,6 +21,7 @@ import {
   setCookie,
   removeCookie,
   isMatchPage,
+  TOKEN_KEY,
 } from 'helpers'
 
 import {
@@ -40,7 +41,7 @@ import {
   getTokenVirtualUser,
 } from 'requests'
 
-import { userManager, channel } from '../config'
+import { userManager } from '../config'
 import { needCheckNewDeviсe } from '../helpers'
 
 export const useAuth = () => {
@@ -80,8 +81,6 @@ export const useAuth = () => {
       name: 'access_token',
       value: loadedUser.access_token,
     })
-    // обновляем токен в других окнах/вкладках
-    channel.postMessage({ token: loadedUser.access_token })
   }, [])
 
   const checkUser = useCallback(async () => {
@@ -177,23 +176,24 @@ export const useAuth = () => {
   ])
 
   useEventListener({
-    callback: useCallback(async (e: MessageEvent<{ token: string }>) => {
+    callback: useCallback(async (e: StorageEvent) => {
       const loadedUser = await userManager.getUser()
 
       if (
-        !e.data.token
+        e.storageArea !== localStorage
+          || e.key !== TOKEN_KEY
+          || !e.newValue
           || !loadedUser
-          || loadedUser.access_token === e.data.token
+          || loadedUser.access_token === e.newValue
       ) return
 
       userManager.storeUser({
         ...loadedUser,
-        access_token: e.data.token,
+        access_token: e.newValue,
         toStorageString: loadedUser.toStorageString,
       })
     }, []),
-    event: 'message',
-    target: channel,
+    event: 'storage',
   })
 
   useEffect(() => {
diff --git a/src/helpers/token/index.tsx b/src/helpers/token/index.tsx
index 06eb165b..0c4e59f8 100644
--- a/src/helpers/token/index.tsx
+++ b/src/helpers/token/index.tsx
@@ -1,4 +1,4 @@
-const TOKEN_KEY = 'token'
+export const TOKEN_KEY = 'token'
 
 export const readToken = () => (
   localStorage.getItem(TOKEN_KEY)
diff --git a/src/hooks/useEventListener.tsx b/src/hooks/useEventListener.tsx
index 4325e25c..3d0e4680 100644
--- a/src/hooks/useEventListener.tsx
+++ b/src/hooks/useEventListener.tsx
@@ -4,7 +4,7 @@ import { useEffect, useRef } from 'react'
 
 type EventMap = HTMLElementEventMap & WindowEventMap
 
-type Target = RefObject<HTMLElement> | HTMLElement | Window | BroadcastChannel
+type Target = RefObject<HTMLElement> | HTMLElement | Window
 
 type Args<E extends keyof EventMap> = {
   callback: (e: EventMap[E]) => void,
@@ -28,7 +28,7 @@ export const useEventListener = <E extends keyof EventMap>({
   }, [callback])
 
   useEffect(() => {
-    const windowOrElement: HTMLElement | Window | BroadcastChannel | null = 'current' in target
+    const windowOrElement: HTMLElement | Window | null = 'current' in target
       ? target.current
       : target