Actualización de datos mediante parámetros URL en el almacenamiento en React Router

En la lección anterior, añadimos otra ruta y una página con un formulario para editar datos. Nos queda por guardar los datos introducidos en nuestro formulario.

Para empezar, añadamos una función para actualizar los datos del producto updateProduct en forStorage.js. Necesitamos pasarle el id del producto y los datos modificados:

export async function updateProduct(id, updates) {
	await someNetwork();
}

A continuación, obtendremos los productos del almacenamiento bajo la clave 'products' y encontraremos el que estamos modificando por su id. En caso de fallo, lanzaremos un error:

export async function updateProduct(id, updates) {
	await someNetwork();
	let products = await localforage.getItem('products');
	let product = products.find((product) => product.id === id);
	if (!product) throw new Error('No product found for this', id);				
}

Luego, nos quedará aplicar los cambios al producto encontrado y sobrescribir la lista actualizada en el almacenamiento usando nuestra función setProducts:

export async function updateProduct(id, updates) {
	await someNetwork();
	let products = await localforage.getItem('products');
	let product = products.find((product) => product.id === id);
	if (!product) throw new Error('No product found for this', id);
	Object.assign(product, updates);
	await setProducts(products);
	return product;
}

Tome la aplicación que creó en las tareas de las lecciones anteriores. Usando los materiales de la lección, añada al archivo forStorage.js la función updateStudent para actualizar los datos del estudiante en el almacenamiento.