CreateUserDialog.tsx

import { gql } from "@apollo/client";
import { useMutation } from "@apollo/client/react";
import { useState } from "react";
import { User } from "./types";

export const CREATE_USER_MUTATION = gql`
  mutation CreateUser($name: String!, $email: String!, $role: String!) {
    createUser(name: $name, email: $email, role: $role) {
      id
      name
      email
      role
    }
  }
`;

export default function CreateUserDialog(props: {
  isOpen: boolean;
  onClose: () => void;
  onSuccess: (user: User) => void;
  onError: (error: Error) => void;
}) {
  const [formState, setFormState] = useState({ name: "", email: "", role: "" });
  const [createUser, { loading, error }] = useMutation<{
    createUser: User;
  }>(CREATE_USER_MUTATION);

  const handleSubmit = async () => {
    try {
      const result = await createUser({
        variables: {
          name: formState.name,
          email: formState.email,
          role: formState.role,
        },
      });

      const user = result.data?.createUser;
      if (!user) throw new Error("No user created");

      props.onSuccess(user);
      props.onClose();
    } catch (error) {
      props.onError(error as Error);
    }
  };

  return (
    <dialog open={props.isOpen} onClose={props.onClose}>
      <label>
        Name
        <input
          type="text"
          value={formState.name}
          onChange={(e) => setFormState({ ...formState, name: e.target.value })}
        />
      </label>
      <label>
        Email
        <input
          type="email"
          value={formState.email}
          onChange={(e) =>
            setFormState({ ...formState, email: e.target.value })
          }
        />
      </label>
      <label>
        Role
        <input
          type="text"
          value={formState.role}
          onChange={(e) => setFormState({ ...formState, role: e.target.value })}
        />
      </label>
      <button onClick={handleSubmit}>Create</button>
    </dialog>
  );
}