From 189a09950f7327a8a6f700c0d18010433d8900c3 Mon Sep 17 00:00:00 2001 From: Roy Li Date: Sat, 30 Nov 2024 20:22:22 +0100 Subject: [PATCH] fix: Render issue on traffic update --- .../useTrafficUpdater/useTrafficUpdater.ts | 102 +++++++++--------- .../components/DeviceSettingsModal.tsx | 6 +- src/pages/Home/components/SetHostModal.tsx | 6 +- src/router/router.tsx | 2 +- yarn.lock | 12 +-- 5 files changed, 62 insertions(+), 66 deletions(-) diff --git a/src/hooks/useTrafficUpdater/useTrafficUpdater.ts b/src/hooks/useTrafficUpdater/useTrafficUpdater.ts index 802e0c9..1c0368d 100644 --- a/src/hooks/useTrafficUpdater/useTrafficUpdater.ts +++ b/src/hooks/useTrafficUpdater/useTrafficUpdater.ts @@ -1,7 +1,6 @@ import { useEffect } from 'react' import { useLocation } from 'react-router-dom' import dayjs from 'dayjs' -import useSWR from 'swr' import { useAppDispatch, useProfile } from '@/store' import { trafficActions } from '@/store/slices/traffic' @@ -17,67 +16,64 @@ const useTrafficUpdater = () => { const isInForeground = location.pathname === '/traffic' || location.pathname === '/home' - const { data: traffic } = useSWR( - profile !== undefined ? '/traffic' : null, - (url) => - fetcher({ url }).then((res) => { - res.nowTime = Date.now() - return res - }), - { - revalidateOnFocus: false, - revalidateOnReconnect: false, - refreshWhenHidden: true, - refreshInterval: isInForeground ? REFRESH_RATE : 0, - dedupingInterval: isInForeground ? REFRESH_RATE : 0, - }, - ) useEffect(() => { - if (!traffic) return undefined + if (profile === undefined) return - const now = Date.now() + const fetchTraffic = () => { + fetcher({ url: '/traffic' }).then( + (res) => { + res.nowTime = Date.now() + dispatch(trafficActions.updateConnector(res.connector)) + dispatch(trafficActions.updateInterface(res.interface)) + dispatch( + trafficActions.updateStartTime( + dayjs.unix(res.startTime).toDate().getTime(), + ), + ) - dispatch(trafficActions.updateConnector(traffic.connector)) + const aggregation: ConnectorTraffic = { + outCurrentSpeed: 0, + in: 0, + inCurrentSpeed: 0, + outMaxSpeed: 0, + out: 0, + inMaxSpeed: 0, + } - dispatch(trafficActions.updateInterface(traffic.interface)) + for (const name in res.interface) { + const conn = res.interface[name] + aggregation.in += conn.in + aggregation.out += conn.out + aggregation.outCurrentSpeed += conn.outCurrentSpeed + aggregation.inCurrentSpeed += conn.inCurrentSpeed + } - dispatch( - trafficActions.updateStartTime( - dayjs.unix(traffic.startTime).toDate().getTime(), - ), - ) - - const aggregation: ConnectorTraffic = { - outCurrentSpeed: 0, - in: 0, - inCurrentSpeed: 0, - outMaxSpeed: 0, - out: 0, - inMaxSpeed: 0, + const now = Date.now() + dispatch( + trafficActions.updateHistory({ + up: { + x: now, + y: aggregation.outCurrentSpeed, + }, + down: { + x: now, + y: aggregation.inCurrentSpeed, + }, + }), + ) + }, + ) } - for (const name in traffic.interface) { - const conn = traffic.interface[name] - aggregation.in += conn.in - aggregation.out += conn.out - aggregation.outCurrentSpeed += conn.outCurrentSpeed - aggregation.inCurrentSpeed += conn.inCurrentSpeed - } + const intervalId = setInterval(() => { + if (isInForeground) { + fetchTraffic() + } + }, REFRESH_RATE) - dispatch( - trafficActions.updateHistory({ - up: { - x: now, - y: aggregation.outCurrentSpeed, - }, - down: { - x: now, - y: aggregation.inCurrentSpeed, - }, - }), - ) - }, [dispatch, traffic]) + return () => clearInterval(intervalId) + }, [dispatch, profile, isInForeground]) return undefined } diff --git a/src/pages/Devices/components/DeviceSettingsModal.tsx b/src/pages/Devices/components/DeviceSettingsModal.tsx index 52dc3fb..73b1f04 100644 --- a/src/pages/Devices/components/DeviceSettingsModal.tsx +++ b/src/pages/Devices/components/DeviceSettingsModal.tsx @@ -191,9 +191,6 @@ const DeviceSettingsModal = ({ /> - - - + + + diff --git a/src/pages/Home/components/SetHostModal.tsx b/src/pages/Home/components/SetHostModal.tsx index 440827e..0505e0a 100644 --- a/src/pages/Home/components/SetHostModal.tsx +++ b/src/pages/Home/components/SetHostModal.tsx @@ -101,14 +101,14 @@ const SetHostModal: React.FC = () => { + - diff --git a/src/router/router.tsx b/src/router/router.tsx index b34a2ea..ac108bf 100644 --- a/src/router/router.tsx +++ b/src/router/router.tsx @@ -7,7 +7,7 @@ import { import App from '@/App' import AppContainer from '@/AppContainer' -import ErrorBoundary from '@/components/ErrorBoundary' +import { ErrorBoundary } from '@/components/ErrorBoundary' import { RouterContext } from './context' diff --git a/yarn.lock b/yarn.lock index 8f9687e..a3adbf3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3590,12 +3590,12 @@ dependencies: undici-types "~5.26.4" -"@types/node@^22": - version "22.9.4" - resolved "https://registry.yarnpkg.com/@types/node/-/node-22.9.4.tgz#31eefcdbe163a51f53cbfbb3e121b8ae9b16fdb2" - integrity sha512-d9RWfoR7JC/87vj7n+PVTzGg9hDyuFjir3RxUHbjFSKNd9mpxbxwMEyaCim/ddCmy4IuW7HjTzF3g9p3EtWEOg== +"@types/node@^20": + version "20.17.9" + resolved "https://registry.yarnpkg.com/@types/node/-/node-20.17.9.tgz#5f141d4b7ee125cdee5faefe28de095398865bab" + integrity sha512-0JOXkRyLanfGPE2QRCwgxhzlBAvaRdCNMcvbd7jFfpmD4eEXll7LRwy5ymJmyeZqk7Nh7eD2LeUyQ68BbndmXw== dependencies: - undici-types "~6.19.8" + undici-types "~6.19.2" "@types/normalize-package-data@^2.4.0": version "2.4.4" @@ -13398,7 +13398,7 @@ undici-types@~5.26.4: resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617" integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA== -undici-types@~6.19.8: +undici-types@~6.19.2, undici-types@~6.19.8: version "6.19.8" resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.19.8.tgz#35111c9d1437ab83a7cdc0abae2f26d88eda0a02" integrity sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==