diff --git a/packages/ui/src/app/pages/Forum/ForumCategory.tsx b/packages/ui/src/app/pages/Forum/ForumCategory.tsx index 29e537c290..75caf6efd9 100644 --- a/packages/ui/src/app/pages/Forum/ForumCategory.tsx +++ b/packages/ui/src/app/pages/Forum/ForumCategory.tsx @@ -22,13 +22,14 @@ import { ThreadFilters } from '@/forum/components/threads/ThreadFilters' import { ThreadList } from '@/forum/components/threads/ThreadList' import { THREADS_PER_PAGE } from '@/forum/constant' import { useForumCategory } from '@/forum/hooks/useForumCategory' +import { useForumCategoryThreadPage } from '@/forum/hooks/useForumCategoryThreadPage' import { useForumCategoryThreads } from '@/forum/hooks/useForumCategoryThreads' import { MemberStack, moderatorsSummary } from '@/memberships/components/MemberStack' import { ForumPageLayout } from './components/ForumPageLayout' export const ForumCategory = () => { - const [page, setPage] = useState(1) + const [page, setPage] = useState(useForumCategoryThreadPage()) const { id, type } = useParams<{ id: string; type?: 'archive' }>() const isArchive = type === 'archive' diff --git a/packages/ui/src/common/components/Pagination/Pagination.tsx b/packages/ui/src/common/components/Pagination/Pagination.tsx index feb5d4cc28..5b47873796 100644 --- a/packages/ui/src/common/components/Pagination/Pagination.tsx +++ b/packages/ui/src/common/components/Pagination/Pagination.tsx @@ -1,5 +1,6 @@ import React, { FC } from 'react' import ReactPaginate from 'react-paginate' +import { useHistory } from 'react-router' import styled from 'styled-components' import { Arrow } from '@/common/components/icons' @@ -12,9 +13,15 @@ interface PaginationProps { } export const Pagination: FC = ({ pageCount = 0, handlePageChange, page }) => { + const history = useHistory() + if (pageCount < 2) { return null } + const pageChangeAction = (value: any) => { + history.push(`?page=${value.selected + 1}`) + handlePageChange(value.selected + 1) + } return ( @@ -32,7 +39,7 @@ export const Pagination: FC = ({ pageCount = 0, handlePageChang nextLabel={} nextLinkClassName="pagination__link" previousLinkClassName="pagination__link pagination__link--previous" - onPageChange={(value) => handlePageChange(value.selected + 1)} + onPageChange={(value) => pageChangeAction(value)} forcePage={page && page - 1} /> diff --git a/packages/ui/src/forum/hooks/useForumCategoryThreadPage.ts b/packages/ui/src/forum/hooks/useForumCategoryThreadPage.ts new file mode 100644 index 0000000000..6e22ee8832 --- /dev/null +++ b/packages/ui/src/forum/hooks/useForumCategoryThreadPage.ts @@ -0,0 +1,6 @@ +export const useForumCategoryThreadPage = () => { + const locationHash = window.location.hash + const queryString = locationHash.substring(locationHash.indexOf('?')) + const urlParams = new URLSearchParams(queryString) + return Number(urlParams.get('page')) || 1 +}