<commit_before>import React, { useEffect, useState } from 'react';
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';

export default () => {
    const { uuid, featureLimits } = 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 <Spinner size={'large'} centered={true}/>;
    }

    return (
        <PageContentBlock>
            <FlashMessageRender byKey={'backups'} className={'mb-4'}/>
            {!backups.length ?
                <p className="text-center text-sm text-neutral-400">
                    There are no backups stored for this server.
                </p>
                :
                <div>
                    {backups.map((backup, index) => <BackupRow
                        key={backup.uuid}
                        backup={backup}<commit_msg>Add using x of x when limit > 0<commit_after>import React, { useEffect, useState } from 'react';
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';

export default () => {
    const { uuid, featureLimits } = 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 <Spinner size={'large'} centered={true}/>;
    }

    return (
        <PageContentBlock>
            <FlashMessageRender byKey={'backups'} className={'mb-4'}/>
            {featureLimits.backups >= 0 &&
                <p className="text-center text-md text-neutral-400">
                    You are currently using {backups.length} of {featureLimits.backups} backups.
                </p>
            }
            {!backups.length ?
                <p className="text-center text-sm text-neutral-400">
                    There are no backups stored for this server.
                </p>
                :
                <div>
                    {backups.map((backup, index) => <BackupRow
                        key={backup.uuid}
                        backup={backup}
{'fraction_non_alphanumeric': 0.13178838951310862, 'fraction_numerical': 0.0035112359550561797, 'mean_word_length': 2.549003322259136, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 35, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2275503', 'n_tokens_mistral': 1179, 'n_tokens_neox': 1139, 'n_words': 259}