@oberoncms/core/dist/components/users.js

OberonCMS is a cloud deployable CMS written in typescript based on the Puck visual editor

"use client";
import { jsxs, jsx } from "react/jsx-runtime";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { Fragment, useOptimistic, startTransition } from "react";
import { Button } from "@tohuhono/ui/button";
import { Input } from "@tohuhono/ui/input";
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@tohuhono/ui/select";
import { Form, FormField, FormItem, FormControl, FormMessage } from "@tohuhono/ui/form";
import { Grid, GridHeading } from "@tohuhono/ui/grid";
import { AddUserSchema, roles } from "../lib/dtd.js";
import { useOberonActions } from "../hooks/use-oberon.js";
const useOberonUsers = (users) => {
  const { addUser, changeRole, deleteUser } = useOberonActions();
  const [optimisticUsers, optimisticUserUpdate] = useOptimistic(users);
  return {
    users: optimisticUsers,
    addUser: (user) => {
      startTransition(() => {
        optimisticUserUpdate([
          ...optimisticUsers,
          { ...user, id: user.email, pending: true }
        ]);
      });
      return addUser(user);
    },
    deleteUser: async (id) => {
      startTransition(
        () => optimisticUserUpdate(
          optimisticUsers.map(
            (user) => user.id === id ? { ...user, pending: true } : user
          )
        )
      );
      return deleteUser({ id });
    },
    changeRole: async (id, role) => {
      startTransition(
        () => optimisticUserUpdate(
          optimisticUsers.map(
            (user) => user.id === id ? { ...user, role, pending: true } : user
          )
        )
      );
      return changeRole({ id, role });
    }
  };
};
function Users({ users: serverUsers }) {
  const { users, addUser, deleteUser, changeRole } = useOberonUsers(serverUsers);
  const form = useForm({
    resolver: zodResolver(AddUserSchema),
    defaultValues: {
      email: "",
      role: "user"
    }
  });
  return /* @__PURE__ */ jsxs(Grid, { className: "grid-cols-[1fr_auto_auto]", children: [
    /* @__PURE__ */ jsx(GridHeading, { children: "Email" }),
    /* @__PURE__ */ jsx(GridHeading, { children: "Role" }),
    /* @__PURE__ */ jsx(GridHeading, {}),
    /* @__PURE__ */ jsx(Form, { ...form, children: /* @__PURE__ */ jsxs(
      "form",
      {
        className: "contents",
        onSubmit: form.handleSubmit((data) => {
          addUser(data);
          form.reset();
        }),
        children: [
          /* @__PURE__ */ jsx(
            FormField,
            {
              control: form.control,
              name: "email",
              render: ({ field }) => {
                var _a;
                return /* @__PURE__ */ jsxs(FormItem, { className: "row-span-2", children: [
                  /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Input, { placeholder: "", ...field }) }),
                  /* @__PURE__ */ jsx(FormMessage, { children: (_a = form.formState.errors.email) == null ? void 0 : _a.message })
                ] });
              }
            }
          ),
          /* @__PURE__ */ jsx(
            FormField,
            {
              control: form.control,
              name: "role",
              render: ({ field }) => {
                var _a;
                return /* @__PURE__ */ jsxs(FormItem, { className: "row-span-2", children: [
                  /* @__PURE__ */ jsxs(
                    Select,
                    {
                      onValueChange: field.onChange,
                      value: field.value.toString(),
                      children: [
                        /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, {}) }) }),
                        /* @__PURE__ */ jsx(SelectContent, { children: roles.map((role) => /* @__PURE__ */ jsx(SelectItem, { value: role, children: role }, role)) })
                      ]
                    }
                  ),
                  /* @__PURE__ */ jsx(FormMessage, { children: (_a = form.formState.errors.role) == null ? void 0 : _a.message })
                ] });
              }
            }
          ),
          /* @__PURE__ */ jsx(Button, { className: "row-span-2", type: "submit", children: "Add User" })
        ]
      }
    ) }),
    users.map(({ role, id, email, pending }) => {
      return /* @__PURE__ */ jsxs(Fragment, { children: [
        /* @__PURE__ */ jsx("div", { className: "pr-6", children: email }),
        /* @__PURE__ */ jsxs(
          Select,
          {
            disabled: pending,
            onValueChange: (role2) => changeRole(id, role2),
            children: [
              /* @__PURE__ */ jsx(SelectTrigger, { className: "h-6 text-xs", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: role }) }),
              /* @__PURE__ */ jsx(SelectContent, { children: roles.map((role2) => /* @__PURE__ */ jsx(SelectItem, { value: role2, children: role2 }, role2)) })
            ]
          }
        ),
        /* @__PURE__ */ jsx(
          Button,
          {
            variant: "destructive",
            size: "sm",
            disabled: pending,
            onClick: () => deleteUser(id),
            children: "Delete"
          }
        )
      ] }, id);
    })
  ] });
}
export {
  Users
};