misc_pterodactyl-panel/resources/scripts/components/server/files/MassActionsBar.tsx

import React, { useEffect, useState } from 'react';
import tw from 'twin.macro';
import Button from '@/components/elements/Button';
import { useFormikContext } from 'formik';
import Fade from '@/components/elements/Fade';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faFileArchive, faLevelUpAlt, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import useFileManagerSwr from '@/plugins/useFileManagerSwr';
import useFlash from '@/plugins/useFlash';
import compressFiles from '@/api/server/files/compressFiles';
import useServer from '@/plugins/useServer';
import { ServerContext } from '@/state/server';
import ConfirmationModal from '@/components/elements/ConfirmationModal';
import deleteFiles from '@/api/server/files/deleteFiles';

const MassActionsBar = () => {
    const { uuid } = useServer();
    const { mutate } = useFileManagerSwr();
    const { clearFlashes, clearAndAddHttpError } = useFlash();
    const [ loading, setLoading ] = useState(false);
    const [ loadingMessage, setLoadingMessage ] = useState('');
    const [ showConfirm, setShowConfirm ] = useState(false);
    const { values, setFieldValue } = useFormikContext<{ selectedFiles: string[] }>();
    const directory = ServerContext.useStoreState(state => state.files.directory);

    useEffect(() => {
        if (!loading) setLoadingMessage('');
    }, [ loading ]);

    const onClickCompress = () => {
        setLoading(true);
        clearFlashes('files');
        setLoadingMessage('Archiving files...');

        compressFiles(uuid, directory, values.selectedFiles)
            .then(() => mutate())
            .then(() => setFieldValue('selectedFiles', []))
            .catch(error => clearAndAddHttpError({ key: 'files', error }))
            .then(() => setLoading(false));
    };

    const onClickConfirmDeletion = () => {
        setLoading(true);
        setShowConfirm(false);
        clearFlashes('files');
        setLoadingMessage('Deleting files...');

        deleteFiles(uuid, directory, values.selectedFiles)
            .then(() => {
                mutate(files => files.filter(f => values.selectedFiles.indexOf(f.name) < 0), false);
                setFieldValue('selectedFiles', []);
            })
            .catch(error => {
                mutate();
                clearAndAddHttpError({ key: 'files', error });
            })
            .then(() => setLoading(false));
    };

    return (
        <Fade timeout={75} in={values.selectedFiles.length > 0} unmountOnExit>
            <div css={tw`fixed bottom-0 z-50 left-0 right-0 flex justify-center`}>
                <SpinnerOverlay visible={loading} size={'large'} fixed>
                    {loadingMessage}
                </SpinnerOverlay>
                <ConfirmationModal
                    visible={showConfirm}
                    title={'Delete these files?'}
                    buttonText={'Yes, Delete Files'}
                    onConfirmed={onClickConfirmDeletion}
                    onDismissed={() => setShowConfirm(false)}
                >
                    Deleting files is a permanent operation, you cannot undo this action.
                </ConfirmationModal>
                <div css={tw`rounded p-4 mb-6`} style={{ background: 'rgba(0, 0, 0, 0.35)' }}>
                    <Button size={'xsmall'} css={tw`mr-4`}>
                        <FontAwesomeIcon icon={faLevelUpAlt} css={tw`mr-2`}/> Move
                    </Button>
                    <Button
                        size={'xsmall'}
                        css={tw`mr-4`}
                        onClick={onClickCompress}
                    >
                        <FontAwesomeIcon icon={faFileArchive} css={tw`mr-2`}/> Archive
                    </Button>
                    <Button size={'xsmall'} color={'red'} isSecondary onClick={() => setShowConfirm(true)}>
                        <FontAwesomeIcon icon={faTrashAlt} css={tw`mr-2`}/> Delete
                    </Button>
                </div>
            </div>
        </Fade>
    );
};

export default MassActionsBar;