Shtimi i të dhënave në depon në React Router

Në këtë mësim do të merremi me shtimin e produktit në depo. Për fill na duhet funksioni createProduct për krijimin e produktit, le ta shtojmë atë në forStorage.js pas funksionit getProducts:

export async function createProduct() {}

Së pari përsëri shtojmë someNetwork:

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

Por pastaj do të na duhet një id unike për çdo produkt, ju e keni hasur këtë tashmë në tutorialin e React. Le të përdorim për këtë bibliotekën nanoid. Le të ekzekutojmë në terminal komandën e mëposhtme:

npm install --save nanoid

Le të importojmë në forStorage.js bibliotekën:

import { nanoid } from 'nanoid'

Le të kemi id me 6 karaktere:

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

Fillimisht kur krijohet produkti do të kemi në objekt vetëm id. Le të thërrasim getProducts, të shtojmë produktin e gjeneruar dhe të përditësojmë listën e produkteve tona në depo. Gati:

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

Funksioni për përditësimin e listës në depo do të jetë si më poshtë (ne do t'i vendosim në të produktet nën çelësin products), le ta vendosim pas funksionit createProduct:

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

Merrni aplikacionin e krijuar nga ju në detyrat e mësimeve të mëparshme. Duke përdorur materialet e mësimit, shkruani në forStorage.js funksionin createStudent dhe setStudents për shtimin e të dhënave të studentëve në depo.