refactor: seperated cloning from settings

frontend/src/components/settings/ApiKeyModal.jsx

@@ -1,24 +1,34 @@
 import React, { useState } from 'react';
 import Modal from '../ui/Modal';
 import { Loader } from 'lucide-react';
+import { cloneRepo } from '../../api/api';
+import Alert from '../ui/Alert';
 
-const SettingsModal = ({ isOpen, onClose, onSave }) => {
+const ApiKeyModal = ({ isOpen, onClose, onSubmit }) => {
     const [gitRepo, setGitRepo] = useState('');
-    const [gitToken, setGitToken] = useState('');
+    const [apiKey, setApiKey] = useState('');
     const [loading, setLoading] = useState(false);
 
-    const handleSave = () => {
-        if (!gitRepo || !gitToken) {
-            alert("Please fill in all fields.");
-            return;
-        }
-        setLoading(true);
-        onSave({ gitRepo, gitToken, localRepoPath: 'data/db' })
-            .finally(() => setLoading(false));
-    };
+    const handleSubmit = async () => {
+      if (!gitRepo || !apiKey) {
+        Alert.error("Please fill in all fields.");
+        return;
+      }
+      setLoading(true);
+      try {
+        const response = await cloneRepo(gitRepo, apiKey);
+        Alert.success(response.message || "Repository cloned successfully!");
+        onSubmit();
+      } catch (error) {
+        Alert.error("An unexpected error occurred while cloning the repository.");
+        console.error("Error cloning repository:", error);
+      } finally {
+        setLoading(false);
+      }
+    };    
 
     return (
-        <Modal isOpen={isOpen} onClose={onClose} title="Setup Git Repository">
+        <Modal isOpen={isOpen} onClose={onClose} title="Link Git Repository">
             <div className="space-y-4">
                 <div>
                     <label className="block text-sm font-medium text-gray-300 mb-2">Git Repository URL:</label>
@@ -34,25 +44,25 @@ const SettingsModal = ({ isOpen, onClose, onSave }) => {
                     <label className="block text-sm font-medium text-gray-300 mb-2">GitHub Access Token:</label>
                     <input
                         type="password"
-                        value={gitToken}
-                        onChange={(e) => setGitToken(e.target.value)}
+                        value={apiKey}
+                        onChange={(e) => setApiKey(e.target.value)}
                         className="w-full p-2 border rounded bg-gray-900 text-gray-100 border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
                         placeholder="Your GitHub Token"
                     />
                 </div>
                 <div className="mt-6 flex justify-end">
                     <button
-                        onClick={handleSave}
                         className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition-colors flex items-center"
                         disabled={loading}
+                        onClick={handleSubmit}
                     >
                         {loading ? (
                             <>
                                 <Loader size={16} className="animate-spin mr-2" />
-                                Saving...
+                                Cloning...
                             </>
                         ) : (
-                            'Save'
+                            'Clone Repository'
                         )}
                     </button>
                 </div>
@@ -61,4 +71,4 @@ const SettingsModal = ({ isOpen, onClose, onSave }) => {
     );
 };
 
-export default SettingsModal;
+export default ApiKeyModal;

frontend/src/components/settings/SettingsPage.jsx

@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from "react";
 import {
   getSettings,
-  saveSettings,
   getGitStatus,
   addFiles,
   pushFiles,
@@ -10,7 +9,7 @@ import {
   getDiff,
   unlinkRepo,
 } from "../../api/api";
-import SettingsModal from "./SettingsModal";
+import ApiKeyModal from "./ApiKeyModal";
 import SettingsBranchModal from "./SettingsBranchModal";
 import {
   FileText,
@@ -63,11 +62,9 @@ const SettingsPage = () => {
   const fetchSettings = async () => {
     try {
       const fetchedSettings = await getSettings();
+      setSettings(fetchedSettings);
       if (fetchedSettings) {
-        setSettings(fetchedSettings);
         await fetchGitStatus();
-      } else {
-        setShowModal(true);
       }
     } catch (error) {
       console.error("Error fetching settings:", error);
@@ -116,27 +113,6 @@ const SettingsPage = () => {
     );
   };
 
-  const handleSaveSettings = async (newSettings) => {
-    try {
-      setLoadingAction("save_settings"); // Set a loading state if needed
-      const response = await saveSettings(newSettings);
-
-      if (response) {
-        setSettings(response); // Update the settings in the state
-        Alert.success("Settings saved successfully!");
-        await fetchGitStatus(); // Optionally refresh the Git status after saving
-      } else {
-        Alert.error("Failed to save settings. Please try again.");
-      }
-    } catch (error) {
-      Alert.error("An unexpected error occurred while saving the settings.");
-      console.error("Error saving settings:", error);
-    } finally {
-      setLoadingAction(""); // Reset the loading state
-      setShowModal(false); // Close the modal after saving
-    }
-  };
-
   const fetchGitStatus = async () => {
     setLoadingStatus(true);
     try {
@@ -504,6 +480,13 @@ const SettingsPage = () => {
     }
   };
 
+  const handleLinkRepo = async () => {
+    setLoadingAction("");
+    setShowModal(false);
+    await fetchSettings();
+  };
+  
+
   const handleUnlinkRepo = async () => {
     if (window.confirm("Are you sure you want to unlink this repository? This action cannot be undone.")) {
       setLoadingAction("unlink_repo");
@@ -530,6 +513,14 @@ const SettingsPage = () => {
       <h2 className="text-xl font-bold mb-4 text-gray-100">
         Git Repository Settings
       </h2>
+      {!settings && (
+        <button
+          onClick={() => setShowModal(true)}
+          className="flex items-center px-3 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors duration-200 ease-in-out text-xs"
+        >
+          Link Repository
+        </button>
+      )}
       {settings && (
         <div className="space-y-4">
           <div className="bg-gray-700 p-4 rounded-md">
@@ -680,11 +671,6 @@ const SettingsPage = () => {
           </div>
         </div>
       )}
-      <SettingsModal
-        isOpen={showModal}
-        onClose={() => setShowModal(false)}
-        onSave={(newSettings) => handleSaveSettings(newSettings)}
-      />
       {settings && status && (
         <SettingsBranchModal
           isOpen={showBranchModal}
@@ -704,6 +690,11 @@ const SettingsPage = () => {
           commitMessage={currentChange.commit_message}
         />
       )}
+      <ApiKeyModal
+        isOpen={showModal}
+        onClose={() => setShowModal(false)}
+        onSubmit={handleLinkRepo}
+      />
     </div>
   );
 };