Support deleting a task from a schedule

resources/scripts/components/server/schedules/ScheduleTaskRow.tsx

@@ -1,17 +1,49 @@
-import React from 'react';
-import { Task } from '@/api/server/schedules/getServerSchedules';
+import React, { useState } from 'react';
+import { Schedule, Task } from '@/api/server/schedules/getServerSchedules';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTrashAlt } from '@fortawesome/free-solid-svg-icons/faTrashAlt';
 import { faCode } from '@fortawesome/free-solid-svg-icons/faCode';
 import { faToggleOn } from '@fortawesome/free-solid-svg-icons/faToggleOn';
+import ConfirmTaskDeletionModal from '@/components/server/schedules/ConfirmTaskDeletionModal';
+import { ServerContext } from '@/state/server';
+import { Actions, useStoreActions } from 'easy-peasy';
+import { ApplicationStore } from '@/state';
+import deleteScheduleTask from '@/api/server/schedules/deleteScheduleTask';
+import { httpErrorToHuman } from '@/api/http';
+import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 
 interface Props {
+    schedule: number;
     task: Task;
+    onTaskRemoved: () => void;
 }
 
-export default ({ task }: Props) => {
+export default ({ schedule, task, onTaskRemoved }: Props) => {
+    const [visible, setVisible] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
+    const { clearFlashes, addError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
+
+    const onConfirmDeletion = () => {
+        setIsLoading(true);
+        clearFlashes('schedules');
+        deleteScheduleTask(uuid, schedule, task.id)
+            .then(() => onTaskRemoved())
+            .catch(error => {
+                console.error(error);
+                setIsLoading(false);
+                addError({ message: httpErrorToHuman(error), key: 'schedules' });
+            });
+    };
+
     return (
         <div className={'flex items-center'}>
+            <SpinnerOverlay visible={isLoading} fixed={true} size={'large'}/>
+            <ConfirmTaskDeletionModal
+                visible={visible}
+                onDismissed={() => setVisible(false)}
+                onConfirmed={() => onConfirmDeletion()}
+            />
             <FontAwesomeIcon icon={task.action === 'command' ? faCode : faToggleOn} className={'text-lg text-white'}/>
             <div className={'flex-1'}>
                 <p className={'ml-6 text-neutral-300 mb-2 uppercase text-xs'}>
@@ -34,7 +66,9 @@ export default ({ task }: Props) => {
             <div>
                 <a
                     href={'#'}
+                    aria-label={'Delete scheduled task'}
                     className={'text-sm p-2 text-neutral-500 hover:text-red-600 transition-color duration-150'}
+                    onClick={() => setVisible(true)}
                 >
                     <FontAwesomeIcon icon={faTrashAlt}/>
                 </a>