Pridávanie údajov do úložiska v React Router

V tejto lekcii sa budeme zaoberať pridávaním produktu do úložiska. Na začiatok potrebujeme funkciu createProduct pre vytvorenie produktu, pridajme ju do forStorage.js po funkcii getProducts:

export async function createProduct() {}

Najprv znova pridáme someNetwork:

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

A tu už budeme potrebovať unikátne id pre každý produkt, už ste sa s tým stretli v učebnici React. Využime na to knižnicu nanoid. Zadajme v termináli nasledujúci príkaz:

npm install --save nanoid

Importujme do forStorage.js knižnicu:

import { nanoid } from 'nanoid'

Nech máme id po 6 znakov:

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

Spočiatku pri vytváraní produktu budeme mať v objekte len id. Zavolajme getProducts, pridajme vygenerovaný produkt a aktualizujme zoznam našich produktov v úložisku. Hotovo:

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

Funkcia pre aktualizáciu zoznamu v úložisku bude nasledovná (budeme do neho vkladať produkty pod kľúčikom products), umiestnime ju po funkcii createProduct:

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

Vezmite aplikáciu, ktorú ste vytvorili v úlohách k predchádzajúcim lekciám. Používajúc materiály z lekcie, napíšte v forStorage.js funkciu createStudent a setStudents pre pridávanie údajov študentov do úložiska.