outline/app/scenes/DocumentDelete.tsx

import { observer } from "mobx-react";
import * as React from "react";
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 useToasts from "~/hooks/useToasts";
import { collectionUrl, documentUrl } from "~/utils/routeHelpers";

type Props = {
  document: Document;
  onSubmit: () => void;
};

function DocumentDelete({ document, onSubmit }: Props) {
  const { t } = useTranslation();
  const { ui, documents, collections } = useStores();
  const history = useHistory();
  const [isDeleting, setDeleting] = React.useState(false);
  const [isArchiving, setArchiving] = React.useState(false);
  const { showToast } = useToasts();
  const canArchive = !document.isDraft && !document.isArchived;
  const collection = collections.get(document.collectionId);
  const handleSubmit = React.useCallback(
    async (ev: React.SyntheticEvent) => {
      ev.preventDefault();
      setDeleting(true);

      try {
        await document.delete();

        // 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(collection?.url || "/"));
        }

        onSubmit();
      } catch (err) {
        showToast(err.message, {
          type: "error",
        });
      } finally {
        setDeleting(false);
      }
    },
    [showToast, onSubmit, ui, document, documents, history, collection]
  );

  const handleArchive = React.useCallback(
    async (ev: React.SyntheticEvent) => {
      ev.preventDefault();
      setArchiving(true);

      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
              defaults="Are you sure you want to delete the <em>{{ documentTitle }}</em> template?"
              values={{
                documentTitle: document.titleWithDefault,
              }}
              components={{
                em: <strong />,
              }}
            />
          ) : (
            <Trans
              defaults="Are you sure about that? Deleting the <em>{{ documentTitle }}</em> document will delete all of its history and any nested documents."
              values={{
                documentTitle: document.titleWithDefault,
              }}
              components={{
                em: <strong />,
              }}
            />
          )}
        </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>
  );
}

export default observer(DocumentDelete);