Skip to content

Commit a28685d

Browse files
darkhorse-420darkhorse-420
committed
feat: pagination component
added it to repository as well
1 parent dc620f7 commit a28685d

File tree

4 files changed

+179
-94
lines changed

4 files changed

+179
-94
lines changed

‎src/ui/components/Pagination/Pagination.css

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
.paginationContainer {
2+
display: flex;
3+
justify-content: center;
4+
padding: 1rem;
5+
margin-top: 20px;
6+
gap: 10px;
7+
}
8+
9+
.pageButton {
10+
padding: 8px 12px;
11+
font-size: 14px;
12+
color: #333;
13+
border: 1px solid #ccc;
14+
background-color: #f9f9f9;
15+
cursor: pointer;
16+
border-radius: 5px;
17+
transition: background-color 0.3s ease;
18+
}
19+
20+
.pageButton:hover {
21+
background-color: #e2e6ea;
22+
}
23+
24+
.activeButton {
25+
background-color: #007bff;
26+
color: #fff;
27+
border-color: #007bff;
28+
}

‎src/ui/components/Pagination/Pagination.jsx

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from 'react';
2+
3+
4+
export default function Pagination({ currentPage, totalItems = 0, itemsPerPage, onPageChange }) {
5+
// Calculate the total number of pages
6+
const totalPages = Math.ceil(totalItems / itemsPerPage);
7+
8+
const handlePageClick = (page) => {
9+
if (page >= 1 && page <= totalPages) {
10+
onPageChange(page);
11+
}
12+
};
13+
14+
return (
15+
<div className='paginationContainer'>
16+
<button
17+
className='pageButton'
18+
onClick={() => handlePageClick(currentPage - 1)}
19+
disabled={currentPage === 1}
20+
>
21+
Previous
22+
</button>
23+
24+
<span>
25+
Page {currentPage} of {totalPages}
26+
</span>
27+
28+
<button
29+
className='pageButton'
30+
onClick={() => handlePageClick(currentPage + 1)}
31+
disabled={currentPage === totalPages}
32+
>
33+
Next
34+
</button>
35+
</div>
36+
);
37+
}

‎src/ui/views/RepoList/Components/RepoOverview.jsx

Lines changed: 113 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
import React, { useEffect } from 'react';
1+
import React, { useState } from 'react';
22
import TableCell from '@material-ui/core/TableCell';
33
import TableRow from '@material-ui/core/TableRow';
44
import GridContainer from '../../../components/Grid/GridContainer';
55
import GridItem from '../../../components/Grid/GridItem';
66
import { CodeReviewIcon, LawIcon, PeopleIcon } from '@primer/octicons-react';
77

8+
89
const colors = {
910
'1C Enterprise': '#814CCC',
1011
'2-Dimensional Array': '#38761D',
@@ -565,110 +566,128 @@ const colors = {
565566
Zimpl: '#d67711',
566567
};
567568

568-
import axios from 'axios';
569+
// import axios from 'axios';
569570
import moment from 'moment';
570571
import CodeActionButton from '../../../components/CustomButtons/CodeActionButton';
572+
import Pagination from '../../../components/Pagination/Pagination';
571573

572574
export default function Repositories(props) {
573-
const [github, setGitHub] = React.useState({});
575+
// const [github, setGitHub] = React.useState({});
576+
// const [repositories, setRepositories] = useState([]); // To hold all repositories
577+
const [currentPage, setCurrentPage] = useState(1);
578+
const itemsPerPage = 5;
579+
580+
581+
// Dummy repository data
582+
const dummyRepositories = [
583+
{ project: 'Org1', name: 'Repo1', description: 'Description for Repo 1' },
584+
{ project: 'Org2', name: 'Repo2', description: 'Description for Repo 2' },
585+
{ project: 'Org3', name: 'Repo3', description: 'Description for Repo 3' },
586+
{ project: 'Org4', name: 'Repo4', description: 'Description for Repo 4' },
587+
{ project: 'Org5', name: 'Repo5', description: 'Description for Repo 5' },
588+
{ project: 'Org6', name: 'Repo6', description: 'Description for Repo 6' },
589+
// Add more dummy repositories as needed
590+
];
591+
574592

575-
useEffect(() => {
576-
getGitHubRepository();
577-
}, [props.data.project, props.data.name]);
593+
// useEffect(() => {
594+
// getGitHubRepository();
595+
// }, [props.data.project, props.data.name]);
578596

579-
const getGitHubRepository = async () => {
580-
await axios
581-
.get(`https://api.github.com/repos/${props.data.project}/${props.data.name}`)
582-
.then((res) => {
583-
setGitHub(res.data);
584-
});
597+
// const getGitHubRepository = async () => {
598+
// try {
599+
// const res = await axios.get(
600+
// `https://api.github.com/repos/${props.data.project}/${props.data.name}`
601+
// );
602+
// setRepositories([res.data]); // Store the single repository in an array
603+
// } catch (error) {
604+
// console.error("Failed to fetch repository", error);
605+
// }
606+
// };
607+
608+
609+
// Pagination logic to get current items for the page
610+
const indexOfLastItem = currentPage * itemsPerPage;
611+
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
612+
const currentItems = dummyRepositories.slice(indexOfFirstItem, indexOfLastItem);
613+
614+
const handlePageChange = (page) => {
615+
setCurrentPage(page);
585616
};
586617

587618
const { project: org, name } = props?.data || {};
588619
const cloneURL = `${window.location.origin.toString()}/${org}/${name}.git`;
589620

590621
return (
591-
<TableRow>
592-
<TableCell>
593-
<div style={{ padding: '15px' }}>
594-
<a href={`/admin/repo/${props.data.name}`}>
595-
<span style={{ fontSize: '17px' }}>
596-
{props.data.project}/{props.data.name}
597-
</span>
598-
</a>
599-
{github.parent && (
600-
<span
601-
style={{
602-
fontSize: '11.5px',
603-
display: 'block',
604-
opacity: 0.8,
605-
}}
606-
>
607-
Forked from{' '}
608-
<a
609-
style={{
610-
fontWeight: 'normal',
611-
color: 'inherit',
612-
}}
613-
href={github.parent.html_url}
614-
>
615-
{github.parent.full_name}
622+
<>
623+
{currentItems.map((repo, index) => (
624+
<TableRow key={index}>
625+
<TableCell>
626+
<div style={{ padding: '15px' }}>
627+
<a href={`/admin/repo/${props.data.name}`}>
628+
<span style={{ fontSize: '17px' }}>
629+
{repo.project}/{repo.name}
630+
</span>
616631
</a>
617-
</span>
618-
)}
619-
{github.description && <p style={{ maxWidth: '80%' }}>{github.description}</p>}
620-
<GridContainer>
621-
{github.language && (
622-
<GridItem>
623-
<span
624-
style={{
625-
height: '12px',
626-
width: '12px',
627-
backgroundColor: `${colors[github.language]}`,
628-
borderRadius: '50px',
629-
display: 'inline-block',
630-
marginRight: '5px',
631-
}}
632-
></span>
633-
{github.language}
634-
</GridItem>
635-
)}
636-
{github.license && (
637-
<GridItem>
638-
<LawIcon size='small' />{' '}
639-
<span style={{ marginLeft: '5px' }}>{github.license.spdx_id}</span>
640-
</GridItem>
641-
)}
642-
<GridItem>
643-
<PeopleIcon size='small' />{' '}
644-
<span style={{ marginLeft: '5px' }}>{props.data.users?.canPush?.length || 0}</span>
645-
</GridItem>
646-
<GridItem>
647-
<CodeReviewIcon size='small' />{' '}
648-
<span style={{ marginLeft: '5px' }}>
649-
{props.data.users?.canAuthorise?.length || 0}
650-
</span>
651-
</GridItem>
652-
{(github.created_at || github.updated_at || github.pushed_at) && (
653-
<GridItem>
654-
Last updated{' '}
655-
{moment
656-
.max([
657-
moment(github.created_at),
658-
moment(github.updated_at),
659-
moment(github.pushed_at),
660-
])
661-
.fromNow()}
662-
</GridItem>
663-
)}
664-
</GridContainer>
665-
</div>
666-
</TableCell>
667-
<TableCell align='right'>
668-
<div style={{ padding: '15px' }}>
669-
<CodeActionButton cloneURL={cloneURL} />
670-
</div>
671-
</TableCell>
672-
</TableRow>
632+
{repo.parent && (
633+
<span style={{ fontSize: '11.5px', display: 'block', opacity: 0.8 }}>
634+
Forked from{' '}
635+
<a style={{ fontWeight: 'normal', color: 'inherit' }} href={repo.parent.html_url}>
636+
{repo.parent.full_name}
637+
</a>
638+
</span>
639+
)}
640+
{repo.description && <p style={{ maxWidth: '80%' }}>{repo.description}</p>}
641+
<GridContainer>
642+
{repo.language && (
643+
<GridItem>
644+
<span
645+
style={{
646+
height: '12px',
647+
width: '12px',
648+
backgroundColor: `${colors[repo.language]}`,
649+
borderRadius: '50px',
650+
display: 'inline-block',
651+
marginRight: '5px',
652+
}}
653+
></span>
654+
{repo.language}
655+
</GridItem>
656+
)}
657+
{repo.license && (
658+
<GridItem>
659+
<LawIcon size="small" /> <span style={{ marginLeft: '5px' }}>{repo.license.spdx_id}</span>
660+
</GridItem>
661+
)}
662+
<GridItem>
663+
<PeopleIcon size="small" /> <span style={{ marginLeft: '5px' }}>{props.data.users?.canPush?.length || 0}</span>
664+
</GridItem>
665+
<GridItem>
666+
<CodeReviewIcon size="small" /> <span style={{ marginLeft: '5px' }}>{props.data.users?.canAuthorise?.length || 0}</span>
667+
</GridItem>
668+
{(repo.created_at || repo.updated_at || repo.pushed_at) && (
669+
<GridItem>
670+
Last updated {moment.max([moment(repo.created_at), moment(repo.updated_at), moment(repo.pushed_at)]).fromNow()}
671+
</GridItem>
672+
)}
673+
</GridContainer>
674+
</div>
675+
</TableCell>
676+
<TableCell align="right">
677+
<div style={{ padding: '15px' }}>
678+
<CodeActionButton cloneURL={cloneURL} />
679+
</div>
680+
</TableCell>
681+
</TableRow>
682+
))}
683+
684+
{/* Render the Pagination component */}
685+
<Pagination
686+
currentPage={currentPage}
687+
totalItems={dummyRepositories.length}
688+
itemsPerPage={itemsPerPage}
689+
onPageChange={handlePageChange}
690+
/>
691+
</>
673692
);
674-
}
693+
}

‎src/ui/views/UserList/Components/UserList.jsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import styles from '../../../assets/jss/material-dashboard-react/views/dashboard
1515
import { getUsers } from '../../../services/user';
1616

1717
import { CloseRounded, Check, KeyboardArrowRight } from '@material-ui/icons';
18+
// import Pagination from '../../../components/Pagination/Pagination';
1819

1920
export default function UserList(props) {
2021
const useStyles = makeStyles(styles);

0 commit comments

Comments
 (0)