feat: added fetching commits together in one query

src/app/components/CommitList.tsx

 import React, {useEffect, useState} from 'react';
 import {Commits} from '@gitbeaker/rest';
 import useCommits from "@/app/hooks/useCommits";
+import CsvDownload from "@/app/components/CsvDownload";
 
 interface Commit {
     id: string;
@@ -35,11 +36,15 @@ const CommitList: React.FC<CommitListProps> = ({ projectId, token, host, onCommi
                         </li>
                     ))}
                 </ul>
+
             ) : (
                 <p>No commits found</p>
             )}
+            <CsvDownload commits={commits} projectId={projectId} token={token}/>
+
         </div>
-    );
+
+);
 };
 
 

src/app/components/CsvDownload.tsx

+import { useState, useEffect } from 'react';
+import useCommitDetails, {useCommitData} from "@/app/hooks/useCommitDetails";
+
+type CommitDetails = {
+    author: string;
+    createdAt: string;
+    projectId: string;
+};
+
+
+const CsvDownload = ({ commits, projectId, token }) => {
+    const {data, isLoading} = useCommitData(projectId, commits, token);
+
+    console.log(data);
+
+    return (
+        <div>
+            {!isLoading && data ? (
+                <div>
+                    {data.map((commit) => (
+                        <div key={commit.id}>
+                            <p>{commit.title}</p>
+                            <p>{commit.created_at}</p>
+                            <p>{commit.projectId}</p>
+                        </div>
+                    ))}
+                </div>
+            ) : (
+                <p>Loading...</p>
+            )}
+        </div>
+    );
+
+
+};
+
+export default CsvDownload;

src/app/hooks/useCommitDetails.ts

-import { useState, useEffect } from 'react';
+import {useState, useEffect} from 'react';
 import axios from 'axios';
 import {host} from "@/utils";
+import {useQuery} from "@tanstack/react-query";
+
+
+export const useCommitData = (projectId, commitIds, token) => {
+    const {data, isLoading} = useQuery({
+        queryKey: ['commitData', projectId, commitIds],
+        queryFn: async () => {
+            const promises = commitIds.map(commitId =>
+                axios.get(`${host}/api/v4/projects/${projectId}/repository/commits/${commitId.id}`, {
+                    headers: {'PRIVATE-TOKEN': token}
+                }).then(response => response.data)
+            );
+            return Promise.all(promises);
+        }
+    });
+
+    return {data, isLoading};
+};
+
 
 const useCommitDetails = (projectId: string, commitId: string, token: string) => {
-    const [commit, setCommitDetails] = useState(null);
+    const [commit, setCommitDetails] = useState([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
 
@@ -12,7 +31,7 @@ const useCommitDetails = (projectId: string, commitId: string, token: string) =>
             setLoading(true);
             try {
                 const response = await axios.get(`${host}/api/v4/projects/${projectId}/repository/commits/${commitId}`, {
-                    headers: { 'PRIVATE-TOKEN': token }
+                    headers: {'PRIVATE-TOKEN': token}
                 });
                 setCommitDetails(response.data);
             } catch (err) {
@@ -25,7 +44,7 @@ const useCommitDetails = (projectId: string, commitId: string, token: string) =>
         fetchCommitDetails();
     }, [projectId, commitId, token]);
 
-    return { commit, loading, error };
+    return {commit, loading, error};
 };
 
 export default useCommitDetails;