lbry-desktop/ui/modal/modalRemoveCollection/view.jsx
2022-04-03 22:13:18 +08:00

65 lines
2.2 KiB
JavaScript

// @flow
import React, { useState } from 'react';
import { Modal } from 'modal/modal';
import Button from 'component/button';
import Card from 'component/common/card';
import I18nMessage from 'component/i18nMessage';
import { useHistory } from 'react-router-dom';
import { FormField } from 'component/common/form';
type Props = {
closeModal: () => void,
collectionDelete: (string, ?string) => void,
claim: Claim,
collectionId: string,
collectionName: string,
uri: ?string,
redirect: ?string,
};
function ModalRemoveCollection(props: Props) {
const { closeModal, claim, collectionDelete, collectionId, collectionName, uri, redirect } = props;
const title = claim && claim.value && claim.value.title;
const { replace } = useHistory();
const [confirmName, setConfirmName] = useState('');
return (
<Modal isOpen contentLabel={__('Confirm List Unpublish')} type="card" onAborted={closeModal}>
<Card
title={__('Delete List')}
body={
uri ? (
<React.Fragment>
<p>{__('This will permanently delete the list.')}</p>
<p>{__('Type "%list_name%" to confirm.', { list_name: collectionName })}</p>
<FormField value={confirmName} type={'text'} onChange={(e) => setConfirmName(e.target.value)} />
</React.Fragment>
) : (
<I18nMessage tokens={{ title: <cite>{uri && title ? `"${title}"` : `"${collectionName}"`}</cite> }}>
Are you sure you'd like to remove %title%?
</I18nMessage>
)
}
actions={
<>
<div className="section__actions">
<Button
button="primary"
label={__('Delete')}
disabled={uri && collectionName !== confirmName}
onClick={() => {
if (redirect) replace(redirect);
collectionDelete(collectionId, uri ? 'resolved' : undefined);
closeModal();
}}
/>
<Button button="link" label={__('Cancel')} onClick={closeModal} />
</div>
</>
}
/>
</Modal>
);
}
export default ModalRemoveCollection;