better error management

This commit is contained in:
1ilit 2025-04-21 22:29:37 +04:00
parent 57dc31e60d
commit 7fa24425ca

View File

@ -1,4 +1,4 @@
import { Button, Input, Spin, Toast } from "@douyinfe/semi-ui"; import { Banner, Button, Input, Spin, Toast } from "@douyinfe/semi-ui";
import { useCallback, useContext, useEffect, useState } from "react"; import { useCallback, useContext, useEffect, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { IdContext } from "../../Workspace"; import { IdContext } from "../../Workspace";
@ -25,6 +25,7 @@ export default function Share({ title, setModal }) {
const { types } = useTypes(); const { types } = useTypes();
const { enums } = useEnums(); const { enums } = useEnums();
const { transform } = useTransform(); const { transform } = useTransform();
const [error, setError] = useState(null);
const url = const url =
window.location.origin + window.location.pathname + "?shareId=" + gistId; window.location.origin + window.location.pathname + "?shareId=" + gistId;
@ -59,48 +60,29 @@ export default function Share({ title, setModal }) {
setModal(MODAL.NONE); setModal(MODAL.NONE);
} catch (e) { } catch (e) {
console.error(e); console.error(e);
setError(e);
} }
}, [gistId, setGistId, setModal]); }, [gistId, setGistId, setModal]);
const updateGist = useCallback(async () => {
setLoading(true);
try {
await patch(gistId, diagramToString());
} catch (e) {
console.error(e);
} finally {
setLoading(false);
}
}, [gistId, diagramToString]);
const generateLink = useCallback(async () => {
setLoading(true);
try {
const res = await create(diagramToString());
setGistId(res.data.id);
} catch (e) {
console.error(e);
} finally {
setLoading(false);
}
}, [setGistId, diagramToString]);
useEffect(() => { useEffect(() => {
const updateOrGenerateLink = async () => { const updateOrGenerateLink = async () => {
try { try {
setLoading(true);
if (!gistId || gistId === "") { if (!gistId || gistId === "") {
await generateLink(); const res = await create(diagramToString());
setGistId(res.data.id);
} else { } else {
await updateGist(); await patch(gistId, diagramToString());
} }
} catch (e) { } catch (e) {
console.error(e); console.error(e);
setError(e);
} finally { } finally {
setLoading(false); setLoading(false);
} }
}; };
updateOrGenerateLink(); updateOrGenerateLink();
}, [gistId, generateLink, updateGist]); }, [gistId, diagramToString, setGistId]);
const copyLink = () => { const copyLink = () => {
navigator.clipboard navigator.clipboard
@ -123,18 +105,30 @@ export default function Share({ title, setModal }) {
return ( return (
<div> <div>
<div className="flex gap-3"> {error && (
<Input value={url} size="large" /> <Banner
</div> description={t("oops_smth_went_wrong")}
<div className="text-xs mt-2">{t("share_info")}</div> type="danger"
<div className="flex gap-2 mt-3"> closeIcon={null}
<Button block onClick={unshare}> fullMode={false}
{t("unshare")} />
</Button> )}
<Button block theme="solid" icon={<IconLink />} onClick={copyLink}> {!error && (
{t("copy_link")} <>
</Button> <div className="flex gap-3">
</div> <Input value={url} size="large" />
</div>
<div className="text-xs mt-2">{t("share_info")}</div>
<div className="flex gap-2 mt-3">
<Button block onClick={unshare}>
{t("unshare")}
</Button>
<Button block theme="solid" icon={<IconLink />} onClick={copyLink}>
{t("copy_link")}
</Button>
</div>
</>
)}
</div> </div>
); );
} }