Merge branch 'develop' into feature/react-admin

resources/scripts/components/dashboard/AccountOverviewContainer.tsx

@@ -27,7 +27,7 @@ const Container = styled.div`
 `;
 
 export default () => {
-    const state = useLocation<{ twoFactorRedirect: boolean }>().state;
+    const { state } = useLocation<undefined | { twoFactorRedirect?: boolean }>();
 
     return (
         <PageContentBlock title={'Account Overview'}>

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/components/dashboard/ServerRow.tsx

@@ -59,7 +59,7 @@ export default ({ server, className }: { server: Server; className?: string }) =
 
         getStats().then(() => {
             // @ts-ignore
-            interval.current = setInterval(() => getStats(), 20000);
+            interval.current = setInterval(() => getStats(), 30000);
         });
 
         return () => {

resources/scripts/components/dashboard/forms/SetupTwoFactorModal.tsx

@@ -78,7 +78,7 @@ export default ({ onDismissed, ...props }: RequiredModalProps) => {
                             <h2 css={tw`text-2xl mb-4`}>Two-factor authentication enabled</h2>
                             <p css={tw`text-neutral-300`}>
                                 Two-factor authentication has been enabled on your account. Should you loose access to
-                                this device you&apos;ll need to use on of the codes displayed below in order to access your
+                                this device you&apos;ll need to use one of the codes displayed below in order to access your
                                 account.
                             </p>
                             <p css={tw`text-neutral-300 mt-4`}>