Skip to content
Snippets Groups Projects
Commit fb575dcc authored by Štěpán Šonovský's avatar Štěpán Šonovský
Browse files

feat: added pagination

parent c4ad301a
No related branches found
No related tags found
No related merge requests found
import React from 'react'; import React, { useState } from 'react';
import useCommits from "@/app/hooks/useCommits"; import {useCommitsPagination} from "@/app/hooks/useCommits";
import CsvButtons from "@/app/csvDownload/CsvButtons"; import CsvButtons from "@/app/csvDownload/CsvButtons";
const CommitList = ({ projectId, token, host, onCommitClick }) => { const CommitList = ({ projectId, token, host, onCommitClick }) => {
const { commits, loading, error } = useCommits(projectId, token, host); const [page, setPage] = useState(1);
const { commits, loading, error, totalPages } = useCommitsPagination(projectId, token, host, page);
if (loading) return <p>Loading...</p>; if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {error.message}</p>; if (error) return <p>Error: {error.message}</p>;
...@@ -11,21 +12,40 @@ const CommitList = ({ projectId, token, host, onCommitClick }) => { ...@@ -11,21 +12,40 @@ const CommitList = ({ projectId, token, host, onCommitClick }) => {
return ( return (
<div className="bg-white shadow-md rounded-lg p-4"> <div className="bg-white shadow-md rounded-lg p-4">
{commits ? ( {commits ? (
<ul className="bg-white shadow-md rounded-lg p-4"> <>
{commits.map(commit => ( <ul className="bg-white shadow-md rounded-lg p-4">
<li {commits.map(commit => (
key={commit.id} <li
className="cursor-pointer py-2 px-4 hover:bg-gray-100" key={commit.id}
onClick={() => onCommitClick(commit.id)} className="cursor-pointer py-2 px-4 hover:bg-gray-100"
onClick={() => onCommitClick(commit.id)}
>
{commit.title}
</li>
))}
</ul>
<div className="flex justify-between mt-4">
<button
disabled={page <= 1}
onClick={() => setPage(page - 1)}
className="px-4 py-2 bg-blue-500 text-white rounded"
> >
{commit.title} Previous
</li> </button>
))} <span>Page {page} of {totalPages}</span>
</ul> <button
disabled={page >= totalPages}
onClick={() => setPage(page + 1)}
className="px-4 py-2 bg-blue-500 text-white rounded"
>
Next
</button>
</div>
<CsvButtons projectId={projectId} token={token} host={host}/>
</>
) : ( ) : (
<p>No commits found</p> <p>No commits found</p>
)} )}
<CsvButtons commits={commits} projectId={projectId} token={token}/>
</div> </div>
); );
}; };
......
import React, { useState } from 'react'; import React, { useState, useEffect } from 'react';
import CsvDownloadPositivity from "@/app/csvDownload/CsvDownload"; import CsvDownloadPositivity from "@/app/csvDownload/CsvDownload";
import CsvDownloadSize from "@/app/csvDownload/CsvDownloadSize"; import CsvDownloadSize from "@/app/csvDownload/CsvDownloadSize";
import { useCommitsAll } from "@/app/hooks/useCommits";
const CsvButtons = ({ commits, projectId, token }) => { const CsvButtons = ({ projectId, token, host }) => {
const [showCsvDownloadPositivity, setShowCsvDownloadPositivity] = useState(false); const [showCsvDownloadPositivity, setShowCsvDownloadPositivity] = useState(false);
const [showCsvDownloadSize, setShowCsvDownloadSize] = useState(false); const [showCsvDownloadSize, setShowCsvDownloadSize] = useState(false);
const [fetchCommits, setFetchCommits] = useState(false);
const { commits, loading, error } = useCommitsAll(projectId, token, host, fetchCommits);
const handleFetchSize = () => {
setShowCsvDownloadSize(true);
setFetchCommits(true);
};
const handleFetchPositivity = () => {
setShowCsvDownloadPositivity(true);
setFetchCommits(true);
};
return ( return (
<> <>
{!showCsvDownloadSize ? ( {!showCsvDownloadSize ? (
<button <button
onClick={() => setShowCsvDownloadSize(prev => !prev)} onClick={handleFetchSize}
className="mt-4 bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-700 m-2" className="mt-4 bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-700 m-2"
> >
Fetch CSV commits size Fetch CSV commits size
</button> </button>
) : ( ) : (
<div className="mt-4"> <div className="mt-4">
<CsvDownloadSize commits={commits} projectId={projectId} token={token}/> <CsvDownloadSize commits={commits} projectId={projectId} token={token}/>
</div> </div>
)} )}
{!showCsvDownloadPositivity ? ( {!showCsvDownloadPositivity ? (
<button <button
onClick={() => setShowCsvDownloadPositivity(true)} onClick={handleFetchPositivity}
className="mt-4 bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-700 m-2" className="mt-4 bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-700 m-2"
> >
Fetch CSV commits positivity Fetch CSV commits positivity
</button> </button>
) : ( ) : (
<div className="mt-4"> <div className="mt-4">
<CsvDownloadPositivity commits={commits} projectId={projectId} token={token}/> <CsvDownloadPositivity commits={commits} projectId={projectId} token={token}/>
</div> </div>
)} )}
</> </>
); );
}; };
export default CsvButtons; export default CsvButtons;
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import axios from 'axios'; import axios from 'axios';
const useCommits = (projectId: string, token: string, host: string) => { export const useCommitsAll = (projectId: string, token: string, host: string) => {
const [commits, setCommits] = useState([]); const [commits, setCommits] = useState([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState(null); const [error, setError] = useState(null);
...@@ -31,4 +31,33 @@ const useCommits = (projectId: string, token: string, host: string) => { ...@@ -31,4 +31,33 @@ const useCommits = (projectId: string, token: string, host: string) => {
return { commits, loading, error }; return { commits, loading, error };
}; };
export default useCommits;
export const useCommitsPagination = (projectId, token, host, page = 1, perPage = 10) => {
const [commits, setCommits] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [totalPages, setTotalPages] = useState(1);
useEffect(() => {
const fetchCommits = async () => {
setLoading(true);
try {
const response = await axios.get(`${host}/api/v4/projects/${projectId}/repository/commits`, {
headers: { 'PRIVATE-TOKEN': token },
params: { page, per_page: perPage }
});
setCommits(response.data);
setTotalPages(parseInt(response.headers['x-total-pages'], 10));
} catch (err) {
setError(err);
} finally {
setLoading(false);
}
};
fetchCommits();
}, [host, projectId, token, page, perPage]);
return { commits, loading, error, totalPages };
};
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment