Ενημέρωση δεδομένων μέσω παραμέτρων URL στο storage στο React Router

Στο προηγούμενο μάθημα προσθέσαμε ακόμη μία διαδρομή και μια σελίδα με φόρμα για επεξεργασία δεδομένων. Μας μένει να αποθηκεύσουμε τα δεδομένα που εισάγονται στη φόρμα μας.

Για αρχή θα προσθέσουμε μια συνάρτηση για την ενημέρωση δεδομένων του προϊόντος updateProduct στο forStorage.js. Πρέπει να μεταφέρουμε σ' αυτήν το id του προϊόντος και τα αλλαγμένα δεδομένα:

export async function updateProduct(id, updates) {
	await someNetwork();
}

Στη συνέχεια από το storage με το κλειδί 'products' θα πάρουμε τα προϊόντα και θα βρούμε εκείνο το οποίο αλλάζουμε μέσω του id του. Σε περίπτωση αποτυχίας θα πετάξουμε ένα σφάλμα:

export async function updateProduct(id, updates) {
	await someNetwork();
	let products = await localforage.getItem('products');
	let product = products.find((product) => product.id === id);
	if (!product) throw new Error('Δεν βρέθηκε προϊόν για', id);				
}

Στη συνέχεια μας μένει να κάνουμε αλλαγές στο προϊόν που βρέθηκε και να ξαναγράψουμε την ενημερωμένη λίστα στο storage με τη βοήθεια της συνάρτησής μας setProducts:

export async function updateProduct(id, updates) {
	await someNetwork();
	let products = await localforage.getItem('products');
	let product = products.find((product) => product.id === id);
	if (!product) throw new Error('Δεν βρέθηκε προϊόν για', id);
	Object.assign(product, updates);
	await setProducts(products);
	return product;
}

Πάρτε την εφαρμογή που δημιουργήσατε στα αναθέσεις των προηγούμενων μαθημάτων. Χρησιμοποιώντας τα υλικά του μαθήματος, προσθέστε στο αρχείο forStorage.js τη συνάρτηση updateStudent για την ενημέρωση δεδομένων του φοιτητή στο storage.