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
2021-01-03 11:04:09 -08:00 · 2021-01-03 11:04:09 -08:00 · 4fda50f4ad
parent f4c5cc054e
commit 4fda50f4ad
3 changed files with 105 additions and 64 deletions
--- 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 {
--- 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<Props> {
-  @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 (
-      <Flex column>
-        <form onSubmit={this.handleSubmit}>
-          <HelpText>
-            Are you sure about that? Deleting the{" "}
-            <strong>{document.titleWithDefault}</strong> {document.noun} will
-            delete all of its history
-            {document.isTemplate ? "" : ", and any nested documents"}.
-          </HelpText>
-          {!document.isDraft && !document.isArchived && (
-            <HelpText>
-              If you’d like the option of referencing or restoring this{" "}
-              {document.noun} in the future, consider archiving it instead.
-            </HelpText>
+      try {
+        await document.archive();
+        onSubmit();
+      } catch (err) {
+        showToast(err.message, { type: "error" });
+      } finally {
+        setArchiving(false);
+      }
+    },
+    [showToast, onSubmit, document]
+  );
+
+  return (
+    <Flex column>
+      <form onSubmit={handleSubmit}>
+        <HelpText>
+          {document.isTemplate ? (
+            <Trans>
+              Are you sure you want to delete the{" "}
+              <strong>{{ documentTitle: document.titleWithDefault }}</strong>{" "}
+              template?
+            </Trans>
+          ) : (
+            <Trans>
+              Are you sure about that? Deleting the{" "}
+              <strong>{{ documentTitle: document.titleWithDefault }}</strong>{" "}
+              document will delete all of its history and any nested documents.
+            </Trans>
          )}
-          <Button type="submit" danger>
-            {this.isDeleting ? "Deleting…" : "I’m sure – Delete"}
+        </HelpText>
+        {canArchive && (
+          <HelpText>
+            <Trans>
+              If you’d like the option of referencing or restoring the{" "}
+              {{ noun: document.noun }} in the future, consider archiving it
+              instead.
+            </Trans>
+          </HelpText>
+        )}
+        <Button type="submit" danger>
+          {isDeleting ? `${t("Deleting")}…` : t("I’m sure – Delete")}
+        </Button>
+        &nbsp;&nbsp;
+        {canArchive && (
+          <Button type="button" onClick={handleArchive} neutral>
+            {isArchiving ? `${t("Archiving")}…` : t("Archive")}
          </Button>
-        </form>
-      </Flex>
-    );
-  }
+        )}
+      </form>
+    </Flex>
+  );
 }

-export default inject("documents", "ui")(withRouter(DocumentDelete));
+export default observer(DocumentDelete);
--- 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}}</2> template?": "Are you sure you want to delete the <2>{{documentTitle}}</2> template?",
+  "Are you sure about that? Deleting the <2>{{documentTitle}}</2> document will delete all of its history and any nested documents.": "Are you sure about that? Deleting the <2>{{documentTitle}}</2> 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",