Tietojen lisääminen tallennustilaan React Routerissa

Tässä oppitunnissa käsittelemme tuotteen lisäämistä tallennustilaan. Aluksi tarvitsemme funktion createProduct tuotteen luomiseen, lisätään se tiedostoon forStorage.js funktion getProducts jälkeen:

export async function createProduct() {}

Ensin lisätään taas someNetwork:

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

Seuraavaksi tarvitsemme yksilöllisen id:n jokaiselle tuotteelle, olet tavannut tämän aiemmin React-oppaassa. Käytetään tähän nanoid-kirjastoa. Syötetään terminaaliin seuraava komento:

npm install --save nanoid

Tuodaan kirjasto tiedostoon forStorage.js:

import { nanoid } from 'nanoid'

Olkoon id:t 6 merkkiä pitkiä:

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

Aluksi tuotetta luodessa objektissa on vain id. Kutsutaan getProducts, lisätään luotu tuote ja päivitetään tuotelistamme tallennustilassa. Valmista:

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

Funktio listan päivittämiseksi tallennustilassa on seuraava (talletamme sinne tuotteet avaimella products), sijoitetaan se funktion createProduct jälkeen:

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

Ota edellisten oppituntien tehtävissä luomasi sovellus. Hyödynnä oppitunnin materiaaleja ja kirjoita tiedostoon forStorage.js funktiot createStudent ja setStudents opiskelijatietojen lisäämiseksi tallennustilaan.