Add full examples of Hilla/React CRUD component Editor actions

[TatuLund]

The chapter https://hilla.dev/docs/react/components/crud#editor-actions is too brief to be useful for first time Hilla/React user. There should be complete code examples how to add handling save, delete etc. and call end point method.

import React, { useState, useEffect } from 'react';
import { Crud, CrudSaveEvent } from '@hilla/react-components/Crud.js';
import { PersonService } from 'Frontend/generated/endpoints.js';
import type Person from 'Frontend/generated/com/example/application/Person';

export default function CrudView() {
  const [items, setItems] = useState<Person[]>([]);
  const [editedItem, setEditedItem] = useState<Person | undefined>();
  useEffect(() => {
      (async () => {
          setItems(await PersonService.findAll());
       })();
  }, []);

  useEffect(() => {
   console.log(editedItem);
  }, [editedItem]);

    async function handleSave(event: CrudSaveEvent<Person>) {
    const person = event.detail.item;
    setEditedItem(person); 
    await PersonService.savePerson(person);
  }

  return (
    <Crud include="name, email" items={items} onSave={handleSave}/>
  );
}

[ericsawler-ziiware]

Thanks, Tatu. I would suggest that master/detail should be part of the sample or a blog article. In addition, some guidance on best practices on using DTOs (for the grid) and full entities (for the editor form).

[platosha]

Let's add this with a suggestion to use Auto CRUD.