79 lines
2.2 KiB
JavaScript
79 lines
2.2 KiB
JavaScript
// @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);
|