Dodavanje podataka u skladište u React Router-u

U ovoj lekciji ćemo se baviti dodavanjem proizvoda u skladište. Za početak nam je potrebna funkcija createProduct za kreiranje proizvoda, dodajmo je u forStorage.js nakon funkcije getProducts:

forStorage.jsexport async function createProduct() {}

Prvo ponovo dodajemo someNetwork:

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

A zatim će nam trebati jedinstveni id za svaki proizvod, već ste se sa tim susreli u React udžbeniku. Iskoristimo za to biblioteku nanoid. Unesimo sledeću komandu u terminalu:

terminalnpm install --save nanoid

Importujmo biblioteku u forStorage.js:

forStorage.jsimport { nanoid } from 'nanoid'

Neka id bude dug 6 karaktera:

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

Inicijalno pri kreiranju proizvoda u objektu će biti samo id. Pozovimo getProducts, dodajmo generisani proizvod i ažurirajmo listu naših proizvoda u skladištu. Gotovo:

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

Funkcija za ažuriranje liste u skladištu će biti sledeća (smestaćemo u njega proizvode pod ključem products), smestimo je nakon funkcije createProduct:

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