React Router'da Depolama Veri Ekleme

Bu derste depolama ürün ekleme ile uğraşacağız. Başlangıç olarak ürün oluşturmak için createProduct fonksiyonuna ihtiyacımız var, onu forStorage.js dosyasına getProducts fonksiyonundan sonra ekleyelim:

export async function createProduct() {}

Önce tekrar someNetwork ekliyoruz:

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

Sonrasında her ürün için benzersiz bir id'ye ihtiyacımız olacak, buna React eğitiminde zaten rastlamıştınız. Bunun için nanoid kütüphanesini kullanalım. Terminale aşağıdaki komutu girelim:

npm install --save nanoid

forStorage.js dosyasına kütüphaneyi içe aktaralım:

import { nanoid } from 'nanoid'

id değerlerimiz 6 karakterli olsun:

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

Başlangıçta ürün oluştururken nesnemizde sadece id olacak. getProducts fonksiyonunu çağıralım, oluşturulan ürünü ekleyelim ve depodaki ürün listemizi güncelleyelim. Tamamlandı:

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

Listeyi depoda güncelleme fonksiyonu aşağıdaki gibi olacak (ona products anahtarı altında ürünleri ekleyeceğiz), onu createProduct fonksiyonundan sonra yerleştirelim:

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

Önceki derslerin ödevlerinde oluşturduğunuz uygulamayı alın. Ders materyallerinden yararlanarak, forStorage.js dosyasına depolama öğrenci veri eklemek için createStudent ve setStudents fonksiyonlarını yazın.