fix: two step downloading

src/app/components/CommitList.tsx

-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import useCommits from "@/app/hooks/useCommits";
 import CsvDownloadPositivity from "@/app/csvDownload/CsvDownload";
 import CsvDownloadSize from "@/app/csvDownload/CsvDownloadSize";
@@ -8,16 +8,6 @@ const CommitList = ({ projectId, token, host, onCommitClick }) => {
     const [showCsvDownloadPositivity, setShowCsvDownloadPositivity] = useState(false);
     const [showCsvDownloadSize, setShowCsvDownloadSize] = useState(false);
 
-    useEffect(() => {
-        let timer;
-        if (showCsvDownloadPositivity) {
-            timer = setTimeout(() => setShowCsvDownloadPositivity(false), 2000);
-        } else if (showCsvDownloadSize) {
-            timer = setTimeout(() => setShowCsvDownloadSize(false), 2000);
-        }
-        return () => clearTimeout(timer);
-    }, [showCsvDownloadPositivity, showCsvDownloadSize]);
-
     if (loading) return <p>Loading...</p>;
     if (error) return <p>Error: {error.message}</p>;
 
@@ -38,29 +28,36 @@ const CommitList = ({ projectId, token, host, onCommitClick }) => {
             ) : (
                 <p>No commits found</p>
             )}
-            <button
-                onClick={() => setShowCsvDownloadSize(true)}
-                className="mt-4 bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-700 m-2"
-            >
-                Download CSV commits size
-            </button>
-            {showCsvDownloadSize && (
-                <div className="mt-4">
-                    <CsvDownloadSize commits={commits} projectId={projectId} token={token} />
-                </div>
-            )}
-
-            <button
-                onClick={() => setShowCsvDownloadPositivity(true)}
-                className="mt-4 bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-700 m-2"
-            >
-                Download CSV commits positivity
-            </button>
-            {showCsvDownloadPositivity && (
+            {
+                !showCsvDownloadSize ? (
+                    <button
+                        onClick={() => setShowCsvDownloadSize(prev => !prev)}
+                        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"}
+                    </button>
+                )
+            :
+            (
                 <div className="mt-4">
-                    <CsvDownloadPositivity commits={commits} projectId={projectId} token={token} />
+                    <CsvDownloadSize commits={commits} projectId={projectId} token={token}/>
                 </div>
-            )}
+            )
+            }
+            {
+                !showCsvDownloadPositivity ? (
+                    <button
+                        onClick={() => setShowCsvDownloadPositivity(true)}
+                        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
+                    </button>
+                ) : (
+                    <div className="mt-4">
+                        <CsvDownloadPositivity commits={commits} projectId={projectId} token={token}/>
+                    </div>
+                )
+            }
         </div>
     );
 };

src/app/csvDownload/CsvDownload.tsx

-import {useState, useEffect, createRef} from 'react';
-import useCommitDetails, { useCommitsPositivity} from "@/app/hooks/useCommitDetails";
+import { useState, useEffect, createRef } from 'react';
 import { CSVLink } from "react-csv";
-
-
-type CommitDetails = {
-    author: string;
-    createdAt: string;
-    projectId: string;
-};
-
+import useCommitDetails, { useCommitsPositivity } from "@/app/hooks/useCommitDetails";
 
 const CsvDownloadPositivity = ({ commits, projectId, token }) => {
-    const {data, isLoading} = useCommitsPositivity(projectId, commits, token);
+    const { data, isLoading } = useCommitsPositivity(projectId, commits, token);
     const csvlink = createRef();
 
-
-    // useEffect(() => {
-    //     if (!isLoading && data) {
-    //         console.log("das");
-    //         csvlink.current.link.click();
-    //     }
-    // }, [csvlink, data, isLoading]);
-    //
-    // console.log(data);
-
     return (
         <div>
             {!isLoading && data ? (
-                <div>
-                    <CSVLink
-                        data={data}
-                        ref={csvlink}
-                        target="_blank"
-                        enclosingCharacter={``}
-                    >lol</CSVLink>
-
-                </div>
+                <CSVLink
+                    data={data}
+                    ref={csvlink}
+                    target="_blank"
+                    enclosingCharacter={``}
+                    className="mt-4 bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-700"
+                >
+                    Download CSV commits positivity
+                </CSVLink>
             ) : (
                 <p>Loading...</p>
             )}
         </div>
     );
-
-
 };
 
 export default CsvDownloadPositivity;

src/app/csvDownload/CsvDownloadSize.tsx

@@ -33,11 +33,13 @@ const CsvDownloadSize = ({ commits, projectId, token }) => {
                         ref={csvlink}
                         target="_blank"
                         enclosingCharacter={``}
-                    >lol</CSVLink>
+                        className="mt-4 bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-700"
+                    >Download CSV size</CSVLink>
 
                 </div>
             ) : (
-                <p>Loading...</p>
+                <p className="mt-4 bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-700"
+                >Loading...</p>
             )}
         </div>
     );