feat: add manual sync functionality with confirmation modal in ArrModal component

This commit is contained in:
Sam Chau
2025-01-09 19:46:41 +10:30
parent 2c19df5503
commit fba319eee2
4 changed files with 125 additions and 4 deletions

View File

@@ -25,7 +25,10 @@ const ArrModal = ({isOpen, onClose, onSubmit, editingArr}) => {
handleTagInputKeyDown,
handleTestConnection,
handleSubmit,
handleDelete
handleDelete,
showSyncConfirm,
setShowSyncConfirm,
handleManualSync
} = useArrModal({isOpen, onSubmit, editingArr});
const arrTypes = [
@@ -444,6 +447,43 @@ const ArrModal = ({isOpen, onClose, onSubmit, editingArr}) => {
onDataToggle={handleDataToggle}
error={errors.data_to_sync}
/>
{showSyncConfirm && (
<Modal
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>
)}
</form>
</Modal>
);