diff --git a/src/apps/dashboard/controllers/dashboard.js b/src/apps/dashboard/controllers/dashboard.js index adc062c0b..8e91a8f33 100644 --- a/src/apps/dashboard/controllers/dashboard.js +++ b/src/apps/dashboard/controllers/dashboard.js @@ -747,6 +747,9 @@ const DashboardPage = { }; export default function (view) { + const serverId = ApiClient.serverId(); + let unmountPathsWidget; + function onRestartRequired(evt, apiClient) { console.debug('onRestartRequired not implemented', evt, apiClient); } @@ -778,7 +781,6 @@ export default function (view) { } } - const serverId = ApiClient.serverId(); view.querySelector('.activeDevices').addEventListener('click', onActiveDevicesClick); view.addEventListener('viewshow', function () { const page = this; @@ -822,7 +824,7 @@ export default function (view) { button: page.querySelector('.btnRefresh') }); - renderComponent(ServerPathWidget, {}, page.querySelector('#serverPaths')); + unmountPathsWidget = renderComponent(ServerPathWidget, {}, page.querySelector('#serverPaths')); page.querySelector('#btnRestartServer').addEventListener('click', DashboardPage.restart); page.querySelector('#btnShutdown').addEventListener('click', DashboardPage.shutdown); @@ -850,6 +852,8 @@ export default function (view) { button: page.querySelector('.btnRefresh') }); + if (unmountPathsWidget) unmountPathsWidget(); + page.querySelector('#btnRestartServer').removeEventListener('click', DashboardPage.restart); page.querySelector('#btnShutdown').removeEventListener('click', DashboardPage.shutdown); }); diff --git a/src/apps/dashboard/features/storage/components/StorageListItem.tsx b/src/apps/dashboard/features/storage/components/StorageListItem.tsx index b93696f39..9628de615 100644 --- a/src/apps/dashboard/features/storage/components/StorageListItem.tsx +++ b/src/apps/dashboard/features/storage/components/StorageListItem.tsx @@ -22,13 +22,13 @@ interface StorageListItemProps { const calculateUsed = (folder?: FolderStorageDto) => { if (typeof folder?.UsedSpace === 'undefined') return 0; if (typeof folder.FreeSpace === 'undefined') return 100; - + const totalSpace = folder.FreeSpace + folder.UsedSpace; if (totalSpace === 0) return 0; - + // Ensure we don't have negative values const usedSpace = Math.max(0, folder.UsedSpace); - + return Math.min(100, (usedSpace / totalSpace) * 100); }; diff --git a/src/utils/reactUtils.tsx b/src/utils/reactUtils.tsx index be4e518ec..80abdd512 100644 --- a/src/utils/reactUtils.tsx +++ b/src/utils/reactUtils.tsx @@ -14,12 +14,16 @@ export const renderComponent =

( props: P, element: HTMLElement ) => { - createRoot(element) - .render( - - - - ); + const root = createRoot(element); + root.render( + + + + ); + + // NOTE: We need to wrap the unmount in a setTimeout to workaround this issue with nested roots: + // https://github.com/facebook/react/issues/25675 + return () => setTimeout(() => root.unmount()); }; const RootContext: React.FC = ({ children }) => {