import React, { useCallback, useEffect, useState } from 'react'; import { useHistory, useParams } from 'react-router-dom'; import getServerSchedule from '@/api/server/schedules/getServerSchedule'; import Spinner from '@/components/elements/Spinner'; import FlashMessageRender from '@/components/FlashMessageRender'; import EditScheduleModal from '@/components/server/schedules/EditScheduleModal'; import NewTaskButton from '@/components/server/schedules/NewTaskButton'; import DeleteScheduleButton from '@/components/server/schedules/DeleteScheduleButton'; import Can from '@/components/elements/Can'; import useFlash from '@/plugins/useFlash'; import { ServerContext } from '@/state/server'; import PageContentBlock from '@/components/elements/PageContentBlock'; import tw from 'twin.macro'; import { Button } from '@/components/elements/button/index'; import ScheduleTaskRow from '@/components/server/schedules/ScheduleTaskRow'; import isEqual from 'react-fast-compare'; import { format } from 'date-fns'; import ScheduleCronRow from '@/components/server/schedules/ScheduleCronRow'; import RunScheduleButton from '@/components/server/schedules/RunScheduleButton'; interface Params { id: string; } const CronBox = ({ title, value }: { title: string; value: string }) => (

{title}

{value}

); const ActivePill = ({ active }: { active: boolean }) => ( {active ? 'Active' : 'Inactive'} ); export default () => { const history = useHistory(); const { id: scheduleId } = useParams(); const id = ServerContext.useStoreState(state => state.server.data!.id); const uuid = ServerContext.useStoreState(state => state.server.data!.uuid); const { clearFlashes, clearAndAddHttpError } = useFlash(); const [ isLoading, setIsLoading ] = useState(true); const [ showEditModal, setShowEditModal ] = useState(false); const schedule = ServerContext.useStoreState(st => st.schedules.data.find(s => s.id === Number(scheduleId)), isEqual); const appendSchedule = ServerContext.useStoreActions(actions => actions.schedules.appendSchedule); useEffect(() => { if (schedule?.id === Number(scheduleId)) { setIsLoading(false); return; } clearFlashes('schedules'); getServerSchedule(uuid, Number(scheduleId)) .then(schedule => appendSchedule(schedule)) .catch(error => { console.error(error); clearAndAddHttpError({ error, key: 'schedules' }); }) .then(() => setIsLoading(false)); }, [ scheduleId ]); const toggleEditModal = useCallback(() => { setShowEditModal(s => !s); }, []); return ( {!schedule || isLoading ? : <>

{schedule.name} {schedule.isProcessing ? Processing : }

Last run at:  {schedule.lastRunAt ? format(schedule.lastRunAt, 'MMM do \'at\' h:mma') : n/a } Next run at:  {schedule.nextRunAt ? format(schedule.nextRunAt, 'MMM do \'at\' h:mma') : n/a }

Edit
{schedule.tasks.length > 0 ? schedule.tasks.sort((a, b) => a.sequenceId === b.sequenceId ? 0 : (a.sequenceId > b.sequenceId ? 1 : -1)).map(task => ( )) : null }
history.push(`/server/${id}/schedules`)} /> {schedule.tasks.length > 0 && }
}
); };