refactor: move repo functions into seperate component

frontend/src/components/settings/SettingsPage.jsx

@@ -10,7 +10,6 @@ import {
     unlinkRepo,
     checkDevMode
 } from '../../api/api';
-import UnlinkModal from './UnlinkModal';
 import SettingsBranchModal from './SettingsBranchModal';
 import {
     FileText,
@@ -35,7 +34,6 @@ import Alert from '../ui/Alert';
 import CommitSection from './CommitSection';
 import Tooltip from '../ui/Tooltip';
 import DiffModal from './DiffModal';
-import LinkRepoModal from './LinkRepoModal';
 import ArrContainer from './arrs/ArrContainer';
 import RepoContainer from './git/RepoContainer';
 
@@ -56,8 +54,6 @@ const SettingsPage = () => {
     const [loadingDiff, setLoadingDiff] = useState(false);
     const [selectionType, setSelectionType] = useState(null);
     const [funMessage, setFunMessage] = useState('');
-    const [showLinkModal, setShowLinkModal] = useState(false);
-    const [showUnlinkModal, setShowUnlinkModal] = useState(false);
     const [sortConfig, setSortConfig] = useState({
         key: 'type',
         direction: 'descending'
@@ -562,34 +558,6 @@ const SettingsPage = () => {
         }
     };
 
-    const handleLinkRepo = async () => {
-        setLoadingAction('');
-        setShowLinkModal(false);
-        await fetchSettings();
-    };
-
-    const handleUnlinkRepo = async removeFiles => {
-        setLoadingAction('unlink_repo');
-        try {
-            const response = await unlinkRepo(removeFiles);
-            if (response.success) {
-                setSettings(null);
-                setStatus(null);
-                Alert.success('Repository unlinked successfully');
-                setShowUnlinkModal(false); // Close the modal after unlinking
-            } else {
-                Alert.error(response.error || 'Failed to unlink repository');
-            }
-        } catch (error) {
-            Alert.error(
-                'An unexpected error occurred while unlinking the repository'
-            );
-            console.error('Error unlinking repository:', error);
-        } finally {
-            setLoadingAction('');
-        }
-    };
-
     return (
         <div>
             <h2 className='text-xl font-bold mb-4 text-gray-100'>
@@ -601,9 +569,8 @@ const SettingsPage = () => {
 
             <RepoContainer
                 settings={settings}
-                loadingAction={loadingAction}
-                onLinkRepo={handleLinkRepo}
-                onUnlinkRepo={handleUnlinkRepo}
+                setSettings={setSettings}
+                fetchGitStatus={fetchGitStatus}
             />
 
             {settings && (
@@ -847,16 +814,6 @@ const SettingsPage = () => {
                     isDevMode={isDevMode}
                 />
             )}
-            <LinkRepoModal
-                isOpen={showLinkModal}
-                onClose={() => setShowLinkModal(false)}
-                onSubmit={handleLinkRepo}
-            />
-            <UnlinkModal
-                isOpen={showUnlinkModal}
-                onClose={() => setShowUnlinkModal(false)}
-                onSubmit={handleUnlinkRepo}
-            />
         </div>
     );
 };

frontend/src/components/settings/UnlinkModal.jsx

@@ -1,57 +0,0 @@
-// UnlinkModal.js
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import Modal from '../ui/Modal';
-
-const UnlinkRepoModal = ({ isOpen, onClose, onSubmit }) => {
-  const [removeFiles, setRemoveFiles] = useState(false);
-
-  const handleUnlink = () => {
-    onSubmit(removeFiles); // Pass removeFiles correctly
-    onClose(); // Close the modal after unlinking
-};
-
-  return (
-    <Modal isOpen={isOpen} onClose={onClose} title="Unlink Repository">
-      <div className="space-y-4">
-        <p className="text-gray-700 dark:text-gray-300">
-          Are you sure you want to unlink the repository?
-        </p>
-        <div className="flex items-center">
-          <input
-            type="checkbox"
-            id="removeFiles"
-            checked={removeFiles}
-            onChange={() => setRemoveFiles(!removeFiles)}
-            className="form-checkbox h-4 w-4 text-red-600 transition duration-150 ease-in-out"
-          />
-          <label htmlFor="removeFiles" className="ml-2 text-gray-700 dark:text-gray-300">
-            Also remove repository files
-          </label>
-        </div>
-        <div className="flex justify-end space-x-2 mt-4">
-          <button
-            className="px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600 transition-colors duration-200 ease-in-out text-xs"
-            onClick={onClose}
-          >
-            Cancel
-          </button>
-          <button
-            className="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors duration-200 ease-in-out text-xs"
-            onClick={handleUnlink}
-          >
-            Unlink
-          </button>
-        </div>
-      </div>
-    </Modal>
-  );
-};
-
-UnlinkRepoModal.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  onClose: PropTypes.func.isRequired,
-  onSubmit: PropTypes.func.isRequired,
-};
-
-export default UnlinkRepoModal;

frontend/src/components/settings/git/RepoContainer.jsx

@@ -1,49 +1,109 @@
-import React from 'react';
-import {Loader, Unlink} from 'lucide-react';
+import React, {useState} from 'react';
+import {Loader, Unlink, Link} from 'lucide-react';
 import Tooltip from '../../ui/Tooltip';
+import {unlinkRepo, getSettings} from '../../../api/api';
+import Alert from '../../ui/Alert';
+import LinkRepo from './modal/LinkRepo';
+import UnlinkRepo from './modal/UnlinkRepo';
+
+const RepoContainer = ({settings, setSettings, fetchGitStatus}) => {
+    const [loadingAction, setLoadingAction] = useState('');
+    const [showLinkModal, setShowLinkModal] = useState(false);
+    const [showUnlinkRepo, setShowUnlinkRepo] = useState(false);
+
+    const handleLinkRepo = async () => {
+        setLoadingAction('link_repo');
+        setShowLinkModal(true);
+    };
+
+    const handleUnlinkRepo = async removeFiles => {
+        setLoadingAction('unlink_repo');
+        try {
+            const response = await unlinkRepo(removeFiles);
+            if (response.success) {
+                setSettings(null);
+                Alert.success('Repository unlinked successfully');
+                setShowUnlinkRepo(false);
+            } else {
+                Alert.error(response.error || 'Failed to unlink repository');
+            }
+        } catch (error) {
+            Alert.error(
+                'An unexpected error occurred while unlinking the repository'
+            );
+            console.error('Error unlinking repository:', error);
+        } finally {
+            setLoadingAction('');
+        }
+    };
+
+    const onLinkSubmit = async () => {
+        setLoadingAction('');
+        setShowLinkModal(false);
+        const fetchedSettings = await getSettings();
+        setSettings(fetchedSettings);
+        if (fetchedSettings) {
+            await fetchGitStatus();
+        }
+    };
 
-const RepoContainer = ({settings, loadingAction, onLinkRepo, onUnlinkRepo}) => {
     if (!settings) {
         return (
-            <button
-                onClick={onLinkRepo}
-                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>
+            <>
+                <button
+                    onClick={handleLinkRepo}
+                    className='flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors duration-200 ease-in-out text-sm font-medium shadow-md'>
+                    <Link size={16} className='mr-2' />
+                    Link Repository
+                </button>
+                <LinkRepo
+                    isOpen={showLinkModal}
+                    onClose={() => setShowLinkModal(false)}
+                    onSubmit={onLinkSubmit}
+                />
+            </>
         );
     }
 
     return (
         <div className='space-y-4 mb-4'>
-            <div className='dark:bg-gray-800 border border-gray-200 dark:border-gray-700 p-4 rounded-md'>
-                <div className='flex items-center justify-between'>
-                    <div className='flex items-center'>
-                        <h3 className='text-sm font-semibold text-gray-100 mr-2'>
+            <div className='dark:bg-gray-800 border border-gray-200 dark:border-gray-700 p-5 rounded-lg shadow-md'>
+                <div className='flex flex-col sm:flex-row items-start sm:items-center justify-between space-y-3 sm:space-y-0'>
+                    <div className='flex flex-col sm:flex-row sm:items-center'>
+                        <h3 className='text-sm font-semibold text-gray-100 mr-2 mb-1 sm:mb-0'>
                             Connected Repository:
                         </h3>
                         <a
                             href={settings.gitRepo}
                             target='_blank'
                             rel='noopener noreferrer'
-                            className='text-blue-400 hover:text-blue-300 transition-colors text-sm truncate max-w-xs'>
+                            className='text-blue-400 hover:text-blue-300 transition-colors text-sm font-medium truncate max-w-xs sm:max-w-md'>
                             {settings.gitRepo}
                         </a>
                     </div>
                     <Tooltip content='Unlink Repository'>
                         <button
-                            onClick={onUnlinkRepo}
-                            className='flex items-center px-3 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors duration-200 ease-in-out text-xs'
+                            onClick={() => setShowUnlinkRepo(true)}
+                            className='flex items-center px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors duration-200 ease-in-out text-sm font-medium shadow-sm'
                             disabled={loadingAction === 'unlink_repo'}>
                             {loadingAction === 'unlink_repo' ? (
-                                <Loader size={14} className='animate-spin' />
+                                <Loader
+                                    size={16}
+                                    className='animate-spin mr-2'
+                                />
                             ) : (
-                                <Unlink size={14} className='mr-2' />
+                                <Unlink size={16} className='mr-2' />
                             )}
                             Unlink
                         </button>
                     </Tooltip>
                 </div>
             </div>
+            <UnlinkRepo
+                isOpen={showUnlinkRepo}
+                onClose={() => setShowUnlinkRepo(false)}
+                onSubmit={handleUnlinkRepo}
+            />
         </div>
     );
 };

frontend/src/components/settings/git/modal/LinkRepo.jsx

@@ -1,10 +1,10 @@
 import React, {useState} from 'react';
-import Modal from '../ui/Modal';
+import Modal from '../../ui/Modal';
 import {Loader} from 'lucide-react';
-import {cloneRepo} from '../../api/api';
-import Alert from '../ui/Alert';
+import {cloneRepo} from '../../../api/api';
+import Alert from '../../ui/Alert';
 
-const LinkRepoModal = ({isOpen, onClose, onSubmit}) => {
+const LinkRepo = ({isOpen, onClose, onSubmit}) => {
     const [gitRepo, setGitRepo] = useState('');
     const [loading, setLoading] = useState(false);
 
@@ -68,4 +68,4 @@ const LinkRepoModal = ({isOpen, onClose, onSubmit}) => {
     );
 };
 
-export default LinkRepoModal;
+export default LinkRepo;

frontend/src/components/settings/git/modal/UnlinkRepo.jsx

@@ -0,0 +1,57 @@
+// UnlinkModal.js
+import React, {useState} from 'react';
+import PropTypes from 'prop-types';
+import Modal from '../../../ui/Modal';
+
+const UnlinkRepo = ({isOpen, onClose, onSubmit}) => {
+    const [removeFiles, setRemoveFiles] = useState(false);
+
+    const handleUnlink = () => {
+        onSubmit(removeFiles); // Pass removeFiles correctly
+        onClose(); // Close the modal after unlinking
+    };
+
+    return (
+        <Modal isOpen={isOpen} onClose={onClose} title='Unlink Repository'>
+            <div className='space-y-4'>
+                <p className='text-gray-700 dark:text-gray-300'>
+                    Are you sure you want to unlink the repository?
+                </p>
+                <div className='flex items-center'>
+                    <input
+                        type='checkbox'
+                        id='removeFiles'
+                        checked={removeFiles}
+                        onChange={() => setRemoveFiles(!removeFiles)}
+                        className='form-checkbox h-4 w-4 text-red-600 transition duration-150 ease-in-out'
+                    />
+                    <label
+                        htmlFor='removeFiles'
+                        className='ml-2 text-gray-700 dark:text-gray-300'>
+                        Also remove repository files
+                    </label>
+                </div>
+                <div className='flex justify-end space-x-2 mt-4'>
+                    <button
+                        className='px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600 transition-colors duration-200 ease-in-out text-xs'
+                        onClick={onClose}>
+                        Cancel
+                    </button>
+                    <button
+                        className='px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors duration-200 ease-in-out text-xs'
+                        onClick={handleUnlink}>
+                        Unlink
+                    </button>
+                </div>
+            </div>
+        </Modal>
+    );
+};
+
+UnlinkRepo.propTypes = {
+    isOpen: PropTypes.bool.isRequired,
+    onClose: PropTypes.func.isRequired,
+    onSubmit: PropTypes.func.isRequired
+};
+
+export default UnlinkRepo;