Updating data by URL parameters in the store in React Router

In the previous lesson, we added another route and a page with a form for editing data. We only need to save the data entered into our form.

First, let's add a function to update product data updateProduct in forStorage.js. We need to pass the id product and the changed data to it:

forStorage.jsexport async function updateProduct(id, updates) {
  await someNetwork();
}

Next, we get products from the storage by the key 'products' and find the one we are changing by its id. In case of failure, we throw an error:

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

Then all we have to do is make changes to the found product and overwrite the updated list in the store using our setProducts function:

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