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:

export async function createProduct() {}

Prvo ponovo dodajemo someNetwork:

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

npm install --save nanoid

Importujmo biblioteku u forStorage.js:

import { nanoid } from 'nanoid'

Neka id bude dug 6 karaktera:

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

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

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:

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

Uzmite aplikaciju koju ste kreirali u zadacima za prethodne lekcije. Koristeći se materijalom iz lekcije, napišite u forStorage.js funkciju createStudent i setStudents za dodavanje podataka o studentima u skladište.