Adatok hozzáadása a tárolóhoz React Routerben

Ebben a leckében azzal foglalkozunk, hogy terméket adunk a tárolóhoz. Először szükségünk van egy createProduct függvényre a termék létrehozásához, adjuk hozzá a forStorage.js fájlhoz a getProducts függvény után:

export async function createProduct() {}

Először ismét hozzáadjuk a someNetwork-ot:

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

Ezután egy egyedi azonosítóra lesz szükségünk minden egyes termékhez, ezzel már találkoztatok a React tananyagban. Használjuk ehhez a nanoid könyvtárat. Írjuk be a terminálba a következő parancsot:

npm install --save nanoid

Importáljuk a forStorage.js fájlba a könyvtárat:

import { nanoid } from 'nanoid'

Legyen a id 6 karakter hosszú:

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

Kezdetben, amikor létrehozzuk a terméket, csak a id lesz az objektumban. Hívjuk meg a getProducts függvényt, adjuk hozzá a generált terméket, és frissítsük a termékek listáját a tárolóban. Kész:

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

A lista tárolóban történő frissítéséhez szükséges függvény a következő lesz (a products kulcs alatt mentjük el a termékeket), helyezzük a createProduct függvény után:

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

Vegyétek azt az alkalmazást, amit az előző leckékhez tartozó feladatokban készítettetek. A lecke anyagát felhasználva írjátok meg a forStorage.js fájlban a createStudent és a setStudents függvényt a diákok adatainak a tárolóhoz való hozzáadásához.