Mise à jour des données via les paramètres d'URL dans le stockage avec React Router

Dans la leçon précédente, nous avons ajouté une route supplémentaire et une page avec un formulaire pour modifier les données. Il nous reste à sauvegarder les données saisies dans notre formulaire.

Pour commencer, ajoutons une fonction pour mettre à jour les données du produit updateProduct dans forStorage.js. Nous devons lui transmettre son id et les données modifiées :

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

Ensuite, à partir du stockage avec la clé 'products', récupérons les produits et trouvons celui que nous modifions par son id. En cas d'échec, nous lancerons une erreur :

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);				
}

Il ne nous restera alors qu'à apporter les modifications au produit trouvé et réécrire la liste mise à jour dans le stockage à l'aide de notre fonction 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;
}

Prenez l'application que vous avez créée dans les travaux dirigés des leçons précédentes. En utilisant le contenu de cette leçon, ajoutez dans le fichier forStorage.js la fonction updateStudent pour mettre à jour les données de l'étudiant dans le stockage.