homarr/packages/modals-collection/src/groups/add-group-modal.tsx

import { Button, Group, Stack, TextInput } from "@mantine/core";

import { clientApi } from "@homarr/api/client";
import { revalidatePathActionAsync } from "@homarr/common/client";
import { useZodForm } from "@homarr/form";
import { createModal } from "@homarr/modals";
import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
import { useI18n } from "@homarr/translation/client";
import { validation } from "@homarr/validation";

export const AddGroupModal = createModal<void>(({ actions }) => {
  const t = useI18n();
  const { mutate, isPending } = clientApi.group.createGroup.useMutation();
  const form = useZodForm(validation.group.create, {
    initialValues: {
      name: "",
    },
  });

  return (
    <form
      onSubmit={form.onSubmit((values) => {
        mutate(values, {
          onSuccess() {
            actions.closeModal();
            void revalidatePathActionAsync("/manage/users/groups");
            showSuccessNotification({
              title: t("common.notification.create.success"),
              message: t("group.action.create.notification.success.message"),
            });
          },
          onError() {
            showErrorNotification({
              title: t("common.notification.create.error"),
              message: t("group.action.create.notification.error.message"),
            });
          },
        });
      })}
    >
      <Stack>
        <TextInput label={t("group.field.name")} data-autofocus {...form.getInputProps("name")} />
        <Group justify="right">
          <Button onClick={actions.closeModal} variant="subtle" color="gray">
            {t("common.action.cancel")}
          </Button>
          <Button loading={isPending} type="submit" color="teal">
            {t("common.action.create")}
          </Button>
        </Group>
      </Stack>
    </form>
  );
}).withOptions({
  defaultTitle: (t) => t("group.action.create.label"),
});