Dodawanie danych do magazynu w React Router

W tej lekcji zajmiemy się dodawaniem produktu do magazynu. Na początek potrzebujemy funkcji createProduct do tworzenia produktu, dodajmy ją w forStorage.js po funkcji getProducts:

export async function createProduct() {}

Najpierw ponownie dodajemy someNetwork:

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

A dalej będziemy potrzebować unikalnego id dla każdego produktu, już spotkaliście się z tym w tutorialu React. Wykorzystajmy do tego bibliotekę nanoid. Wprowadźmy w terminalu następujące polecenie:

npm install --save nanoid

Zaimportujmy w forStorage.js bibliotekę:

import { nanoid } from 'nanoid'

Niech będziemy mieli id po 6 znaków:

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

Początkowo przy tworzeniu produktu będziemy mieli w obiekcie tylko id. Wywołajmy getProducts, dodajmy wygenerowany produkt i zaktualizujmy listę naszych produktów w magazynie. Gotowe:

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

Funkcja do aktualizacji listy w magazynie będzie następująca (będziemy umieszczać w nim produkty pod kluczem products), umieśćmy ją po funkcji createProduct:

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

Weź aplikację stworzoną przez Ciebie w zadaniach do poprzednich lekcji. Korzystając z materiałów lekcji, napisz w forStorage.js funkcję createStudent i setStudents do dodawania danych studentów do magazynu.