Προσθήκη δεδομένων στην αποθήκη στο React Router

Σε αυτό το μάθημα θα ασχοληθούμε με την προσθήκη ενός προϊόντος στην αποθήκη. Αρχικά, χρειαζόμαστε μια συνάρτηση createProduct για τη δημιουργία προϊόντος, ας την προσθέσουμε στο forStorage.js μετά τη συνάρτηση getProducts:

export async function createProduct() {}

Πρώτα, προσθέτουμε ξανά το someNetwork:

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

Στη συνέχεια, θα χρειαστούμε ένα μοναδικό id για κάθε προϊόν, το έχετε συναντήσει ήδη στο φροντιστήριο React. Ας χρησιμοποιήσουμε για αυτό τη βιβλιοθήκη nanoid. Πληκτρολογούμε στο τερματικό την ακόλουθη εντολή:

npm install --save nanoid

Εισάγουμε στο forStorage.js τη βιβλιοθήκη:

import { nanoid } from 'nanoid'

Ας έχουμε id 6 χαρακτήρων:

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

Αρχικά, κατά τη δημιουργία του προϊόντος, θα έχουμε στο αντικείμενο μόνο το id. Καλούμε την getProducts, προσθέτουμε το παραγόμενο προϊόν και ενημερώνουμε τη λίστα των προϊόντων μας στην αποθήκη. Έτοιμο:

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

Η συνάρτηση για την ενημέρωση της λίστας στην αποθήκη θα είναι η ακόλουθη (θα εισάγουμε σε αυτήν προϊόντα υπό το κλειδί products), ας την τοποθετήσουμε μετά τη συνάρτηση createProduct:

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

Πάρτε την εφαρμογή που δημιουργήσατε στις ασκήσεις των προηγούμενων μαθημάτων. Χρησιμοποιώντας το υλικό του μαθήματος, γράψτε στο forStorage.js τη συνάρτηση createStudent και setStudents για την προσθήκη δεδομένων φοιτητών στην αποθήκη.