From e318f04f280df4bed2d8a22d9d6b10d6e1a574e7 Mon Sep 17 00:00:00 2001
From: Sam Chau <chaucted@gmail.com>
Date: Fri, 10 Jan 2025 00:18:01 +1030
Subject: [PATCH] feat: add SyncModal component for initial sync confirmation
 and integrate with ArrModal

---
 .../src/components/settings/arrs/ArrModal.jsx | 42 ++++---------
 .../components/settings/arrs/SyncModal.jsx    | 59 +++++++++++++++++++
 frontend/src/hooks/useArrModal.js             |  6 +-
 3 files changed, 75 insertions(+), 32 deletions(-)
 create mode 100644 frontend/src/components/settings/arrs/SyncModal.jsx

diff --git a/frontend/src/components/settings/arrs/ArrModal.jsx b/frontend/src/components/settings/arrs/ArrModal.jsx
index c32a325..a0752da 100644
--- a/frontend/src/components/settings/arrs/ArrModal.jsx
+++ b/frontend/src/components/settings/arrs/ArrModal.jsx
@@ -3,6 +3,7 @@ import {Plus, TestTube, Loader, Save, X, Trash, Check} from 'lucide-react';
 import Modal from '@ui/Modal';
 import {useArrModal} from '@hooks/useArrModal';
 import DataSelectorModal from './DataSelectorModal';
+import SyncModal from './SyncModal';
 
 const ArrModal = ({isOpen, onClose, onSubmit, editingArr}) => {
     const {
@@ -28,7 +29,8 @@ const ArrModal = ({isOpen, onClose, onSubmit, editingArr}) => {
         handleDelete,
         showSyncConfirm,
         setShowSyncConfirm,
-        handleManualSync
+        handleManualSync,
+        isInitialSyncing
     } = useArrModal({isOpen, onSubmit, editingArr});
 
     const arrTypes = [
@@ -448,41 +450,19 @@ const ArrModal = ({isOpen, onClose, onSubmit, editingArr}) => {
                     error={errors.data_to_sync}
                 />
                 {showSyncConfirm && (
-                    <Modal
+                    <SyncModal
                         isOpen={showSyncConfirm}
                         onClose={() => {
                             setShowSyncConfirm(false);
                             onSubmit();
                         }}
-                        title='Run Initial Sync'
-                        width='md'>
-                        <div className='space-y-4'>
-                            <p className='text-gray-700 dark:text-gray-300'>
-                                Would you like to run an initial sync now to get
-                                started?
-                            </p>
-                            <div className='flex justify-end space-x-3'>
-                                <button
-                                    type='button'
-                                    onClick={() => {
-                                        setShowSyncConfirm(false);
-                                        onSubmit();
-                                    }}
-                                    className='px-3 py-2 text-sm rounded-lg bg-gray-200 hover:bg-gray-300 
-                             dark:bg-gray-700 dark:hover:bg-gray-600 
-                             text-gray-700 dark:text-gray-200 font-medium transition-colors'>
-                                    Skip
-                                </button>
-                                <button
-                                    type='button'
-                                    onClick={handleManualSync}
-                                    className='px-3 py-2 text-sm rounded-lg bg-blue-600 hover:bg-blue-700 
-                             text-white font-medium transition-colors'>
-                                    Start Sync
-                                </button>
-                            </div>
-                        </div>
-                    </Modal>
+                        onSkip={() => {
+                            setShowSyncConfirm(false);
+                            onSubmit();
+                        }}
+                        onSync={handleManualSync}
+                        isSyncing={isInitialSyncing}
+                    />
                 )}
             </form>
         </Modal>
diff --git a/frontend/src/components/settings/arrs/SyncModal.jsx b/frontend/src/components/settings/arrs/SyncModal.jsx
new file mode 100644
index 0000000..c3a30cf
--- /dev/null
+++ b/frontend/src/components/settings/arrs/SyncModal.jsx
@@ -0,0 +1,59 @@
+// SyncModal.jsx
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Loader} from 'lucide-react';
+import Modal from '@ui/Modal';
+
+const SyncModal = ({isOpen, onClose, onSync, onSkip, isSyncing}) => {
+    return (
+        <Modal
+            isOpen={isOpen}
+            onClose={onClose}
+            title='Run Initial Sync'
+            width='md'
+            footer={
+                <div className='flex justify-end space-x-3'>
+                    <button
+                        type='button'
+                        onClick={onSkip}
+                        disabled={isSyncing}
+                        className='px-3 py-2 text-sm rounded-lg bg-gray-200 hover:bg-gray-300 
+                                 dark:bg-gray-700 dark:hover:bg-gray-600 
+                                 text-gray-700 dark:text-gray-200 font-medium transition-colors
+                                 disabled:opacity-50 disabled:cursor-not-allowed'>
+                        Skip
+                    </button>
+                    <button
+                        type='button'
+                        onClick={onSync}
+                        disabled={isSyncing}
+                        className='flex items-center px-3 py-2 text-sm rounded-lg bg-blue-600 hover:bg-blue-700 
+                                 disabled:opacity-50 disabled:cursor-not-allowed
+                                 text-white font-medium transition-colors'>
+                        {isSyncing ? (
+                            <>
+                                <Loader className='w-3.5 h-3.5 mr-2 animate-spin' />
+                                Syncing...
+                            </>
+                        ) : (
+                            'Start Sync'
+                        )}
+                    </button>
+                </div>
+            }>
+            <p className='text-gray-700 dark:text-gray-300'>
+                Would you like to run an initial sync now to get started?
+            </p>
+        </Modal>
+    );
+};
+
+SyncModal.propTypes = {
+    isOpen: PropTypes.bool.isRequired,
+    onClose: PropTypes.func.isRequired,
+    onSync: PropTypes.func.isRequired,
+    onSkip: PropTypes.func.isRequired,
+    isSyncing: PropTypes.bool.isRequired
+};
+
+export default SyncModal;
diff --git a/frontend/src/hooks/useArrModal.js b/frontend/src/hooks/useArrModal.js
index 1a41aa1..cef7a08 100644
--- a/frontend/src/hooks/useArrModal.js
+++ b/frontend/src/hooks/useArrModal.js
@@ -40,6 +40,7 @@ export const useArrModal = ({isOpen, onSubmit, editingArr}) => {
     const [testConfirm, setTestConfirm] = useState(false);
     const [isDataDrawerOpen, setIsDataDrawerOpen] = useState(false);
     const [showSyncConfirm, setShowSyncConfirm] = useState(false);
+    const [isInitialSyncing, setIsInitialSyncing] = useState(false);
 
     useEffect(() => {
         if (editingArr) {
@@ -236,6 +237,7 @@ export const useArrModal = ({isOpen, onSubmit, editingArr}) => {
     };
 
     const handleManualSync = async () => {
+        setIsInitialSyncing(true);
         try {
             const configId = editingArr ? editingArr.id : result.id;
             const syncResult = await triggerSync(configId);
@@ -248,6 +250,7 @@ export const useArrModal = ({isOpen, onSubmit, editingArr}) => {
         } catch (error) {
             Alert.error('Failed to start manual sync');
         } finally {
+            setIsInitialSyncing(false);
             setShowSyncConfirm(false);
             onSubmit();
         }
@@ -376,6 +379,7 @@ export const useArrModal = ({isOpen, onSubmit, editingArr}) => {
         handleDelete,
         showSyncConfirm,
         setShowSyncConfirm,
-        handleManualSync
+        handleManualSync,
+        isInitialSyncing
     };
 };