From 49e37587f9d6df8d5416358c7e3f942393ab83af Mon Sep 17 00:00:00 2001
From: Athou <jeremiepanzer@gmail.com>
Date: Fri, 5 May 2023 14:56:53 +0200
Subject: [PATCH] show alert on error

---
 .../src/components/settings/CustomCss.tsx     | 59 +++++++++++--------
 1 file changed, 34 insertions(+), 25 deletions(-)

diff --git a/commafeed-client/src/components/settings/CustomCss.tsx b/commafeed-client/src/components/settings/CustomCss.tsx
index c476ba8b..90c1ac09 100644
--- a/commafeed-client/src/components/settings/CustomCss.tsx
+++ b/commafeed-client/src/components/settings/CustomCss.tsx
@@ -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>
+        </>
     )
 }