replace old client with new client from commafeed-ui repository

commafeed-client/src/components/content/add/AddCategory.tsx

@@ -0,0 +1,51 @@
+import { t, Trans } from "@lingui/macro"
+import { Box, Button, Group, Stack, TextInput } from "@mantine/core"
+import { useForm } from "@mantine/form"
+import { client, errorToStrings } from "app/client"
+import { redirectToSelectedSource } from "app/slices/redirect"
+import { reloadTree } from "app/slices/tree"
+import { useAppDispatch } from "app/store"
+import { AddCategoryRequest } from "app/types"
+import { Alert } from "components/Alert"
+import { TbFolderPlus } from "react-icons/tb"
+import useMutation from "use-mutation"
+import { CategorySelect } from "./CategorySelect"
+
+export function AddCategory() {
+    const dispatch = useAppDispatch()
+
+    const form = useForm<AddCategoryRequest>()
+
+    const [addCategory, addCategoryResult] = useMutation(client.category.add, {
+        onSuccess: () => {
+            dispatch(reloadTree())
+            dispatch(redirectToSelectedSource())
+        },
+    })
+    const errors = errorToStrings(addCategoryResult.error)
+
+    return (
+        <>
+            {errors.length > 0 && (
+                <Box mb="md">
+                    <Alert messages={errors} />
+                </Box>
+            )}
+
+            <form onSubmit={form.onSubmit(addCategory)}>
+                <Stack>
+                    <TextInput label={t`Category`} placeholder={t`Category`} {...form.getInputProps("name")} required />
+                    <CategorySelect label={t`Parent`} {...form.getInputProps("parentId")} clearable />
+                    <Group position="center">
+                        <Button variant="default" onClick={() => dispatch(redirectToSelectedSource())}>
+                            <Trans>Cancel</Trans>
+                        </Button>
+                        <Button type="submit" leftIcon={<TbFolderPlus size={16} />} loading={addCategoryResult.status === "running"}>
+                            <Trans>Add</Trans>
+                        </Button>
+                    </Group>
+                </Stack>
+            </form>
+        </>
+    )
+}