Dodajanje podatkov v shrambo v React Router

V tej lekciji se bomo ukvarjali z dodajanjem produkta v shrambo. Za začetek potrebujemo funkcijo createProduct za ustvarjanje produkta, dodajmo jo v forStorage.js za funkcijo getProducts:

export async function createProduct() {}

Najprej spet dodamo someNetwork:

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

Nato pa bomo potrebovali enolični id za vsak produkt, s tem ste se že srečali v učbeniku React. Uporabimo knjižnico nanoid. V terminalu vnesemo naslednji ukaz:

npm install --save nanoid

Uvažamo knjižnico v forStorage.js:

import { nanoid } from 'nanoid'

Naj imamo id po 6 znakov:

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

Prvotno bomo imeli pri ustvarjanju produkta v objektu le id. Pokličimo getProducts, dodajmo ustvarjeni produkt in posodobimo seznam naših produktov v shrambi. Končano:

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 posodobitev seznama v shrambi bo naslednja (vanj bomo vnašali produkte pod ključem products), postavimo jo za funkcijo createProduct:

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

Vzemite aplikacijo, ki ste jo ustvarili v nalogah za prejšnje lekcije. Z uporabo gradiva iz lekcije napišite v forStorage.js funkcijo createStudent in setStudents za dodajanje podatkov študentov v shrambo.