Improve backup mutations

frontend/src/System/Backup/BackupRow.tsx

@@ -24,7 +24,7 @@ interface BackupRowProps {
 }
 
 function BackupRow({ id, type, name, path, size, time }: BackupRowProps) {
-  const deleteBackupMutation = useDeleteBackup(id);
+  const { deleteBackup } = useDeleteBackup(id);
   const [isRestoreModalOpen, setIsRestoreModalOpen] = useState(false);
   const [isConfirmDeleteModalOpen, setIsConfirmDeleteModalOpen] =
     useState(false);
@@ -67,7 +67,7 @@ function BackupRow({ id, type, name, path, size, time }: BackupRowProps) {
   }, []);
 
   const handleConfirmDeletePress = useCallback(() => {
-    deleteBackupMutation.mutate(undefined, {
+    deleteBackup(undefined, {
       onSuccess: () => {
         setIsConfirmDeleteModalOpen(false);
       },
@@ -75,7 +75,7 @@ function BackupRow({ id, type, name, path, size, time }: BackupRowProps) {
         console.error('Failed to delete backup:', error);
       },
     });
-  }, [deleteBackupMutation]);
+  }, [deleteBackup]);
 
   return (
     <TableRow key={id}>

frontend/src/System/Backup/RestoreBackupModalContent.tsx

@@ -82,16 +82,10 @@ function RestoreBackupModalContent({
   const { isRestarting } = useSelector((state: AppState) => state.app);
   const dispatch = useDispatch();
 
-  const {
-    mutate: restoreBackupById,
-    isPending: isRestoreBackupPending,
-    error: restoreBackupError,
-  } = useRestoreBackup(id || 0);
-  const {
-    mutate: uploadBackupFile,
-    isPending: isUploadBackupPending,
-    error: uploadBackupError,
-  } = useRestoreBackupUpload();
+  const { restoreBackupById, isRestoringBackup, restoreBackupError } =
+    useRestoreBackup(id || 0);
+  const { uploadBackup, isUploadingBackup, uploadBackupError } =
+    useRestoreBackupUpload();
   const { mutate: restart } = useRestart();
 
   const [path, setPath] = useState('');
@@ -100,7 +94,7 @@ function RestoreBackupModalContent({
   const [isRestarted, setIsRestarted] = useState(false);
   const [isReloading, setIsReloading] = useState(false);
 
-  const isRestoring = isRestoreBackupPending || isUploadBackupPending;
+  const isRestoring = isRestoringBackup || isUploadingBackup;
   const restoreError = restoreBackupError || uploadBackupError;
   const wasRestoring = usePrevious(isRestoring);
   const wasRestarting = usePrevious(isRestarting);
@@ -123,9 +117,9 @@ function RestoreBackupModalContent({
     } else if (file) {
       const formData = new FormData();
       formData.append('restore', file);
-      uploadBackupFile(formData);
+      uploadBackup(formData);
     }
-  }, [id, file, restoreBackupById, uploadBackupFile]);
+  }, [id, file, restoreBackupById, uploadBackup]);
 
   useEffect(() => {
     if (wasRestoring && !isRestoring && !restoreError) {

frontend/src/System/Backup/useBackups.ts

@@ -22,7 +22,7 @@ export default useBackups;
 export const useDeleteBackup = (id: number) => {
   const queryClient = useQueryClient();
 
-  return useApiMutation<object, void>({
+  const { mutate, isPending, error } = useApiMutation<object, void>({
     path: `/system/backup/${id}`,
     method: 'DELETE',
     mutationOptions: {
@@ -31,6 +31,12 @@ export const useDeleteBackup = (id: number) => {
       },
     },
   });
+
+  return {
+    deleteBackup: mutate,
+    isDeleting: isPending,
+    deleteError: error,
+  };
 };
 
 interface RestoreBackupResponse {
@@ -40,7 +46,10 @@ interface RestoreBackupResponse {
 export const useRestoreBackup = (id: number) => {
   const queryClient = useQueryClient();
 
-  return useApiMutation<RestoreBackupResponse, void>({
+  const { mutate, isPending, error } = useApiMutation<
+    RestoreBackupResponse,
+    void
+  >({
     path: `/system/backup/restore/${id}`,
     method: 'POST',
     mutationOptions: {
@@ -49,12 +58,22 @@ export const useRestoreBackup = (id: number) => {
       },
     },
   });
+
+  return {
+    restoreBackupById: mutate,
+    isRestoringBackup: isPending,
+    restoreBackupError: error,
+  };
 };
 
 export const useRestoreBackupUpload = () => {
   const queryClient = useQueryClient();
 
-  return useMutation<RestoreBackupResponse, Error, FormData>({
+  const { mutate, isPending, error } = useMutation<
+    RestoreBackupResponse,
+    Error,
+    FormData
+  >({
     mutationFn: async (formData: FormData) => {
       const response = await fetch(
         `${window.Sonarr.urlBase}/api/v5/system/backup/restore/upload`,
@@ -79,4 +98,10 @@ export const useRestoreBackupUpload = () => {
       queryClient.invalidateQueries({ queryKey: ['/system/backup'] });
     },
   });
+
+  return {
+    uploadBackup: mutate,
+    isUploadingBackup: isPending,
+    uploadBackupError: error,
+  };
 };