diff --git a/resources/scripts/components/dashboard/AccountOverviewContainer.tsx b/resources/scripts/components/dashboard/AccountOverviewContainer.tsx index 47161f793..f8cea7111 100644 --- a/resources/scripts/components/dashboard/AccountOverviewContainer.tsx +++ b/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(); + return ( {state?.twoFactorRedirect && diff --git a/resources/scripts/components/dashboard/DashboardContainer.tsx b/resources/scripts/components/dashboard/DashboardContainer.tsx index 72357fd65..c04ca0820 100644 --- a/resources/scripts/components/dashboard/DashboardContainer.tsx +++ b/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'); diff --git a/resources/scripts/routers/DashboardRouter.tsx b/resources/scripts/routers/DashboardRouter.tsx index 933327b53..513cc3fa8 100644 --- a/resources/scripts/routers/DashboardRouter.tsx +++ b/resources/scripts/routers/DashboardRouter.tsx @@ -21,10 +21,18 @@ export default ({ location }: RouteComponentProps) => ( } - - - - + + + + + + + + + + + +