Διαγραφή Δεδομένων από την Αποθήκη στο React Router

Η εφαρμογή μας μπορεί να προσθέτει νέα προϊόντα, να επεξεργάζεται δεδομένα, απομένει μόνο να προσθέσουμε τη διαγραφή δεδομένων. Για αυτό θα περάσουμε ξανά τα γνωστά βήματα από τα προηγούμενα μαθήματα.

Για αρχή ας ανοίξουμε το αρχείο forStorage.js και ας προσθέσουμε την τελευταία συνάρτηση για τη διαγραφή ενός συγκεκριμένου προϊόντος deleteProduct βάσει του id του:

export async function deleteProduct(id) {}

Στη συνέχεια θα πάρουμε τη λίστα των προϊόντων από την αποθήκη και θα βρούμε το ευρετήριο του προϊόντος που θέλουμε να διαγράψουμε, αν υπάρχει τέτοιο προϊόν, τότε θα το αφαιρέσουμε από τη λίστα χρησιμοποιώντας την splice. Έπειτα θα καλέσουμε την setProducts και θα εισάγουμε τη νέα λίστα προϊόντων στην αποθήκη:

export async function deleteProduct(id) {
	let products = await localforage.getItem('products');
	let index = products.findIndex((product) => product.id === id);
	if (index > -1) {
		products.splice(index, 1);
		await setProducts(products);
		return true;
	}
	return false;
}

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