Cra rxjs issue pagination fix (#1938)

* chore: pagination for issues, fix render issue with React pagination component

* chore: removed comments

Author: hdJerry

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<IssuePRTabValues>('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);

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 (
-		<PullRequestView
-			pullRequests={PRS}
-			openPRCount={open.total_count}
-			closedPRCount={closed.total_count}
-			activeTab={activeTab}
-			changeActiveTab={setActiveTab}
-			setPRPage={setPRPage}
-		/>
+		<div key={activeTab}>
+			<PullRequestView
+				pullRequests={PRS}
+				openPRCount={open.total_count}
+				closedPRCount={closed.total_count}
+				activeTab={activeTab}
+				changeActiveTab={setActiveTab}
+				setPRPage={setPRPage}
+			/>
+		</div>
 	);
 }

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) => (
 					<PullRequestCard

cra-rxjs-styled-components/src/components/repo-issues/Issues/Issues.tsx

@@ -1,19 +1,27 @@
 import { useState } from 'react';
 import IssueView from './Issues.view';
-import type { IssueTabValues, IssueTypes } from '../../../types/types';
+import useIssuesPRs from '../../../hooks/useIssuesPRs';
+import { IssuePRTabValues } from '../../../components/pr-issue-tab/IssuePRTabHeader';
 
-type IssuesProps = {
-	issues: IssueTypes;
-};
+export default function IssueCtrl() {
+	const { open, closed, setClosedPRPage, setOpenPRPage } = useIssuesPRs({
+		searchType: 'issue',
+		type: 'issues',
+	});
+	const [activeTab, setActiveTab] = useState<IssuePRTabValues>('open');
+	const setPRPage = activeTab === 'open' ? setOpenPRPage : setClosedPRPage;
 
-export default function IssueCtrl({ issues }: IssuesProps) {
-	const [activeTab, setActiveTab] = useState<IssueTabValues>('open');
+	const issues = activeTab === 'open' ? open.items : closed.items;
 	return (
-		<IssueView
-			issues={issues[activeTab].items}
-			closedCount={issues?.closed.total_count!}
-			openCount={issues?.open.total_count!}
-			changeActiveTab={setActiveTab}
-		/>
+		<div key={activeTab}>
+			<IssueView
+				issues={issues}
+				closedCount={closed.total_count}
+				openCount={open.total_count}
+				activeTab={activeTab}
+				changeActiveTab={setActiveTab}
+				setPRPage={setPRPage}
+			/>
+		</div>
 	);
 }

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) => (
 					<IssueCard issue={issue} key={index} />
 				))}
 			</Content>
-			<Pagination />
+			<PaginationContainer>
+				<ReactPaginate
+					breakLabel="..."
+					nextLabel="Next >"
+					marginPagesDisplayed={1}
+					onPageChange={handlePageClick}
+					pageRangeDisplayed={7}
+					pageCount={pageCount}
+					previousLabel="< Previous"
+					renderOnZeroPageCount={() => null}
+					containerClassName={'pagination'}
+					pageClassName={'pagination__item'}
+					previousClassName={'pagination__link_end'}
+					nextClassName={'pagination__link_end'}
+					disabledClassName={'pagination__link--disabled'}
+					activeClassName={'pagination__link--active'}
+				/>
+			</PaginationContainer>
 		</Wrapper>
 	);
 }

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 <IssueCtrl issues={{ open, closed }} />;
+	return <IssueCtrl />;
 }