From 694c1c3b56a346d9356c152f9613570dc689b305 Mon Sep 17 00:00:00 2001 From: Jerry Hogan Date: Fri, 18 Aug 2023 16:22:47 +0100 Subject: [PATCH] Cra rxjs issue pagination fix (#1938) * chore: pagination for issues, fix render issue with React pagination component * chore: removed comments --- .../pr-issue-tab/IssuePRTabHeader.tsx | 11 ++--- .../pull-request/PullRequest.data.tsx | 18 ++++---- .../pull-request/PullRequest.view.tsx | 1 + .../components/repo-issues/Issues/Issues.tsx | 32 +++++++++----- .../repo-issues/Issues/Issues.view.tsx | 44 ++++++++++++++++--- .../src/routes/repo/repository-issues.tsx | 4 +- 6 files changed, 75 insertions(+), 35 deletions(-) diff --git a/cra-rxjs-styled-components/src/components/pr-issue-tab/IssuePRTabHeader.tsx b/cra-rxjs-styled-components/src/components/pr-issue-tab/IssuePRTabHeader.tsx index 7b13de56c..1c4614f2d 100644 --- a/cra-rxjs-styled-components/src/components/pr-issue-tab/IssuePRTabHeader.tsx +++ b/cra-rxjs-styled-components/src/components/pr-issue-tab/IssuePRTabHeader.tsx @@ -1,5 +1,3 @@ -import { useState } from 'react'; - import { Container, StatusLabel, StatusTab } from './IssuePRTabHeader.styles'; import { useRepo } from '../../context/RepoContext'; import FilterDropdown from '../filter-dropdown/FilterDropdown'; @@ -8,15 +6,16 @@ import OpenIssueIcon from '../icons/OpenIssueIcon'; import { SORT_OPTIONS } from '../../constants/data'; import PullRequestIcon from '../icons/PullRequestIcon'; +export type IssuePRTabValues = 'open' | 'close'; + interface Props { toggleTab: any; closedCount: number; openCount: number; type: 'issue' | 'pr'; + activeTab: IssuePRTabValues; } -export type IssuePRTabValues = 'open' | 'close'; - export default function IssuePRTabHeader(props: Props) { const { labels, @@ -28,12 +27,10 @@ export default function IssuePRTabHeader(props: Props) { setMilestone, setSortBy, } = useRepo(); - const [activeTab, setActiveTab] = useState('open'); - const { toggleTab, closedCount, openCount, type } = props; + const { toggleTab, closedCount, openCount, type, activeTab } = props; const changeTab = (value: IssuePRTabValues) => { toggleTab(value); - setActiveTab(value); }; const sortOptions = Object.values(SORT_OPTIONS); diff --git a/cra-rxjs-styled-components/src/components/pull-request/pull-request/PullRequest.data.tsx b/cra-rxjs-styled-components/src/components/pull-request/pull-request/PullRequest.data.tsx index 275717222..110851322 100644 --- a/cra-rxjs-styled-components/src/components/pull-request/pull-request/PullRequest.data.tsx +++ b/cra-rxjs-styled-components/src/components/pull-request/pull-request/PullRequest.data.tsx @@ -15,13 +15,15 @@ export default function PullRequestCtrl() { const PRS = activeTab === 'open' ? open.items : closed.items; return ( - +
+ +
); } diff --git a/cra-rxjs-styled-components/src/components/pull-request/pull-request/PullRequest.view.tsx b/cra-rxjs-styled-components/src/components/pull-request/pull-request/PullRequest.view.tsx index 4c2b7c1cd..f5f3304e0 100644 --- a/cra-rxjs-styled-components/src/components/pull-request/pull-request/PullRequest.view.tsx +++ b/cra-rxjs-styled-components/src/components/pull-request/pull-request/PullRequest.view.tsx @@ -52,6 +52,7 @@ export default function PullRequestView({ openCount={openPRCount} toggleTab={changeActiveTab} type="pr" + activeTab={activeTab} /> {(pullRequests || []).map((pr, index) => ( ('open'); + const setPRPage = activeTab === 'open' ? setOpenPRPage : setClosedPRPage; -export default function IssueCtrl({ issues }: IssuesProps) { - const [activeTab, setActiveTab] = useState('open'); + const issues = activeTab === 'open' ? open.items : closed.items; return ( - +
+ +
); } diff --git a/cra-rxjs-styled-components/src/components/repo-issues/Issues/Issues.view.tsx b/cra-rxjs-styled-components/src/components/repo-issues/Issues/Issues.view.tsx index 656a8459d..6caf0c362 100644 --- a/cra-rxjs-styled-components/src/components/repo-issues/Issues/Issues.view.tsx +++ b/cra-rxjs-styled-components/src/components/repo-issues/Issues/Issues.view.tsx @@ -1,25 +1,41 @@ import IssueCard from '../issue-card/IssueCard'; import { Content, Wrapper } from './Issues.view.styles'; import type { Issue } from './Issue.type'; -import { IssueTabValues } from '../../../types/types'; -import Pagination from '../../pagination/Pagination'; -import IssuePRTabHeader from '../../../components/pr-issue-tab/IssuePRTabHeader'; +import IssuePRTabHeader, { + IssuePRTabValues, +} from '../../../components/pr-issue-tab/IssuePRTabHeader'; +import { PaginationContainer } from '../../../components/pull-request/pull-request/PullRequest.style'; +import ReactPaginate from 'react-paginate'; +import { PULLS_PER_PAGE } from '../../../constants/url.constants'; import { useRepo } from '../../../context/RepoContext'; import ClearFilterAndSortButtonText from '../../../components/clear-filter-and-sort-button/ClearFilterAndSortButtonText'; type IssueProps = { issues: Issue[]; - changeActiveTab: (value: IssueTabValues) => void; + changeActiveTab: (value: IssuePRTabValues) => void; closedCount: number; openCount: number; + activeTab: IssuePRTabValues; + setPRPage: (value: number) => void; }; export default function IssueView({ issues, closedCount, openCount, + activeTab, changeActiveTab, + setPRPage, }: IssueProps) { + const totalPRsCount = activeTab === 'open' ? openCount : closedCount; + const pageCount = Math.ceil(totalPRsCount / PULLS_PER_PAGE); + + // Invoke when user click to request another page. + const handlePageClick = (event: { selected: number }) => { + const page = event.selected + 1; + setPRPage(page); + window.scrollTo({ top: 0, behavior: 'smooth' }); + }; const { resetFilterValues, isFilteredOrSorted } = useRepo(); return ( @@ -36,13 +52,31 @@ export default function IssueView({ toggleTab={changeActiveTab} closedCount={closedCount} openCount={openCount} + activeTab={activeTab} type="issue" /> {(issues || []).map((issue, index) => ( ))} - + + null} + containerClassName={'pagination'} + pageClassName={'pagination__item'} + previousClassName={'pagination__link_end'} + nextClassName={'pagination__link_end'} + disabledClassName={'pagination__link--disabled'} + activeClassName={'pagination__link--active'} + /> + ); } diff --git a/cra-rxjs-styled-components/src/routes/repo/repository-issues.tsx b/cra-rxjs-styled-components/src/routes/repo/repository-issues.tsx index d4c2283e5..c0f7d5f3b 100644 --- a/cra-rxjs-styled-components/src/routes/repo/repository-issues.tsx +++ b/cra-rxjs-styled-components/src/routes/repo/repository-issues.tsx @@ -1,7 +1,5 @@ -import useIssuesPRs from '../../hooks/useIssuesPRs'; import IssueCtrl from '../../components/repo-issues/Issues/Issues'; export default function RepoIssues() { - const { open, closed } = useIssuesPRs({ searchType: 'issue', type: 'issues' }); - return ; + return ; }