CollectionDowloadButton.js

import React, { useContext, 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 FollowCollectionButton from './FollowCollectionButton.js';
import { Store } from '../Store.js'
import { Grid } from '@material-ui/core';

const DowloadButton = (props) => {
	const { state } = useContext(Store);
	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]);
	return (
		<>
			<DownloadAnchor href={download_url} >
				<DownloadButton
					variant="outlined"
					color="primary"
					startIcon={<GetAppIcon fontSize="large" />}
					size="small"
				>
					<ButtonText>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;