Φόρτωση δεδομένων σελίδας από παραμέτρους URL από το χώρο αποθήκευσης στο React Router

Τώρα μπορούμε να προσθέτουμε προϊόντα στην εφαρμογή μας. Εκκινήστε την εφαρμογή, προσθέστε με το κουμπί μερικά προϊόντα. Αν τώρα κάνουμε κλικ στα ίδια τα προϊόντα στη λίστα, θα δούμε ότι κάθε προϊόν έχει ακόμα την ίδια στατική σελίδα, την οποία θα ασχοληθούμε σε αυτό και στα επόμενα μαθήματα.

Επίσης, είναι απαραίτητο να σημειώσουμε ένα ακόμη σημείο. Γενικά, ολόκληρο το URL χωρίζεται σε τμήματα - αυτά είναι τα μέρη του URL μεταξύ των χαρακτήρων /. Εσείς πιθανώς θυμάστε ότι κατά τη δημιουργία αυτής της εφαρμογής καθορίσαμε τη διαδρομή 'products/:productId', λοιπόν το :productId ονομάζεται εδώ δυναμικό τμήμα. Πριν από αυτό τοποθετείται ο χαρακτήρας ':'. Οι τιμές σε αυτό το τμήμα θα αλλάζουν, αυτές ακριβώς περνούν στις παραμέτρους URL (URL Params ή params), οι οποίες μεταδίδονται στον loader κάτω από ένα συγκεκριμένο κλειδί, στην περίπτωσή μας αυτό θα είναι params.productId.

Ρίξτε μια ματιά στη γραμμή διευθύνσεων του προγράμματος περιήγησης, όταν κάνετε κλικ στα προϊόντα στη λίστα. Θα δείτε ότι το τελευταίο τμήμα στη γραμμή διευθύνσεων αλλάζει, αυτές ακριβώς οι τιμές θα περνούν στον loader. Και τα προϊόντα μας στο χώρο αποθήκευσης έχουν ένα μοναδικό id που δημιουργήσαμε εμείς, έτσι θα φορτώνεται το προϊόν που χρειαζόμαστε.

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

Ας επαναλάβουμε τη γνωστή διαδικασία. Αρχικά, στο forStorage.js θα προσθέσουμε τη συνάρτηση getProduct για την ανάκτηση δεδομένων ενός συγκεκριμένου προϊόντος από το χώρο αποθήκευσης με βάση το id. Εδώ θα μεταφέρουμε στη συνάρτηση το id και, αντίστοιχα, αν το προϊόν είναι "προσωρινά αποθηκευμένο" (cached), τότε θα εμφανίζεται χωρίς καθυστέρηση:

export async function getProduct(id) {
	await someNetwork(`product:${id}`);
}

Στη συνέχεια, πρέπει να λάβουμε τον πίνακα των προϊόντων και μεταξύ τους να βρούμε το προϊόν μας με βάση το περασμένο id:

export async function getProduct(id) {
	await someNetwork(`product:${id}`);
	let products = await localforage.getItem('products');
	let product = products.find((product) => product.id === id);
	return product ?? null;
}

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