stash

app/scenes/Settings/ImportExport.js

@@ -0,0 +1,78 @@
+// @flow
+import { observer } from "mobx-react";
+import * as React from "react";
+import { useTranslation, Trans } from "react-i18next";
+import Button from "components/Button";
+import CenteredContent from "components/CenteredContent";
+import HelpText from "components/HelpText";
+import PageTitle from "components/PageTitle";
+import useCurrentUser from "hooks/useCurrentUser";
+import useStores from "hooks/useStores";
+
+function ImportExport() {
+  const { t } = useTranslation();
+  const user = useCurrentUser();
+  const { ui, collections } = useStores();
+  const { showToast } = ui;
+  const [isLoading, setLoading] = React.useState(false);
+  const [isExporting, setExporting] = React.useState(false);
+
+  const handleImport = React.useCallback(async () => {
+    // TODO
+  }, []);
+
+  const handleExport = React.useCallback(
+    async (ev: SyntheticEvent<>) => {
+      ev.preventDefault();
+      setLoading(true);
+
+      try {
+        await collections.export();
+        setExporting(true);
+        showToast(t("Export in progress…"));
+      } finally {
+        setLoading(false);
+      }
+    },
+    [t, collections, showToast]
+  );
+
+  return (
+    <CenteredContent>
+      <PageTitle title={t("Import / Export")} />
+      <h1>{t("Import")}</h1>
+      <HelpText>
+        <Trans>
+          It is possible to import a zip file of folders and Markdown files.
+        </Trans>
+      </HelpText>
+      <Button type="submit" onClick={handleImport} primary>
+        {t("Import")}
+      </Button>
+
+      <h1>{t("Export")}</h1>
+      <HelpText>
+        <Trans>
+          A full export might take some time, consider exporting a single
+          document or collection if possible. We’ll put together a zip of all
+          your documents in Markdown format and email it to{" "}
+          <strong>{{ userEmail: user.email }}</strong>.
+        </Trans>
+      </HelpText>
+      <Button
+        type="submit"
+        onClick={handleExport}
+        disabled={isLoading || isExporting}
+        primary
+      >
+        {isExporting
+          ? t("Export Requested")
+          : isLoading
+          ? `${t("Requesting Export")}…`
+          : t("Export Data")}
+      </Button>
+    </CenteredContent>
+  );
+}
+
+export default observer(ImportExport);