Shtimi i të dhënave në depon në React Router

Në këtë mësim do të merremi me shtimin e produktit në depo. Për fill na duhet funksioni createProduct për krijimin e produktit, le ta shtojmë atë në forStorage.js pas funksionit getProducts:

forStorage.jsexport async function createProduct() {}

Së pari përsëri shtojmë someNetwork:

forStorage.jsexport async function createProduct() {
  await someNetwork();
}

Por pastaj do të na duhet një id unike për çdo produkt, ju e keni hasur këtë tashmë në tutorialin e React. Le të përdorim për këtë bibliotekën nanoid. Le të ekzekutojmë në terminal komandën e mëposhtme:

terminalnpm install --save nanoid

Le të importojmë në forStorage.js bibliotekën:

forStorage.jsimport { nanoid } from 'nanoid'

Le të kemi id me 6 karaktere:

forStorage.jsexport async function createProduct() {
  await someNetwork();
  let id = nanoid(6);
}

Fillimisht kur krijohet produkti do të kemi në objekt vetëm id. Le të thërrasim getProducts, të shtojmë produktin e gjeneruar dhe të përditësojmë listën e produkteve tona në depo. Gati:

forStorage.jsexport async function createProduct() {
  await someNetwork();
  let id = nanoid(6);
  let product = { id };
  let products = await getProducts();
  products.unshift(product);
  await setProducts(products);
  return product;
}

Funksioni për përditësimin e listës në depo do të jetë si më poshtë (ne do t'i vendosim në të produktet nën çelësin products), le ta vendosim pas funksionit createProduct:

forStorage.jsfunction setProducts(products) {
  return localforage.setItem('products', products);
}