CollectionDowloadButton.js

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import GetAppIcon from '@material-ui/icons/GetApp';
import Button from '@material-ui/core/Button';
import styled from 'styled-components';
import { apiUrl, apiDomain } from '../env';
import { getRequest } from './HelperFunctions/getAxiosConfig'


const DowloadButton = (props) => {
	const [download_url, setDownloadUrl] = useState('');

	useEffect(() => {
		const body = {
			"package": {
				"object": [{ "type": "Collection", "id": props.id }]
			}
		};
		axios
			.post(apiUrl + '/package', body)
			.catch(err => {
				if (err.response && err.response.status === 302) {
					setDownloadUrl(apiDomain + '/' + err.response.data.url);
				}
			});
	}, [props.id]);

	const handleDowloadCollection = () => {
		// there is no error controller here because the router 
		///:type/:id/download is always returning error
		getRequest(
			`/collections/${props.id}/download`,
			(data, header) => {
			},
			(error) => {
			}
		)
	}

	return (
		<>
			<DownloadAnchor href={download_url} >
				<DownloadButton
					variant="outlined"
					color="primary"
					startIcon={<GetAppIcon fontSize="large" />}
					size="small"
				>
					<ButtonText onClick={handleDowloadCollection}>Baixar Coleção</ButtonText>
				</DownloadButton>
			</DownloadAnchor>
		</>
	)
}

const ButtonText = styled.span`
	font-weight: bolder;
	font-size: 1.2em;
`
const DownloadButton = styled(Button)`
	padding-left: 10;
	padding-right: 10;
	width: 250px;
`
const DownloadAnchor = styled.a`
	text-decoration: none !important;
`

export default DowloadButton;