Aktualizacja danych na podstawie parametrów URL w magazynie w React Router

W poprzedniej lekcji dodaliśmy jeszcze jedną trasę i stronę z formularzem do edycji danych. Pozostaje nam zapisać dane wprowadzone do naszego formularza.

Na początek dodajmy funkcję do aktualizacji danych produktu updateProduct w forStorage.js. Musimy przekazać do niej id produktu i zmienione dane:

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

Następnie z magazynu po kluczu 'products' pobierzmy produkty i znajdźmy ten, który zmieniamy po jego id. W przypadku niepowodzenia rzućmy błąd:

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

Następnie pozostanie nam wprowadzić zmiany do znalezionego produktu i nadpisać zaktualizowaną listę w magazynie za pomocą naszej funkcji 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;
}

Weź aplikację stworzoną przez Ciebie w zadaniach do poprzednich lekcji. Korzystając z materiałów lekcji, dodaj do pliku forStorage.js funkcję updateStudent do aktualizacji danych studenta w magazynie.