import React, { useEffect } from "react"; // Redux import { connect } from "react-redux"; // Components import { notification, Icon } from "antd"; function UploadProgress({ isUploading, uploadProgress }) { function openUploadStartNotification() { notification.open({ message: "Upload Started!", description: "You can continue using the app like normal while the upload happens in the background. However, do not refresh or close the app until it completes!", icon: <Icon type="loading" style={{ fontSize: 24 }} spin />, duration: 8, key: "upload-start", }); } function openUploadFinishNotification() { notification["success"]({ message: "Upload Complete!", description: "Video upload has finished successfully.", }); } function closeUploadStartNotification() { notification.close("upload-start"); } useEffect(() => { if (isUploading && uploadProgress === 0) { openUploadStartNotification(); } if (uploadProgress === 100) { openUploadFinishNotification(); closeUploadStartNotification(); } }, [uploadProgress, isUploading]); return <></>; } const mapStateToProps = (state) => ({ isUploading: state.User.videoUpload.isUploading, uploadProgress: state.User.videoUpload.progress, }); export default connect(mapStateToProps, null)(UploadProgress);