Додавање на податоци во складиштето во React Router

Во оваа лекција ќе се занимаваме со додавање на продукт во складиштето. За почеток ни е потребна функцијата createProduct за создавање на продукт, да ја додадеме во forStorage.js по функцијата getProducts:

export async function createProduct() {}

Прво повторно додаваме someNetwork:

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

А тука ќе ни треба уникален id за секој продукт, веќе се сретнавте со ова во учебникот за React. Ќе ја искористиме за ова библиотеката nanoid. Внесете ја следнава команда во терминалот:

npm install --save nanoid

Импортирајте ја во forStorage.js библиотеката:

import { nanoid } from 'nanoid'

Нека имаме id од 6 знаци:

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

Иницијално при создавањето на продуктот кај нас ќе има во објектот само id. Да ја повикаме getProducts, да го додадеме генерираниот продукт и да го ажурираме списокот на нашите производи во складиштето. Готово:

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

Функцијата за ажурирање на списокот во складиштето ќе биде следна (во него ќе внесуваме производи под клучот products), да ја поставиме по функцијата createProduct:

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

Земете ја апликацијата што ја создадовте во задачите од претходните лекции. Користејќи ги материјалите од лекцијата, напишете во forStorage.js функција createStudent и setStudents за додавање на податоци за студенти во складиштето.