From f8983724d6ec35efa39adcd2ab258c3bafa8f740 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?= <sissbruecker@vaadin.com>
Date: Wed, 15 Nov 2023 14:42:26 +0100
Subject: [PATCH 1/4] update auto form event handler names

---
 articles/react/components/auto-form/index.asciidoc | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/articles/react/components/auto-form/index.asciidoc b/articles/react/components/auto-form/index.asciidoc
index d0acae7d1c..7ac2749092 100644
--- a/articles/react/components/auto-form/index.asciidoc
+++ b/articles/react/components/auto-form/index.asciidoc
@@ -180,9 +180,9 @@ The following properties are available for managing the form state or reacting t
 
 - `item`: the item to be edited. If the item is `null`, the form is in _new_ mode, otherwise it is in _edit_ mode.
 - `disabled`: disables the whole form.
-- `afterSubmit`: a callback function that is called after the form is submitted successfully.
+- `onSubmitSuccess`: a callback function that is called after the form is submitted successfully.
 
-The following example shows how to use the `item` property to manage switching between _new_ and _edit_ modes, and `afterSubmit` for informing the user about the form submission success. In addition, it uses `disabled` property is also used to toggle the form's disabled state:
+The following example shows how to use the `item` property to manage switching between _new_ and _edit_ modes, and `onSubmitSuccess` for informing the user about the form submission success. In addition, it uses `disabled` property is also used to toggle the form's disabled state:
 
 [.example.desktop]
 --
@@ -195,9 +195,9 @@ include::{root}/frontend/demo/component/auto-form/react/auto-form-edit-new-modes
 Auto Form component supports Deletion functionality out-of-the-box, which is associated with calling the `delete` method from the `CrudService` introduced to the Auto Form. The following properties are associated with managing this functionality:
 
 - `deleteButtonVisible`: whether to show the delete button in the form which is hidden by default. If enabled, the delete button is only shown when editing an existing item, that means that `item` property is not null.
-- `afterDelete`: a callback function that is called after the item is deleted successfully.
+- `onDeleteSuccess`: a callback function that is called after the item is deleted successfully.
 
-The following example shows how to use the `deleteButtonVisible` property to show the Delete button, and uses the `afterDelete` property to inform the user about the deletion success. You can toggle between the _edit_ and _new_ modes to see its effect on the visibility of the Delete button in action:
+The following example shows how to use the `deleteButtonVisible` property to show the Delete button, and uses the `onDeleteSuccess` property to inform the user about the deletion success. You can toggle between the _edit_ and _new_ modes to see its effect on the visibility of the Delete button in action:
 
 [.example.desktop]
 --

From 177998d56df8b4b51e098d7054ff2f9f9c1728e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?= <sissbruecker@vaadin.com>
Date: Wed, 15 Nov 2023 14:44:19 +0100
Subject: [PATCH 2/4] remove unnecessary key prop

---
 .../component/auto-crud/react/auto-crud-customized-form.tsx   | 4 +---
 .../auto-form/react/auto-form-field-custom-renderer.tsx       | 4 +---
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/frontend/demo/component/auto-crud/react/auto-crud-customized-form.tsx b/frontend/demo/component/auto-crud/react/auto-crud-customized-form.tsx
index 05dada0594..eb0eb29a59 100644
--- a/frontend/demo/component/auto-crud/react/auto-crud-customized-form.tsx
+++ b/frontend/demo/component/auto-crud/react/auto-crud-customized-form.tsx
@@ -17,9 +17,7 @@ function Example() {
         fieldOptions: {
           firstName: { label: 'Name' },
           description: {
-            renderer: ({ field }) => (
-              <TextArea key={field.name} {...field} label="Full description" />
-            ),
+            renderer: ({ field }) => <TextArea {...field} label="Full description" />,
           },
         },
       }}
diff --git a/frontend/demo/component/auto-form/react/auto-form-field-custom-renderer.tsx b/frontend/demo/component/auto-form/react/auto-form-field-custom-renderer.tsx
index b142cc1645..4b64b26a45 100644
--- a/frontend/demo/component/auto-form/react/auto-form-field-custom-renderer.tsx
+++ b/frontend/demo/component/auto-form/react/auto-form-field-custom-renderer.tsx
@@ -14,9 +14,7 @@ function Example() {
       model={EmployeeModel}
       fieldOptions={{
         description: {
-          renderer: ({ field }) => (
-            <TextArea key={field.name} {...field} label="Full description" />
-          ),
+          renderer: ({ field }) => <TextArea {...field} label="Full description" />,
         },
       }}
     />

From 2bd46d94ae455d8e2d3d82c2dde7965fcfbe74a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?= <sissbruecker@vaadin.com>
Date: Wed, 15 Nov 2023 14:46:00 +0100
Subject: [PATCH 3/4] fix routing parameter example

---
 articles/react/guides/routing.adoc | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/articles/react/guides/routing.adoc b/articles/react/guides/routing.adoc
index 738b462bba..8a473acff8 100644
--- a/articles/react/guides/routing.adoc
+++ b/articles/react/guides/routing.adoc
@@ -115,7 +115,7 @@ export default function ProductDetailView() {
   const { productId } = useParams();
 
   // Fetch product details for the given ID
-  const { product, setProduct } = useState<Product>();
+  const [ product, setProduct ] = useState<Product>();
 
   useEffect(() => {
     ProductEndpoint.getProduct(productId).then(setProduct);

From e1b7b293101d0904a626a512d0415359f3503ff9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?= <sissbruecker@vaadin.com>
Date: Wed, 15 Nov 2023 14:52:21 +0100
Subject: [PATCH 4/4] improve introductory example for auto form and auto crud

---
 articles/react/components/auto-crud/index.asciidoc | 9 ++++++++-
 articles/react/components/auto-form/index.asciidoc | 7 ++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/articles/react/components/auto-crud/index.asciidoc b/articles/react/components/auto-crud/index.asciidoc
index 4cee6ef992..e76e3d0978 100644
--- a/articles/react/components/auto-crud/index.asciidoc
+++ b/articles/react/components/auto-crud/index.asciidoc
@@ -40,7 +40,14 @@ include::{root}/src/main/java/com/vaadin/demo/fusion/crud/EmployeeRepository.jav
 
 Hilla generates TypeScript objects for each `@BrowserCallable` service implementing the `CrudService<T, ID>` interface. These TypeScript objects have callable methods that execute the corresponding Java service methods, enabling the Add, Update, and Delete operations as well as lazy data loading with sorting and filtering.
 
-For the `EmployeeService` example, you can import the generated TypeScript object in your React view, and use it as a value for the `service` property to render automatically grid columns and form fields. Here's what the rendered component looks like:
+For the example above, you can import the generated TypeScript objects in your React view and configure the component like so:
+
+[source,tsx]
+----
+<AutoCrud service={EmployeeService} model={EmployeeModel} />
+----
+
+Here's what the rendered component looks like:
 
 [.example.desktop]
 --
diff --git a/articles/react/components/auto-form/index.asciidoc b/articles/react/components/auto-form/index.asciidoc
index 7ac2749092..bd93759820 100644
--- a/articles/react/components/auto-form/index.asciidoc
+++ b/articles/react/components/auto-form/index.asciidoc
@@ -40,7 +40,12 @@ include::{root}/src/main/java/com/vaadin/demo/fusion/crud/EmployeeRepository.jav
 
 Hilla generates TypeScript objects for each `@BrowserCallable` service implementing the `CrudService<T, ID>` interface. These TypeScript objects have callable methods that execute the corresponding Java service methods, enabling the Add, Update, and Delete operations as well as lazy data loading with sorting and filtering.
 
-For the `EmployeeService` example, you can import the generated TypeScript object in your React view, and use it as a value for the `<AutoForm service={EmployeeService} />` property to render the form.
+For the example above, you can import the generated TypeScript objects in your React view and configure the component like so:
+
+[source,tsx]
+----
+<AutoForm service={EmployeeService} model={EmployeeModel} />
+----
 
 Here's what the rendered form looks like: