asb_cloud_front/src/components/Documents.jsx

import {Table, DatePicker, Button, Modal, ConfigProvider} from 'antd'
import { UploadOutlined } from '@ant-design/icons'
import DocumentCreationForm from './modalWindows/DocumentCreationForm'
import { FileService } from '../services/api'
import {useState, useEffect} from "react"
import {useParams} from 'react-router-dom'
import notify from './notify'
import LoaderPortal from './LoaderPortal'
import locale from "antd/lib/locale/ru_RU"
import moment from 'moment'

const pageSize = 12
const {RangePicker} = DatePicker;


export default function Documents({selectedFileCategory}) {
  let {id} = useParams()

  const [page, setPage] = useState(1)
  const [range, setRange] = useState([])
  const [pagination, setPagination] = useState(null)
  const [files, setFiles] = useState([])
  const [isModalVisible, setIsModalVisible] = useState(false)
  const [isTableUpdating, setTableUpdating] = useState(false)

  const [loader, setLoader] = useState(false)

  const handleFileNameCLick = async (event, row) => {    
    const element = event.target

    if(!element.href.length) {
      try {
        setLoader(true)

        await fetch(`/api/files/${id}/${row.id}`, {
          headers: {
            Authorization: 'Bearer ' + localStorage['token']
          }
        })
        .then(async (response) => {
          const blob = await response.blob();
  
          let reader = new FileReader();
          reader.readAsDataURL(blob);
          reader.onload = function (e) {
            element.href = e.target.result
            element.click()
          };
          setLoader(false)
        });
      } catch (error) {
        notify(`Не удалось скачать файл ${row}`, 'error')
        console.log(error)
      }
    }
  }
  
  const columns = [
    {
        title: 'Документ',
        key: 'document',
        dataIndex: 'name',
        render: (name, row) => 
          <a onClick={ev => handleFileNameCLick(ev, row)} download={name}>{name}</a>
    },
    {
        title: 'Дата загрузки',
        key: 'uploadDate',
        dataIndex: 'uploadDate',
        render: (item) => moment.utc(item).local().format('DD MMM YYYY, HH:mm:ss')
    },
    {
        title: 'Ф.И.О.',
        key: 'userName',
        dataIndex: 'userName',
    }
  ];

  const openModal = () => {
    setIsModalVisible(true)
  }

  const closeModal = () => {
    setIsModalVisible(false)
  }

  const onChangeRange = (range) => {
    setRange(range)
  }

  useEffect(() => {
    const GetDocuments = async () => {
      setLoader(true)

      try {
        let begin = null
        let end = null
        if (range?.length > 1) {
          begin = range[0].toISOString()
          end = range[1].toISOString()
        }

        await FileService.getFilesInfo(
            `${id}`,
            (page - 1) * pageSize,
            pageSize,
            selectedFileCategory,
            begin,
            end
            ).then((paginatedFiles) => {
                setFiles(paginatedFiles?.items.map(f => {
                    return {
                        key: f.id,
                        begin: f.date,
                        ...f
                    }
                }))

                setPagination({
                    total: paginatedFiles?.count,
                    current: Math.floor(paginatedFiles?.skip / pageSize),
                })

                setTableUpdating(false)
                setLoader(false)
            }
        )
      } catch (ex) {
        notify(`Не удалось загрузить файлы по скважине "${id}"`, 'error')
        console.log(ex)
      }
    }
    GetDocuments()
  }, [id, range, page, selectedFileCategory, isTableUpdating])

  return (
    <div>
        <div className='filter-group'>
          <h3 className='filter-group-heading'>Фильтр документов:</h3>
          <ConfigProvider locale={locale}>
              <RangePicker
                  showTime
                  onChange={onChangeRange}
              />
          </ConfigProvider>
        </div>
        <LoaderPortal show={loader}></LoaderPortal>
        <div>&nbsp;</div>

        <Button
          icon={<UploadOutlined />} 
          onClick={openModal}
        >Загрузить файл</Button>
        <Modal
          title="Загрузить файл"
          centered
          visible={isModalVisible}
          onCancel={closeModal}
          width={500}
          footer={null}
        >
          <div>
            <DocumentCreationForm 
              selectedFileCategory={selectedFileCategory} 
              closeModalHandler = {() => {
                setIsModalVisible(false)
                setTableUpdating(true)
              }}> 
            </DocumentCreationForm>
          </div>
      </Modal>
      <div>&nbsp;</div>
      <Table
        columns={columns}
        dataSource={files}
        size={'small'}
        pagination={{
          pageSize: pageSize,
          showSizeChanger: false,
          total: pagination?.total,
          current: page,
          onChange: (page) => setPage(page)
        }}
        rowKey={(record) => record.id}
      />
    </div>);
}