Skip to content

Commit b5aabf7

Browse files
darkhorse-420darkhorse-420
committed
fix: search and pagination
1 parent 6270432 commit b5aabf7

File tree

3 files changed

+206
-171
lines changed

3 files changed

+206
-171
lines changed

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

Lines changed: 93 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
1-
import React, { useState } from 'react';
1+
import React, { useEffect } 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

88

9-
10-
119
const colors = {
1210
'1C Enterprise': '#814CCC',
1311
'2-Dimensional Array': '#38761D',
@@ -568,149 +566,110 @@ const colors = {
568566
Zimpl: '#d67711',
569567
};
570568

571-
// import axios from 'axios';
569+
import axios from 'axios';
572570
import moment from 'moment';
573571
import CodeActionButton from '../../../components/CustomButtons/CodeActionButton';
574-
import Pagination from '../../../components/Pagination/Pagination';
575-
import Search from '../../../components/Search/Search';
576572

577573
export default function Repositories(props) {
578-
// const [github, setGitHub] = React.useState({});
579-
// const [repositories, setRepositories] = useState([]); // To hold all repositories
580-
const [currentPage, setCurrentPage] = useState(1);
581-
const [searchQuery, setSearchQuery] = useState('');
582-
const itemsPerPage = 5;
583-
584-
585-
// Dummy repository data```````````
586-
const dummyRepositories = [
587-
{ project: 'Org1', name: 'Repo1', description: 'Description for Repo 1' },
588-
{ project: 'Org2', name: 'Repo2', description: 'Description for Repo 2' },
589-
{ project: 'Org3', name: 'Repo3', description: 'Description for Repo 3' },
590-
{ project: 'Org4', name: 'Repo4', description: 'Description for Repo 4' },
591-
{ project: 'Org5', name: 'Repo5', description: 'Description for Repo 5' },
592-
{ project: 'Org6', name: 'Repo6', description: 'Description for Repo 6' },
593-
// Add more dummy repositories as needed
594-
];
595-
596-
597-
// useEffect(() => {
598-
// getGitHubRepository();
599-
// }, [props.data.project, props.data.name]);
600-
601-
// const getGitHubRepository = async () => {
602-
// try {
603-
// const res = await axios.get(
604-
// `https://api.github.com/repos/${props.data.project}/${props.data.name}`
605-
// );
606-
// setRepositories([res.data]); // Store the single repository in an array
607-
// } catch (error) {
608-
// console.error("Failed to fetch repository", error);
609-
// }
610-
// };
611-
612-
613-
// Handle search functionality
614-
const handleSearch = (query) => {
615-
setSearchQuery(query);
616-
setCurrentPage(1); // Reset to first page when searching
617-
};
618-
619-
// Filter repositories based on search query
620-
const filteredRepositories = dummyRepositories.filter(repo =>
621-
repo.name.toLowerCase().includes(searchQuery.toLowerCase())
622-
);
623-
574+
const [github, setGitHub] = React.useState({});
624575

576+
useEffect(() => {
577+
getGitHubRepository();
578+
}, [props.data.project, props.data.name]);
625579

626-
// Pagination logic to get current items for the page
627-
const indexOfLastItem = currentPage * itemsPerPage;
628-
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
629-
const currentItems = filteredRepositories.slice(indexOfFirstItem, indexOfLastItem);
630-
631-
const handlePageChange = (page) => {
632-
setCurrentPage(page);
580+
const getGitHubRepository = async () => {
581+
await axios
582+
.get(`https://api.github.com/repos/${props.data.project}/${props.data.name}`)
583+
.then((res) => {
584+
setGitHub(res.data);
585+
});
633586
};
634587

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

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

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

Lines changed: 59 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,31 +12,63 @@ import NewRepo from './NewRepo';
1212
import RepoOverview from './RepoOverview';
1313
import { UserContext } from '../../../../context';
1414
import PropTypes from 'prop-types';
15+
import Search from '../../../components/Search/Search';
16+
import Pagination from '../../../components/Pagination/Pagination';
17+
1518

1619
export default function Repositories(props) {
1720
const useStyles = makeStyles(styles);
1821
const classes = useStyles();
1922
const [data, setData] = useState([]);
23+
const [filteredData, setFilteredData] = useState([]);
2024
const [, setAuth] = useState(true);
2125
const [isLoading, setIsLoading] = useState(false);
2226
const [isError, setIsError] = useState(false);
27+
const [currentPage, setCurrentPage] = useState(1); // Pagination state
28+
const itemsPerPage = 5; // Set items per page
2329
const navigate = useNavigate();
24-
const openRepo = (repo) => navigate(`/admin/repo/${repo}`, { replace: true });
2530
const { user } = useContext(UserContext);
2631

32+
const openRepo = (repo) => navigate(`/admin/repo/${repo}`, { replace: true });
33+
2734
useEffect(() => {
2835
const query = {};
2936
for (const k in props) {
3037
if (!k) continue;
3138
query[k] = props[k];
3239
}
33-
getRepos(setIsLoading, setData, setAuth, setIsError, query);
40+
getRepos(setIsLoading, (data) => {
41+
setData(data);
42+
setFilteredData(data); // Set both data and filteredData
43+
}, setAuth, setIsError, query);
3444
}, [props]);
3545

3646
const refresh = async (repo) => {
37-
console.log('refresh:', repo);
38-
setData([...data, repo]);
47+
const updatedData = [...data, repo];
48+
setData(updatedData);
49+
setFilteredData(updatedData);
50+
};
51+
52+
const handleSearch = (query) => {
53+
setCurrentPage(1); // Reset to page 1 on new search
54+
if (!query) {
55+
setFilteredData(data);
56+
} else {
57+
const lowercasedQuery = query.toLowerCase();
58+
setFilteredData(
59+
data.filter(repo =>
60+
repo.name.toLowerCase().includes(lowercasedQuery) ||
61+
repo.project.toLowerCase().includes(lowercasedQuery)
62+
)
63+
);
64+
}
3965
};
66+
const handlePageChange = (page) => setCurrentPage(page); // Update current page
67+
68+
69+
// Calculate items for the current page
70+
const startIdx = (currentPage - 1) * itemsPerPage;
71+
const paginatedData = filteredData.slice(startIdx, startIdx + itemsPerPage);
4072

4173
if (isLoading) return <div>Loading...</div>;
4274
if (isError) return <div>Something went wrong ...</div>;
@@ -54,8 +86,13 @@ export default function Repositories(props) {
5486
key='x'
5587
classes={classes}
5688
openRepo={openRepo}
57-
data={data}
89+
data={paginatedData} // Use filteredData here
5890
repoButton={addrepoButton}
91+
onSearch={handleSearch} // Pass handleSearch
92+
currentPage={currentPage} // Pass current page
93+
totalItems={filteredData.length} // Pass total items for pagination
94+
itemsPerPage={itemsPerPage} // Pass items per page
95+
onPageChange={handlePageChange} // Pass page change handler
5996
/>
6097
);
6198
}
@@ -65,13 +102,21 @@ GetGridContainerLayOut.propTypes = {
65102
openRepo: PropTypes.func.isRequired,
66103
data: PropTypes.array,
67104
repoButton: PropTypes.object,
105+
onSearch: PropTypes.func.isRequired,
106+
currentPage: PropTypes.number.isRequired,
107+
totalItems: PropTypes.number.isRequired,
108+
itemsPerPage: PropTypes.number.isRequired,
109+
onPageChange: PropTypes.func.isRequired,
68110
};
69111

70112
function GetGridContainerLayOut(props) {
71113
return (
72114
<GridContainer>
73115
{props.repoButton}
74116
<GridItem xs={12} sm={12} md={12}>
117+
{/* Add Search component */}
118+
<Search onSearch={props.onSearch} />
119+
75120
<TableContainer
76121
style={{ background: 'transparent', borderRadius: '5px', border: '1px solid #d0d7de' }}
77122
>
@@ -86,6 +131,15 @@ function GetGridContainerLayOut(props) {
86131
</Table>
87132
</TableContainer>
88133
</GridItem>
134+
<GridItem xs={12} sm={12} md={12}>
135+
<Pagination
136+
currentPage={props.currentPage}
137+
totalItems={props.totalItems}
138+
itemsPerPage={props.itemsPerPage}
139+
onPageChange={props.onPageChange}
140+
/>
141+
</GridItem>
89142
</GridContainer>
90143
);
91144
}
145+

0 commit comments

Comments
 (0)