import React from 'react'; import PropTypes from 'prop-types'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faTimes } from '@fortawesome/free-solid-svg-icons'; import RequestProgressElement from './RequestProgressElement'; import '../css/RequestProgress.css'; export default function RequestProgress({ clearRequests, uploadRequests }) { return ( <div className="request-progress-container"> <div className="progress-header"> Upload Progress <button type="button" className="close-progress-button" onClick={() => clearRequests()}> <FontAwesomeIcon className="close-progress-button" icon={faTimes} size="lg" /> </button> </div> <div className="progress-content-container"> {uploadRequests.map((requested) => ( <RequestProgressElement requested={requested} /> ))} </div> </div> ); } RequestProgress.propTypes = { clearRequests: PropTypes.func.isRequired, uploadRequests: PropTypes.arrayOf(PropTypes.shape({ request: PropTypes.object, // eslint-disable-line name: PropTypes.string, })).isRequired, };