Məlumatların React Router-da anbara əlavə edilməsi

Bu dərsdə biz məhsulu anbara əlavə etməklə məşğul olacayıq. Əvvəlcə bizə məhsul yaratmaq üçün createProduct funksiyası lazımdır, onu forStorage.js faylında getProducts funksiyasından sonra əlavə edək:

export async function createProduct() {}

Əvvəlcə yenidən someNetwork əlavə edirik:

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

Bundan sonra bizə hər bir məhsul üçün unikal id lazımdır, siz artıq React dərsliyində bununla qarşılaşmısınız. Bunun üçün nanoid kitabxanasından istifadə edək. Terminalda aşağıdakı əmri daxil edək:

npm install --save nanoid

Kitabxananı forStorage.js faylına import edək:

import { nanoid } from 'nanoid'

Gəlin id-lərimiz 6 simvoldan ibarət olsun:

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

Məhsul yaradılarkən əvvəlcə bizim obyektimizdə yalnız id olacaq. getProducts funksiyasını çağıraq, yaradılan məhsulu əlavə edək və anbardakı məhsul siyahımızı yeniləyək. Hazırdır:

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

Siyahını anbarda yeniləmək üçün funksiya aşağıdakı kimi olacaq (biz onun içinə məhsulları products açarı altında əlavə edəcəyik), onu createProduct funksiyasından sonra yerləşdirək:

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

Əvvəlki dərslərin tapşırıqlarında yaratdığınız tətbiqi götürün. Dərsin materiallarından istifadə edərək, forStorage.js faylında tələbə məlumatlarını anbara əlavə etmək üçün createStudent və setStudents funksiyalarını yazın.