show alert on error

This commit is contained in:
Athou
2023-05-05 14:56:53 +02:00
parent 01102ae973
commit 49e37587f9

View File

@@ -1,9 +1,10 @@
import { Trans } from "@lingui/macro"
import { Button, Group, Stack, Textarea } from "@mantine/core"
import { Box, Button, Group, Stack, Textarea } from "@mantine/core"
import { useForm } from "@mantine/form"
import { client } from "app/client"
import { client, errorToStrings } from "app/client"
import { redirectToSelectedSource } from "app/slices/redirect"
import { useAppDispatch, useAppSelector } from "app/store"
import { Alert } from "components/Alert"
import { useEffect } from "react"
import { useAsyncCallback } from "react-async-hook"
import { TbDeviceFloppy } from "react-icons/tb"
@@ -40,29 +41,37 @@ export function CustomCss() {
}, [setValues, customCss])
return (
<form onSubmit={form.onSubmit(saveCustomCss.execute)}>
<Stack>
<Textarea
autosize
minRows={4}
{...form.getInputProps("customCss")}
description={<Trans>Custom CSS rules that will be applied</Trans>}
styles={{
input: {
fontFamily: "monospace",
},
}}
/>
<>
{saveCustomCss.error && (
<Box mb="md">
<Alert messages={errorToStrings(saveCustomCss.error)} />
</Box>
)}
<Group>
<Button variant="default" onClick={() => dispatch(redirectToSelectedSource())}>
<Trans>Cancel</Trans>
</Button>
<Button type="submit" leftIcon={<TbDeviceFloppy size={16} />} loading={saveCustomCss.loading}>
<Trans>Save</Trans>
</Button>
</Group>
</Stack>
</form>
<form onSubmit={form.onSubmit(saveCustomCss.execute)}>
<Stack>
<Textarea
autosize
minRows={4}
{...form.getInputProps("customCss")}
description={<Trans>Custom CSS rules that will be applied</Trans>}
styles={{
input: {
fontFamily: "monospace",
},
}}
/>
<Group>
<Button variant="default" onClick={() => dispatch(redirectToSelectedSource())}>
<Trans>Cancel</Trans>
</Button>
<Button type="submit" leftIcon={<TbDeviceFloppy size={16} />} loading={saveCustomCss.loading}>
<Trans>Save</Trans>
</Button>
</Group>
</Stack>
</form>
</>
)
}