feat: functionality not only for fi muni

src/app/components/App.tsx

@@ -2,23 +2,67 @@
 import React, { useState } from 'react';
 import CommitList from './CommitList';
 import CommitDetail from './CommitDetail';
-
+import {host} from "@/utils";
 
 const App: React.FC = () => {
-    const [projectId] = useState<string>('xsonovsk%2Fbc-new');
+    const [repoUrl, setRepoUrl] = useState<string>('');
+    const [projectId, setProjectId] = useState<string | null>(null);
     const [token] = useState<string>('f3Lx-aBfJis12TsRoQtt');
+    const [domain, setDomain] = useState<string>('');
     const [selectedCommit, setSelectedCommit] = useState<string | null>(null);
 
+    const extractProjectIdFromUrl = (url: string): string | null => {
+        const match = url.match(/gitlab\.[^\/]+\/(.+?)(\.git|$)/);
+        return match ? match[1].replace(/\//g, '%2F') : null;
+    };
+    const extractGitlabDomainFromUrl = (url: string): string | null => {
+        const match = url.match(/(https?:\/\/gitlab\.[^\/]+)/);
+        return match ? match[1] : null;
+    };
+
+
+
+    const handleUrlChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setRepoUrl(event.target.value);
+    };
+
+    const handleButtonClick = () => {
+        const id = extractProjectIdFromUrl(repoUrl);
+        setProjectId(id);
+        const domain = extractGitlabDomainFromUrl(repoUrl);
+        setDomain(domain);
+    };
+
     const handleCommitClick = (commitId: string) => {
         setSelectedCommit(commitId);
     };
 
     return (
-        <div>
-            <h1>GitLab Commits</h1>
-            <CommitList projectId={projectId} token={token} onCommitClick={handleCommitClick} />
-            {selectedCommit && (
-                <CommitDetail projectId={projectId} commitId={selectedCommit} token={token} />
+        <div className="container mx-auto p-4">
+            <h1 className="text-2xl font-bold mb-4">GitLab Commits</h1>
+            <div className="mb-4">
+                <input
+                    type="text"
+                    placeholder="Enter repository URL"
+                    value={repoUrl}
+                    onChange={handleUrlChange}
+                    className="border p-2 rounded w-full"
+                />
+                <button
+                    onClick={handleButtonClick}
+                    className="mt-2 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700"
+                >
+                    Load Commits
+                </button>
+            </div>
+            <p>{projectId}</p>
+            {projectId && (
+                <>
+                    <CommitList  projectId={projectId} token={token} host={domain} onCommitClick={handleCommitClick} />
+                    {selectedCommit && (
+                        <CommitDetail projectId={projectId} commitId={selectedCommit} token={token} />
+                    )}
+                </>
             )}
         </div>
     );

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 {
@@ -12,11 +11,12 @@ interface Commit {
 interface CommitListProps {
     projectId: string;
     token: string;
+    host: string;
     onCommitClick: (commitId: string) => void;
 }
 
-const CommitList: React.FC<CommitListProps> = ({ projectId, token, onCommitClick }) => {
-    const { commits, loading, error } = useCommits(projectId, token);
+const CommitList: React.FC<CommitListProps> = ({ projectId, token, host, onCommitClick }) => {
+    const { commits, loading, error } = useCommits(projectId, token, host);
 
     if (loading) return <p>Loading...</p>;
     if (error) return <p>Error: {error.message}</p>;

src/app/hooks/useCommits.ts

 import { useState, useEffect } from 'react';
 import axios from 'axios';
-import {host} from "@/utils";
 
-const useCommits = (projectId: string, token: string) => {
+const useCommits = (projectId: string, token: string, host: string) => {
     const [commits, setCommits] = useState([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);

src/app/page.tsx

@@ -2,7 +2,6 @@ import App from "@/app/components/App";
 
 export default function Home() {
   return (<div>
-    <h1>GitLab Commits</h1>
     <App />;
 
   </div>