Tietojen päivittäminen URL-parametrien perusteella tallennustilassa React Routerissa

Edellisellä oppitunnilla lisäsimme vielä yhden reitin ja lomakkeen tietojen muokkaamista varten. Meidän on vielä tallennettava lomakkeeseemme tekemämme muutokset.

Aluksi lisätään funktio tuotteen tietojen päivittämiseen updateProduct tiedostoon forStorage.js. Meidän on välitettävä siihen tuotteen id ja muutetut tiedot:

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

Seuraavaksi haetaan tallennustilasta avaimella 'products' tuotteet ja löydetään se, jota muokkaamme sen id:n perusteella. Epäonnistuessa heitetään virhe:

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

Sitten meidän on vielä tehtävä muutokset löydettyyn tuotteeseen ja kirjoitettava päivitetty lista uudelleen tallennustilaan käyttämällä funktiotamme 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;
}

Ota sovellus, jonka loit aiempien oppituntien tehtävissä. Hyödyntäen oppitunnin materiaaleja, lisää tiedostoon forStorage.js funktio updateStudent opiskelijan tietojen päivittämiseksi tallennustilaan.