Actualizar una factura - Pasos sencillos

Al actualizar una factura, el proceso es bastante similar al de crear una. Aquí tienes un desglose:

1. Crear una ruta dinámica: Crea un nuevo segmento de ruta dinámica, incluyendo el id de la factura. De este modo, indicamos a la aplicación con qué factura estamos trabajando;
2. Leer el id de la factura: Obtén el id de la factura desde los parámetros de la página;
3. Obtener la factura específica: Recupera la información de la factura seleccionada desde la base de datos;
4. Actualizar la base de datos: Después de realizar los cambios necesarios, actualiza los datos de la factura en la base de datos.

Volver al proyecto

1. Crear una Ruta Dinámica

Basándonos en datos cambiantes, podemos crear segmentos de ruta dinámica cuando se requieren rutas flexibles. Envuelve el nombre de una carpeta entre corchetes para crear una ruta dinámica. Por ejemplo, utiliza [id], [post] o [slug] cuando se necesiten segmentos variables en la ruta.

1. Navegar a la carpeta /invoices y crear una nueva ruta dinámica llamada [id];
2. Agregar una nueva ruta llamada 'edit' dentro de la carpeta /invoices/[id]. Incluir un page.tsx.

Resultado:

Examinemos el componente Table en app/ui/invoices/table.tsx. Se puede observar que UpdateInvoice recibe el id de la factura.

Ir al componente <UpdateInvoice /> (app/ui/invoices/buttons.tsx). Se observa que se utiliza el id como parte del valor de href.

2. Leer el id de la factura

Inserte el siguiente código en app/dashboard/invoices/[id]/edit/page.tsx.

3. Obtener una factura específica

A continuación, importe nuevas funciones llamadas fetchInvoiceById y fetchSellers.

• fetchInvoiceById devuelve los datos de una factura específica;
• fetchSellers devuelve los vendedores para el menú desplegable del formulario que muestra todos los vendedores.

Se pueden obtener tanto la factura como los vendedores de manera eficiente y simultánea utilizando Promise.all.

¡Probémoslo! Se puede abrir la página de facturas y hacer clic en el botón de editar (símbolo de lápiz). Esto debería redirigir al formulario con la factura ya completada.

4. Actualizar la base de datos

Es necesario enviar el id a la Server Action para actualizar el registro correcto en la base de datos. A continuación, se muestra cómo hacerlo de manera efectiva:

Utilizar bind de JS para pasar el id a la Server Action. Esto garantiza que cualquier valor enviado a la Server Action esté correctamente codificado.

Evitar pasar el id como argumento directamente en la acción del formulario de la siguiente manera:

// This won't work 
<form action={updateInvoice(id)}> 

A continuación, se procederá con las acciones y se creará una acción para actualizar la factura.

¡Pruébalo! Después de editar una factura, envía el formulario y deberías ser redirigido a la página de facturas con la factura actualizada.

En la práctica