From c3782adcb92f65d7f61777c89cc5d064d9d65740 Mon Sep 17 00:00:00 2001 From: Victor Date: Mon, 6 Feb 2023 20:15:56 +0000 Subject: [PATCH 1/5] Fixed pagination back link using a custom hook --- packages/ui/src/app/pages/Forum/ForumCategory.tsx | 3 ++- .../ui/src/common/components/Pagination/Pagination.tsx | 9 ++++++++- packages/ui/src/forum/constant/pagination.ts | 2 +- .../ui/src/forum/hooks/useForumCategoryThreadPage.ts | 10 ++++++++++ 4 files changed, 21 insertions(+), 3 deletions(-) create mode 100644 packages/ui/src/forum/hooks/useForumCategoryThreadPage.ts 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/constant/pagination.ts b/packages/ui/src/forum/constant/pagination.ts index bf276bd808..529c176a44 100644 --- a/packages/ui/src/forum/constant/pagination.ts +++ b/packages/ui/src/forum/constant/pagination.ts @@ -1 +1 @@ -export const THREADS_PER_PAGE = 30 +export const THREADS_PER_PAGE = 10 diff --git a/packages/ui/src/forum/hooks/useForumCategoryThreadPage.ts b/packages/ui/src/forum/hooks/useForumCategoryThreadPage.ts new file mode 100644 index 0000000000..bcf4b3ac60 --- /dev/null +++ b/packages/ui/src/forum/hooks/useForumCategoryThreadPage.ts @@ -0,0 +1,10 @@ +export const useForumCategoryThreadPage = () => { + const locationHash = window.location.hash + const queryString = locationHash.substring(locationHash.indexOf('?')) + const urlParams = new URLSearchParams(queryString) + if (urlParams.has('page')) { + const num = Number(urlParams.get('page')) || 1 + return num + } + return 1 +} From 2bd722a01b8539a55c3a2309aae052904ca4b240 Mon Sep 17 00:00:00 2001 From: Victor Date: Thu, 9 Feb 2023 22:55:33 +0000 Subject: [PATCH 2/5] Set back to default --- packages/ui/src/forum/constant/pagination.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/src/forum/constant/pagination.ts b/packages/ui/src/forum/constant/pagination.ts index 529c176a44..bf276bd808 100644 --- a/packages/ui/src/forum/constant/pagination.ts +++ b/packages/ui/src/forum/constant/pagination.ts @@ -1 +1 @@ -export const THREADS_PER_PAGE = 10 +export const THREADS_PER_PAGE = 30 From 7d0f49a07c620d991c7e28fcd9eb0b9d4b1e871a Mon Sep 17 00:00:00 2001 From: Victor Date: Thu, 9 Feb 2023 22:57:08 +0000 Subject: [PATCH 3/5] refactored custom hook --- packages/ui/src/forum/hooks/useForumCategoryThreadPage.ts | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/ui/src/forum/hooks/useForumCategoryThreadPage.ts b/packages/ui/src/forum/hooks/useForumCategoryThreadPage.ts index bcf4b3ac60..6e22ee8832 100644 --- a/packages/ui/src/forum/hooks/useForumCategoryThreadPage.ts +++ b/packages/ui/src/forum/hooks/useForumCategoryThreadPage.ts @@ -2,9 +2,5 @@ export const useForumCategoryThreadPage = () => { const locationHash = window.location.hash const queryString = locationHash.substring(locationHash.indexOf('?')) const urlParams = new URLSearchParams(queryString) - if (urlParams.has('page')) { - const num = Number(urlParams.get('page')) || 1 - return num - } - return 1 + return Number(urlParams.get('page')) || 1 } From f15041e1c30bb1c3e6c4c3b397c133d3c5a4ae42 Mon Sep 17 00:00:00 2001 From: Victor Date: Mon, 13 Feb 2023 06:48:14 +0000 Subject: [PATCH 4/5] Thread redirect when page exceeds count --- packages/ui/src/forum/components/PostList/PostList.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/ui/src/forum/components/PostList/PostList.tsx b/packages/ui/src/forum/components/PostList/PostList.tsx index 258eae5441..0fdfd5a8f9 100644 --- a/packages/ui/src/forum/components/PostList/PostList.tsx +++ b/packages/ui/src/forum/components/PostList/PostList.tsx @@ -35,6 +35,9 @@ export const PostList = ({ threadId, isThreadActive, isLoading, isDiscussion }: (page: number) => history.replace({ pathname, search: page > 1 ? `page=${page}` : '' }), [] ) + useMemo(() => { + if(isReady && !posts.length) history.replace({pathname, search: ''}); + },[isReady, posts]) const postsRefs: AnyKeys = {} const getInsertRef = (postId: string) => (ref: RefObject) => (postsRefs[postId] = ref) From 297c367d33f2d99d4a7036d5786f94ef42d6dffd Mon Sep 17 00:00:00 2001 From: Victor Emmanuel <33874323+vrrayz@users.noreply.github.com> Date: Fri, 3 Mar 2023 18:25:03 +0100 Subject: [PATCH 5/5] Removed extra changes --- packages/ui/src/forum/components/PostList/PostList.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/ui/src/forum/components/PostList/PostList.tsx b/packages/ui/src/forum/components/PostList/PostList.tsx index 0fdfd5a8f9..258eae5441 100644 --- a/packages/ui/src/forum/components/PostList/PostList.tsx +++ b/packages/ui/src/forum/components/PostList/PostList.tsx @@ -35,9 +35,6 @@ export const PostList = ({ threadId, isThreadActive, isLoading, isDiscussion }: (page: number) => history.replace({ pathname, search: page > 1 ? `page=${page}` : '' }), [] ) - useMemo(() => { - if(isReady && !posts.length) history.replace({pathname, search: ''}); - },[isReady, posts]) const postsRefs: AnyKeys = {} const getInsertRef = (postId: string) => (ref: RefObject) => (postsRefs[postId] = ref)