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'
import Snackbar from '@material-ui/core/Snackbar';
import MuiAlert from '@material-ui/lab/Alert';

function Alert(props) {
	return <MuiAlert elevation={6} variant="filled" {...props} />;
}

const DowloadButton = (props) => {
	const [download_url, setDownloadUrl] = useState('');
	const [snackInfo, setSnackInfo] = useState({
		open: false,
		text: "",
		severity: "",
	});

	useEffect(() => {
		if (props.id && props.id !== "0") {
			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 = (e) => {
		// there is no error controller here because the router 
		///:type/:id/download is always returning error
		e.preventDefault()

		let snackInfo = {}
		if (download_url) {
			window.open(download_url, '_blank')
			snackInfo = {
				open: true,
				text: "A coleção está sendo baixada...",
				severity: "success",
			}
			handleSnackInfo(snackInfo)
		}
		else {
			snackInfo = {
				open: true,
				text: "Não foi possível baixar a coleção",
				severity: "warning",
			}
			handleSnackInfo(snackInfo)
		}
		getRequest(
			`/collections/${props.id}/download`,
			(data, header) => {
			},
			(error) => {
			}
		)
	}

	const handleSnackInfo = (info) => {
		setSnackInfo({ ...info })
	}

	const handleCloseSnack = () => {
		const snackInfo = {
			open: false,
			text: "",
			severity: "",
		}
		handleSnackInfo(snackInfo)
	}

	return (
		<>
			<Snackbar
				open={snackInfo.open}
				autoHideDuration={6000}
				onClose={handleCloseSnack}
				anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
			>
				<Alert onClose={handleCloseSnack} severity={snackInfo.severity}>
					{snackInfo.text}
				</Alert>
			</Snackbar>
			<DownloadButton
				variant="outlined"
				color="primary"
				startIcon={<GetAppIcon fontSize="large" />}
				size="small"
				onClick={handleDowloadCollection}
			>
				<ButtonText>Baixar Coleção</ButtonText>
			</DownloadButton>
		</>
	)
}

const ButtonText = styled.span`
	font-weight: bolder;
	font-size: 1.2em;
`
const DownloadButton = styled(Button)`
	padding-left: 10;
	padding-right: 10;
	width: 250px;
`

export default DowloadButton;