diff --git a/src/api/ActionDispatcher.ts b/src/api/ActionDispatcher.ts index 709145855..72517e104 100644 --- a/src/api/ActionDispatcher.ts +++ b/src/api/ActionDispatcher.ts @@ -26,9 +26,9 @@ export class ActionDispatcher { } } - public dispatch(type: string, data?: unknown): void { + public dispatch(timeStamp: number, type: string, data?: unknown): void { if (this.actions[type]) { - this.actions[type].forEach((fn) => fn(data)); + this.actions[type].forEach((fn) => fn(data, timeStamp)); } } } diff --git a/src/api/index.ts b/src/api/index.ts index c5dc49581..1d4522c21 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -11,7 +11,7 @@ export const initializeDigmaMessageListener = ( window.addEventListener("message", (e) => { if (isDigmaMessageEvent(e)) { console.debug("Digma message received: ", e); - dispatcher.dispatch(e.data.action, e.data.payload); + dispatcher.dispatch(e.timeStamp, e.data.action, e.data.payload); } }); }; diff --git a/src/api/types.ts b/src/api/types.ts index 8e7a18f30..18a0ba5b8 100644 --- a/src/api/types.ts +++ b/src/api/types.ts @@ -1,4 +1,4 @@ -export type ActionListener = (data: unknown) => void; +export type ActionListener = (data: unknown, timeStamp: number) => void; export interface DigmaIncomingMessageData { type: "digma"; diff --git a/src/components/Assets/index.tsx b/src/components/Assets/index.tsx index 8bedba593..f9cef0091 100644 --- a/src/components/Assets/index.tsx +++ b/src/components/Assets/index.tsx @@ -77,6 +77,7 @@ export const Assets = (props: AssetsProps) => { null ); const [data, setData] = useState(); + const [lastSetDataTimeStamp, setLastSetDataTimeStamp] = useState(); const theme = useTheme(); const noDataIconColor = getNoDataIconColor(theme); @@ -85,28 +86,31 @@ export const Assets = (props: AssetsProps) => { action: actions.GET_DATA }); - let getDataTimeout: number; - - const handleAssetsData = (data: unknown) => { + const handleAssetsData = (data: unknown, timeStamp: number) => { const entries = (data as AssetsData | null)?.serviceAssetsEntries; setData(entries ? groupEntries(entries) : undefined); - - getDataTimeout = window.setTimeout(() => { - window.sendMessageToDigma({ - action: actions.GET_DATA - }); - }, REFRESH_INTERVAL); + setLastSetDataTimeStamp(timeStamp); }; dispatcher.addActionListener(actions.SET_DATA, handleAssetsData); return () => { - clearTimeout(getDataTimeout); - dispatcher.removeActionListener(actions.SET_DATA, handleAssetsData); }; }, []); + useEffect(() => { + const timerId = window.setTimeout(() => { + window.sendMessageToDigma({ + action: actions.GET_DATA + }); + }, REFRESH_INTERVAL); + + return () => { + window.clearTimeout(timerId); + }; + }, [lastSetDataTimeStamp]); + useEffect(() => { if (!props.data) { return; diff --git a/src/components/common/App/index.tsx b/src/components/common/App/index.tsx index 67db468f1..cf6e5d32e 100644 --- a/src/components/common/App/index.tsx +++ b/src/components/common/App/index.tsx @@ -44,18 +44,6 @@ export const App = (props: AppProps) => { const [mainFont, setMainFont] = useState(defaultMainFont); const [codeFont, setCodeFont] = useState(defaultCodeFont); - useEffect(() => { - const handleKeyDown = (e: KeyboardEvent) => { - console.debug(e); - }; - - window.addEventListener("keydown", handleKeyDown); - - return () => { - window.removeEventListener("keydown", handleKeyDown); - }; - }, []); - useEffect(() => { if (!props.theme) { return; diff --git a/src/components/common/CursorFollower/index.tsx b/src/components/common/CursorFollower/index.tsx index 643597356..1dc3beeaf 100644 --- a/src/components/common/CursorFollower/index.tsx +++ b/src/components/common/CursorFollower/index.tsx @@ -8,7 +8,7 @@ export const CursorFollower = (props: { children: JSX.Element }) => { const [degree, setDegree] = useState(0); const ref = useRef(null); - const handleMove = (event: MouseEvent) => { + const handleMouseMove = (event: MouseEvent) => { if (ref.current) { const elPosition = ref.current.getBoundingClientRect(); const diffX = event.pageX - elPosition.left - elPosition.width / 2; @@ -29,10 +29,10 @@ export const CursorFollower = (props: { children: JSX.Element }) => { }; useEffect(() => { - document.addEventListener("mousemove", handleMove); + window.addEventListener("mousemove", handleMouseMove); return () => { - document.removeEventListener("mousemove", handleMove); + window.removeEventListener("mousemove", handleMouseMove); }; });