asb_cloud_front/src/pages/FileDownload.jsx

import { Link, useLocation, useNavigate, useParams } from 'react-router-dom'
import { memo, useCallback, useEffect, useMemo, useState } from 'react'
import { InfoCircleFilled, CloseCircleOutlined } from '@ant-design/icons'
import { Button, Result, Typography } from 'antd'

import { downloadFile, invokeWebApiWrapperAsync } from '@components/factory'
import { withPermissions } from '@utils'
import { FileService } from '@api'

const { Paragraph, Text } = Typography

export const getLinkToFile = (fileInfo) => `/file_download/${fileInfo.id}`

const FileDownload = memo(function FileDownload() {
    const { idFile } = useParams()
    const [file, setFile] = useState({})
    const [isError, setIsError] = useState(false)

    const navigate = useNavigate()
    const location = useLocation()
    const isFirstOpenApp = useMemo(() => location.key === 'default', [location])

    useEffect(() => {
        invokeWebApiWrapperAsync(
            async () => {
                const file = await FileService.getFileInfo(idFile)
                setFile(file)
            },
            null,
            () => {
                setIsError(true)
                return 'Не удалось получить информацию о файле'
            },
            { actionName: 'Получение информации о файле' }
        )
    }, [idFile])

    const download = useCallback(async () => {
        if (!file || !await downloadFile(file))
            setIsError(true)
    }, [file])
    

    return (
        <Result
            icon={<InfoCircleFilled style={{ color: '#1890ff' }} />}
            title={(
                <>
                    Вы перешли к странице загрузки файла!
                    <br />
                    Файл "{file?.name ?? ('№' + idFile)}".
                </>
            )}
            // subTitle={}
            extra={(
                <>
                    {isFirstOpenApp
                        ? <Button type={'ghost'} onClick={() => navigate('/')}>Вернуться на главную</Button>
                        : <Button type={'ghost'} onClick={() => navigate(-1)}>Вернуться на страницу документов</Button>
                    }
                    <Button type={'primary'} onClick={download}>Загрузить</Button>
                </>
            )}
        >
            {isError && (
                <div className={'desc'}>
                    <Paragraph>
                        <Text strong style={{ fontSize: 16 }}>Возможные причины ошибки при попытке скачивания файла:</Text>
                    </Paragraph>
                    <Paragraph>
                        <CloseCircleOutlined style={{ color: 'red' }} />
                        &nbsp;У вас отсутствует доступ к файлу.&nbsp;
                        <Typography.Link href={'mailto://support@digitaldrilling.ru'} target={'_blank'}>
                            Обратиться в поддержку &gt;
                        </Typography.Link>
                    </Paragraph>
                    <Paragraph>
                        <CloseCircleOutlined style={{ color: 'red' }} />
                        &nbsp;Файла не существует.&nbsp;
                        <Link to={'#'} onClick={() => navigate(-1)}>Вернуться назад &gt;</Link>
                    </Paragraph>
                    <Paragraph>
                        <CloseCircleOutlined style={{ color: 'red' }} />
                        &nbsp;Разрешения не обновились.&nbsp;
                        <Link to={'/login'}>Перезайти в аккаунт &gt;</Link>
                    </Paragraph>
                </div>
            )}
        </Result>
    )
})

FileDownload.displayName = 'FileDownloadMemo'

export default withPermissions(FileDownload, ['File.get'])