garrettmills/commafeed
1
0
Fork 0
forked from Archives/Athou_commafeed
Code Pull Requests Activity

show alert on error

Browse Source
This commit is contained in:
Athou
2023-05-05 14:56:53 +02:00
parent 01102ae973
commit 49e37587f9
1 changed files with 34 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
commafeed-client/src/components/settings/CustomCss.tsx
View File

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