Set the current page in the dashboard URL to allow easy refreshing; closes #2993

resources/scripts/components/dashboard/AccountOverviewContainer.tsx

@@ -7,8 +7,8 @@ import PageContentBlock from '@/components/elements/PageContentBlock';
 import tw from 'twin.macro';
 import { breakpoint } from '@/theme';
 import styled from 'styled-components/macro';
-import { RouteComponentProps } from 'react-router';
 import MessageBox from '@/components/MessageBox';
+import { useLocation } from 'react-router-dom';
 
 const Container = styled.div`
     ${tw`flex flex-wrap`};
@@ -26,7 +26,9 @@ const Container = styled.div`
     }
 `;
 
-export default ({ location: { state } }: RouteComponentProps) => {
+export default () => {
+    const { state } = useLocation<undefined | { twoFactorRedirect?: boolean }>();
+
     return (
         <PageContentBlock title={'Account Overview'}>
             {state?.twoFactorRedirect &&

resources/scripts/components/dashboard/DashboardContainer.tsx

@@ -12,10 +12,14 @@ import tw from 'twin.macro';
 import useSWR from 'swr';
 import { PaginatedResult } from '@/api/http';
 import Pagination from '@/components/elements/Pagination';
+import { useLocation } from 'react-router-dom';
 
 export default () => {
+    const { search } = useLocation();
+    const defaultPage = Number(new URLSearchParams(search).get('page') || '1');
+
+    const [ page, setPage ] = useState((!isNaN(defaultPage) && defaultPage > 0) ? defaultPage : 1);
     const { clearFlashes, clearAndAddHttpError } = useFlash();
-    const [ page, setPage ] = useState(1);
     const uuid = useStoreState(state => state.user.data!.uuid);
     const rootAdmin = useStoreState(state => state.user.data!.rootAdmin);
     const [ showOnlyAdmin, setShowOnlyAdmin ] = usePersistedState(`${uuid}:show_all_servers`, false);
@@ -25,6 +29,20 @@ export default () => {
         () => getServers({ page, type: showOnlyAdmin ? 'admin' : undefined }),
     );
 
+    useEffect(() => {
+        if (!servers) return;
+        if (servers.pagination.currentPage > 1 && !servers.items.length) {
+            setPage(1);
+        }
+    }, [ servers?.pagination.currentPage ]);
+
+    useEffect(() => {
+        // Don't use react-router to handle changing this part of the URL, otherwise it
+        // triggers a needless re-render. We just want to track this in the URL incase the
+        // user refreshes the page.
+        window.history.replaceState(null, document.title, `/${page <= 1 ? '' : `?page=${page}`}`);
+    }, [ page ]);
+
     useEffect(() => {
         if (error) clearAndAddHttpError({ key: 'dashboard', error });
         if (!error) clearFlashes('dashboard');

resources/scripts/routers/DashboardRouter.tsx

@@ -21,10 +21,18 @@ export default ({ location }: RouteComponentProps) => (
         }
         <TransitionRouter>
             <Switch location={location}>
-                <Route path={'/'} component={DashboardContainer} exact/>
+                <Route path={'/'} exact>
-                <Route path={'/account'} component={AccountOverviewContainer} exact/>
+                    <DashboardContainer/>
-                <Route path={'/account/api'} component={AccountApiContainer} exact/>
+                </Route>
-                <Route path={'*'} component={NotFound}/>
+                <Route path={'/account'} exact>
+                    <AccountOverviewContainer/>
+                </Route>
+                <Route path={'/account/api'} exact>
+                    <AccountApiContainer/>
+                </Route>
+                <Route path={'*'}>
+                    <NotFound/>
+                </Route>
             </Switch>
         </TransitionRouter>
     </>