lbry-desktop/ui/modal/modalPublish/view.jsx

86 lines
2.5 KiB
JavaScript

// @flow
import * as PAGES from 'constants/pages';
import React from 'react';
import { Modal } from 'modal/modal';
import ClaimPreview from 'component/claimPreview';
import Button from 'component/button';
import Card from 'component/common/card';
type Props = {
closeModal: () => void,
clearPublish: () => void,
navigate: (string) => void,
uri: string,
isEdit: boolean,
filePath: ?string,
};
class ModalPublishSuccess extends React.PureComponent<Props> {
componentDidMount() {
const { clearPublish } = this.props;
clearPublish();
}
render() {
const { closeModal, clearPublish, navigate, uri, isEdit, filePath } = this.props;
// $FlowFixMe
let contentLabel;
if (isEdit) {
contentLabel = __('Update published');
} else {
contentLabel = __('File published');
}
let publishMessage;
if (isEdit) {
publishMessage = __('Your update is now pending. It will take a few minutes to appear for other users.');
} else {
publishMessage = __('Your content will be live shortly.');
}
function handleClose() {
closeModal();
}
return (
<Modal isOpen type="card" contentLabel={__(contentLabel)} onAborted={handleClose}>
<Card
title={__('Success')}
subtitle={publishMessage}
body={
<React.Fragment>
<div className="card--inline">
<ClaimPreview type="small" uri={uri} />
</div>
{filePath && (
<p className="help">
<React.Fragment>
{__(
`Upload will continue in the background, please do not shut down immediately. Leaving the app running helps the network, thank you!`
)}{' '}
<Button button="link" href="https://lbry.com/faq/host-content" label={__('Learn More')} />
</React.Fragment>
</p>
)}
</React.Fragment>
}
actions={
<div className="section__actions">
<Button
button="primary"
label={__('View My Uploads')}
onClick={() => {
clearPublish();
navigate(`/$/${PAGES.UPLOADS}`);
closeModal();
}}
/>
<Button button="link" label={__('Close')} onClick={handleClose} />
</div>
}
/>
</Modal>
);
}
}
export default ModalPublishSuccess;