import React, { useEffect, useState } from 'react'; import getServerSchedules from '@/api/server/schedules/getServerSchedules'; import { ServerContext } from '@/state/server'; import Spinner from '@/components/elements/Spinner'; import { RouteComponentProps } from 'react-router-dom'; import FlashMessageRender from '@/components/FlashMessageRender'; import ScheduleRow from '@/components/server/schedules/ScheduleRow'; import { httpErrorToHuman } from '@/api/http'; import EditScheduleModal from '@/components/server/schedules/EditScheduleModal'; import Can from '@/components/elements/Can'; import useServer from '@/plugins/useServer'; import useFlash from '@/plugins/useFlash'; import PageContentBlock from '@/components/elements/PageContentBlock'; import tw from 'twin.macro'; import GreyRowBox from '@/components/elements/GreyRowBox'; import Button from '@/components/elements/Button'; export default ({ match, history }: RouteComponentProps) => { const { uuid } = useServer(); const { clearFlashes, addError } = useFlash(); const [ loading, setLoading ] = useState(true); const [ visible, setVisible ] = useState(false); const schedules = ServerContext.useStoreState(state => state.schedules.data); const setSchedules = ServerContext.useStoreActions(actions => actions.schedules.setSchedules); useEffect(() => { clearFlashes('schedules'); getServerSchedules(uuid) .then(schedules => setSchedules(schedules)) .catch(error => { addError({ message: httpErrorToHuman(error), key: 'schedules' }); console.error(error); }) .then(() => setLoading(false)); }, []); return ( {(!schedules.length && loading) ? : <> { schedules.length === 0 ?

There are no schedules configured for this server.

: schedules.map(schedule => ( { e.preventDefault(); history.push(`${match.url}/${schedule.id}`, { schedule }); }} > )) }
{visible && setVisible(false)}/>}
}
); };