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:

export async function createProduct() {}

Primeiro, adicionamos novamente someNetwork:

export 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:

npm install --save nanoid

Vamos importar a biblioteca para forStorage.js:

import { nanoid } from 'nanoid'

Vamos ter id com 6 caracteres:

export 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:

export 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:

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

Pegue o aplicativo que você criou nas tarefas das lições anteriores. Usando os materiais da lição, escreva em forStorage.js a função createStudent e setStudents para adicionar dados de estudantes ao armazenamento.