fix: instead of gitbreaker basic axios

src/app/components/App.tsx

@@ -5,7 +5,7 @@ import CommitDetail from './CommitDetail';
 
 
 const App: React.FC = () => {
-    const [projectId] = useState<string>('xsonovsk/bc-new');
+    const [projectId] = useState<string>('xsonovsk%2Fbc-new');
     const [token] = useState<string>('f3Lx-aBfJis12TsRoQtt');
     const [selectedCommit, setSelectedCommit] = useState<string | null>(null);
 

src/app/components/CommitDetail.tsx

 import React, { useEffect, useState } from 'react';
 import api from "@/client";
+import useCommitDetails from "@/app/hooks/useCommitDetails";
 
 interface CommitDetailProps {
     projectId: string;
@@ -8,17 +9,12 @@ interface CommitDetailProps {
 }
 
 const CommitDetail: React.FC<CommitDetailProps> = ({ projectId, commitId, token }) => {
-    const [commit, setCommit] = useState<any>(null);
+    const { commit, loading, error } = useCommitDetails(projectId, commitId, token);
 
-    useEffect(() => {
-        api.Commits.show(projectId, commitId).then(data => {
-            setCommit(data);
-        });
-    }, [projectId, commitId, token]);
+    if (loading) return <p>Loading...</p>;
+    if (error) return <p>Error: {error.message}</p>;
 
-    if (!commit) return <div className="text-center text-gray-500">Loading...</div>;
-
-    return (
+    return (commit) && (
         <div className="bg-white shadow-md rounded-lg p-4">
             <p className="mb-2"><strong>ID:</strong> {commit.id}</p>
             <p className="mb-2"><strong>Short ID:</strong> {commit.short_id}</p>

src/app/components/CommitList.tsx

 import React, { useEffect, useState } from 'react';
 import { Commits } from '@gitbeaker/rest';
 import {host} from '../../utils';
+import useCommits from "@/app/hooks/useCommits";
 
 interface Commit {
     id: string;
@@ -15,18 +16,15 @@ interface CommitListProps {
 }
 
 const CommitList: React.FC<CommitListProps> = ({ projectId, token, onCommitClick }) => {
-    const [commits, setCommits] = useState<Commit[]>([]);
+    const { commits, loading, error } = useCommits(projectId, token);
+
+    if (loading) return <p>Loading...</p>;
+    if (error) return <p>Error: {error.message}</p>;
 
-    useEffect(() => {
-        const api = new Commits({ host: host, token });
-        api.all(projectId).then(data => {
-            setCommits(data);
-        });
-    }, [projectId, token]);
 
     return (
         <ul className="bg-white shadow-md rounded-lg p-4">
-            {commits.map(commit => (
+            {commits?.map(commit => (
                 <li
                     key={commit.id}
                     className="cursor-pointer py-2 px-4 hover:bg-gray-100"

src/app/hooks/useCommitDetails.ts

-// src/hooks/useCommitDetail.ts
-import { useEffect, useState } from 'react';
-import { Commits } from '@gitbeaker/rest';
-import host from "@/utils";
+import { useState, useEffect } from 'react';
+import axios from 'axios';
+import {host} from "@/utils";
 
 const useCommitDetails = (projectId: string, commitId: string, token: string) => {
-    const [commit, setCommit] = useState<any>(null);
+    const [commit, setCommitDetails] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
 
     useEffect(() => {
-        const api = new Commits({ host: host, token });
-        api.show(projectId, commitId).then(data => {
-            setCommit(data);
-        });
+        const fetchCommitDetails = async () => {
+            setLoading(true);
+            try {
+                const response = await axios.get(`${host}/api/v4/projects/${projectId}/repository/commits/${commitId}`, {
+                    headers: { 'PRIVATE-TOKEN': token }
+                });
+                setCommitDetails(response.data);
+            } catch (err) {
+                setError(err);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchCommitDetails();
     }, [projectId, commitId, token]);
 
-    return commit;
+    return { commit, loading, error };
 };
 
 export default useCommitDetails;

src/app/hooks/useCommits.ts

-// src/hooks/useCommits.ts
-import { useEffect, useState } from 'react';
-import { Commits } from '@gitbeaker/rest';
-import host from "@/utils";
+import { useState, useEffect } from 'react';
+import axios from 'axios';
+import {host} from "@/utils";
 
 const useCommits = (projectId: string, token: string) => {
-    const [commits, setCommits] = useState<any[]>([]);
+    const [commits, setCommits] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
 
     useEffect(() => {
-        const api = new Commits({ host: host, token });
-        api.all(projectId).then(data => {
-            setCommits(data);
-        });
+        const fetchCommits = async () => {
+            setLoading(true);
+            try {
+                const response = await axios.get(`${host}/api/v4/projects/${projectId}/repository/commits`, {
+                    headers: { 'PRIVATE-TOKEN': token }
+                });
+                setCommits(response.data);
+            } catch (err) {
+                setError(err);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchCommits();
     }, [projectId, token]);
 
-    return commits;
+    return { commits, loading, error };
 };
 
 export default useCommits;