import React, { useEffect, useState } from 'react'; import { Helmet } from 'react-helmet'; import Spinner from '@/components/elements/Spinner'; import getServerBackups from '@/api/server/backups/getServerBackups'; import useServer from '@/plugins/useServer'; import useFlash from '@/plugins/useFlash'; import { httpErrorToHuman } from '@/api/http'; import Can from '@/components/elements/Can'; import CreateBackupButton from '@/components/server/backups/CreateBackupButton'; import FlashMessageRender from '@/components/FlashMessageRender'; import BackupRow from '@/components/server/backups/BackupRow'; import { ServerContext } from '@/state/server'; import PageContentBlock from '@/components/elements/PageContentBlock'; import tw from 'twin.macro'; export default () => { const { uuid, featureLimits, name: serverName } = useServer(); const { addError, clearFlashes } = useFlash(); const [ loading, setLoading ] = useState(true); const backups = ServerContext.useStoreState(state => state.backups.data); const setBackups = ServerContext.useStoreActions(actions => actions.backups.setBackups); useEffect(() => { clearFlashes('backups'); getServerBackups(uuid) .then(data => setBackups(data.items)) .catch(error => { console.error(error); addError({ key: 'backups', message: httpErrorToHuman(error) }); }) .then(() => setLoading(false)); }, []); if (backups.length === 0 && loading) { return ; } return ( {serverName} | Backups {!backups.length ?

There are no backups stored for this server.

:
{backups.map((backup, index) => 0 ? tw`mt-2` : undefined} />)}
} {featureLimits.backups === 0 &&

Backups cannot be created for this server.

} {(featureLimits.backups > 0 && backups.length > 0) &&

{backups.length} of {featureLimits.backups} backups have been created for this server.

} {featureLimits.backups > 0 && featureLimits.backups !== backups.length &&
}
); };