git-sync/profilarr
1
0
Fork 0
mirror of https://github.com/Dictionarry-Hub/profilarr.git synced 2026-01-22 19:01:02 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: add SyncModal component for initial sync confirmation and integrate with ArrModal

Browse Source
This commit is contained in:
Sam Chau
2025-01-10 00:18:01 +10:30
parent e497245437
commit e318f04f28
3 changed files with 75 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
frontend/src/components/settings/arrs/ArrModal.jsx
View File

@@ -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>

59
frontend/src/components/settings/arrs/SyncModal.jsx Normal file
View File

@@ -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;

6
frontend/src/hooks/useArrModal.js
View File

@@ -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
};
};