Aggiunta di dati allo storage in React Router

In questa lezione ci occuperemo di aggiungere un prodotto allo storage. Per iniziare abbiamo bisogno di una funzione createProduct per creare un prodotto, aggiungiamola in forStorage.js dopo la funzione getProducts:

export async function createProduct() {}

Prima di tutto aggiungiamo nuovamente someNetwork:

export async function createProduct() {
	await someNetwork();
}

E qui avremo bisogno di un id univoco per ogni prodotto, l'hai già incontrato nel tutorial di React. Utilizziamo a questo scopo la libreria nanoid. Inseriamo nel terminale il seguente comando:

npm install --save nanoid

Importiamo in forStorage.js la libreria:

import { nanoid } from 'nanoid'

Facciamo in modo che gli id abbiano 6 caratteri:

export async function createProduct() {
	await someNetwork();
	let id = nanoid(6);
}

Inizialmente alla creazione del prodotto avremo nell'oggetto solo id. Chiamiamo getProducts, aggiungiamo il prodotto generato e aggiorniamo la lista dei nostri prodotti nello storage. Fatto:

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

La funzione per aggiornare la lista nello storage sarà la seguente (inseriremo in esso i prodotti sotto la chiave products), posizioniamola dopo la funzione createProduct:

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

Prendi l'applicazione, creata da te nei compiti delle lezioni precedenti. Utilizzando i materiali della lezione, scrivi in forStorage.js la funzione createStudent e setStudents per aggiungere i dati degli studenti allo storage.