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:

forStorage.jsexport 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:

forStorage.jsexport 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:

forStorage.jsexport 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;
}