Adicionando dados ao armazenamento no React Router

Nesta lição, vamos nos concentrar em adicionar um produto ao armazenamento. Primeiro, precisamos de uma função createProduct para criar um produto, vamos adicioná-la em forStorage.js após a função getProducts:

forStorage.jsexport async function createProduct() {}

Primeiro, adicionamos novamente someNetwork:

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

Agora, precisaremos de um id único para cada produto, você já encontrou isso no tutorial de React. Vamos usar a biblioteca nanoid para isso. Digite o seguinte comando no terminal:

terminalnpm install --save nanoid

Vamos importar a biblioteca para forStorage.js:

forStorage.jsimport { nanoid } from 'nanoid'

Vamos ter id com 6 caracteres:

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

Inicialmente, ao criar um produto, teremos apenas o id no objeto. Vamos chamar getProducts, adicionar o produto gerado e atualizar nossa lista de produtos no armazenamento. Pronto:

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

A função para atualizar a lista no armazenamento será a seguinte (vamos armazenar os produtos sob a chave products), vamos colocá-la após a função createProduct:

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