From 4fda50f4ad356719ed6f770ac6604e23f3bb347d Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Sun, 3 Jan 2021 11:04:09 -0800 Subject: [PATCH] feat: Add 'archive' option in delete confirmation modal (#1764) * feat: Add 'archive' option in delete confirmation modal chore: Add translation tags to delete confirmation * i18n * language --- app/components/Button.js | 11 +- app/scenes/DocumentDelete.js | 152 +++++++++++++-------- shared/i18n/locales/en_US/translation.json | 6 + 3 files changed, 105 insertions(+), 64 deletions(-) diff --git a/app/components/Button.js b/app/components/Button.js index d10333ad0..d978887b5 100644 --- a/app/components/Button.js +++ b/app/components/Button.js @@ -47,10 +47,9 @@ const RealButton = styled.button` background: ${props.theme.buttonNeutralBackground}; color: ${props.theme.buttonNeutralText}; box-shadow: ${ - props.borderOnHover ? "none" : "rgba(0, 0, 0, 0.07) 0px 1px 2px" - }; - border: 1px solid ${ - props.borderOnHover ? "transparent" : props.theme.buttonNeutralBorder + props.borderOnHover + ? "none" + : `rgba(0, 0, 0, 0.07) 0px 1px 2px, ${props.theme.buttonNeutralBorder} 0 0 0 1px inset` }; svg { @@ -59,7 +58,9 @@ const RealButton = styled.button` &:hover { background: ${darken(0.05, props.theme.buttonNeutralBackground)}; - border: 1px solid ${props.theme.buttonNeutralBorder}; + box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, ${ + props.theme.buttonNeutralBorder + } 0 0 0 1px inset; } &:disabled { diff --git a/app/scenes/DocumentDelete.js b/app/scenes/DocumentDelete.js index 0f9571288..8573327dc 100644 --- a/app/scenes/DocumentDelete.js +++ b/app/scenes/DocumentDelete.js @@ -1,84 +1,118 @@ // @flow -import { observable } from "mobx"; -import { inject, observer } from "mobx-react"; +import { observer } from "mobx-react"; import * as React from "react"; -import { withRouter, type RouterHistory } from "react-router-dom"; -import DocumentsStore from "stores/DocumentsStore"; -import UiStore from "stores/UiStore"; +import { useTranslation, Trans } from "react-i18next"; +import { useHistory } from "react-router-dom"; import Document from "models/Document"; import Button from "components/Button"; import Flex from "components/Flex"; import HelpText from "components/HelpText"; +import useStores from "hooks/useStores"; import { collectionUrl, documentUrl } from "utils/routeHelpers"; type Props = { - history: RouterHistory, document: Document, - documents: DocumentsStore, - ui: UiStore, onSubmit: () => void, }; -@observer -class DocumentDelete extends React.Component { - @observable isDeleting: boolean; +function DocumentDelete({ document, onSubmit }: Props) { + const { t } = useTranslation(); + const { ui, documents } = useStores(); + const history = useHistory(); + const [isDeleting, setDeleting] = React.useState(false); + const [isArchiving, setArchiving] = React.useState(false); + const { showToast } = ui; + const canArchive = !document.isDraft && !document.isArchived; - handleSubmit = async (ev: SyntheticEvent<>) => { - const { documents, document } = this.props; - ev.preventDefault(); - this.isDeleting = true; + const handleSubmit = React.useCallback( + async (ev: SyntheticEvent<>) => { + ev.preventDefault(); + setDeleting(true); - try { - await document.delete(); + try { + await document.delete(); - // only redirect if we're currently viewing the document that's deleted - if (this.props.ui.activeDocumentId === document.id) { - // If the document has a parent and it's available in the store then - // redirect to it - if (document.parentDocumentId) { - const parent = documents.get(document.parentDocumentId); - if (parent) { - this.props.history.push(documentUrl(parent)); - return; + // only redirect if we're currently viewing the document that's deleted + if (ui.activeDocumentId === document.id) { + // If the document has a parent and it's available in the store then + // redirect to it + if (document.parentDocumentId) { + const parent = documents.get(document.parentDocumentId); + if (parent) { + history.push(documentUrl(parent)); + return; + } } + + // otherwise, redirect to the collection home + history.push(collectionUrl(document.collectionId)); } - - // otherwise, redirect to the collection home - this.props.history.push(collectionUrl(document.collectionId)); + onSubmit(); + } catch (err) { + showToast(err.message, { type: "error" }); + } finally { + setDeleting(false); } - this.props.onSubmit(); - } catch (err) { - this.props.ui.showToast(err.message, { type: "error" }); - } finally { - this.isDeleting = false; - } - }; + }, + [showToast, onSubmit, ui, document, documents, history] + ); - render() { - const { document } = this.props; + const handleArchive = React.useCallback( + async (ev: SyntheticEvent<>) => { + ev.preventDefault(); + setArchiving(true); - return ( - -
- - Are you sure about that? Deleting the{" "} - {document.titleWithDefault} {document.noun} will - delete all of its history - {document.isTemplate ? "" : ", and any nested documents"}. - - {!document.isDraft && !document.isArchived && ( - - If you’d like the option of referencing or restoring this{" "} - {document.noun} in the future, consider archiving it instead. - + try { + await document.archive(); + onSubmit(); + } catch (err) { + showToast(err.message, { type: "error" }); + } finally { + setArchiving(false); + } + }, + [showToast, onSubmit, document] + ); + + return ( + + + + {document.isTemplate ? ( + + Are you sure you want to delete the{" "} + {{ documentTitle: document.titleWithDefault }}{" "} + template? + + ) : ( + + Are you sure about that? Deleting the{" "} + {{ documentTitle: document.titleWithDefault }}{" "} + document will delete all of its history and any nested documents. + )} - +    + {canArchive && ( + - -
- ); - } + )} + + + ); } -export default inject("documents", "ui")(withRouter(DocumentDelete)); +export default observer(DocumentDelete); diff --git a/shared/i18n/locales/en_US/translation.json b/shared/i18n/locales/en_US/translation.json index c604dba6d..257927be3 100644 --- a/shared/i18n/locales/en_US/translation.json +++ b/shared/i18n/locales/en_US/translation.json @@ -234,6 +234,12 @@ "Publish": "Publish", "Publish document": "Publish document", "Publishing": "Publishing", + "Are you sure you want to delete the <2>{{documentTitle}} template?": "Are you sure you want to delete the <2>{{documentTitle}} template?", + "Are you sure about that? Deleting the <2>{{documentTitle}} document will delete all of its history and any nested documents.": "Are you sure about that? Deleting the <2>{{documentTitle}} document will delete all of its history and any nested documents.", + "If you’d like the option of referencing or restoring the {{noun}} in the future, consider archiving it instead.": "If you’d like the option of referencing or restoring the {{noun}} in the future, consider archiving it instead.", + "Deleting": "Deleting", + "I’m sure – Delete": "I’m sure – Delete", + "Archiving": "Archiving", "No documents found for your filters.": "No documents found for your filters.", "You’ve not got any drafts at the moment.": "You’ve not got any drafts at the moment.", "Not found": "Not found",