Descarga de archivos en multiples formatos

Instalación

npm install usedownloadmunisma

yarn add usedownloadmunisma

Motivación

Consideraciones

El objeto DTO de respuesta debe tener uan serie de propiedades

contentType: tipo de documento application/pdf - application/zip. nombreArchivo: nombre del documento. contenido: byte string del archivo.

Modo de uso

Seleccionables

Existen tres escenarios en los que vamos a estar descargando archivos. La primera será cuando accedamos a la grilla de resultados y en esta podamos seleccionar aquellos que nos interesan. En este caso utilizaremos lo siguiente.

| Objetivo | Menjador de estado | Método | | -------------------- | ------------------ | ----------------- | | Recibos | select | receiptPDF | | Recibos | select | receiptZIP | | - | - | - | | Comprobantes de pago | select | paymentReceiptPDF | | Comprobantes de pago | select | paymentReceiptZIP | | | | |

*Nota: select recibe un array de números de recibos o uno en particular

Desde un link url

La segunda será cuando accedamos a la descarga del archivo desde un link. En este caso utilizaremos lo siguiente.

| Objetivo | Menjador de estado | Método | | ----------------- | ------------------ | ------------- | | Recibos | setId - setToken | receiptByLink | | Recibos | setZip | receiptByLink | | - | - | - | | Recibos de sueldo | setId | salaryReceipt | | | | |

Archivos de licitación

La tercera será para descargar los archivos en formato multiple de las licitaciones. No requiere manejador de estado.

| Objetivo | Método | Parametros | | --------------------- | ---------- | --------------------- | | Archivo de licitación | tenderFile | id: number | | | | nombreArchivo: string |

Extras

Además de estas propiedades el hook retorna el estado de petición isFetching y el porcentaje de descarga en tiempo real progress. De esta manera podemos utilizar en la UI alguna estrategia para mostrarle al usuario el estado actual de descarga de los archivos.

Ejemplo de uso del hook

    import { useEffect   } from 'react'
    import { useDownload } from 'usedownload-dto'
    import Box from '@mui/material/Box';
    import LinearProgress from '@mui/material/LinearProgress';

    export const TableComponent = () => {
        const navigate = useNavigate()
        const handleDownload = useDownload()

        useEffect(() => {
            const tokenParam = searchParams.get('token')
            const idParam = searchParams.get('id')
            const zipParam = searchParams.get('zip')

            const link = tokenParam || idParam || zipParam

            !link && navigate(Paths.ROOT)

            handleDownload.setToken(tokenParam)
            handleDownload.setId(idParam)
            handleDownload.setZip(zipParam)
        }, [])

        if(handleDownload.isFetching)
            return (
                <Box sx={{ width: '100%' }}>
                  <LinearProgress variant="determinate" value={handleDownload.progress} />
                </Box>
            )

        return (
          <>
            <h4>Descarga de archivo por link<h4/>
            <button type="button"
                onClick={handleDownload.receiptByLink}
            >
              Descargar
            </button>
          </>
        )
    };

Desarrolladores

• Esteban Menendez
• Martín Nicolás Paneblanco