Σελίδα πωλητή στο Redux

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

Ας ανοίξουμε την εφαρμογή μας με τα προϊόντα, και σε αυτήν τον φάκελο sellers. Ας δημιουργήσουμε σε αυτόν τον φάκελο το αρχείο SellerPage.jsx. Τώρα ας αρχίσουμε να γράφουμε κώδικα SellerPage για το component μας:

export const SellerPage = () => {}

Για αρχή ας πάρουμε το id του πωλητή και βάσει αυτού ας βρούμε το αντικείμενο του απαιτούμενου πωλητή στο slice:

export const SellerPage = () => {
	let params = useParams()
	const { sellerId } = params

	const seller = useSelector((state) => selectSellerById(state, sellerId))
}

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

const productsOfSeller = useSelector((state) => {
	const allProducts = selectAllProducts(state)
	return allProducts.filter((product) => product.seller === sellerId)
})

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

const productNames = productsOfSeller.map((product) => (
	<li key={product.id}>
		<Link to={`/products/${product.id}`}>{product.name}</Link>
	</li>
))

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

return (
	<div>
	<h2>Πωλητής: {seller.name}</h2>

	<ul>{productNames}</ul>
	</div>
)

Φυσικά χρειαζόμαστε ακόμη μια διαδρομή για τη σελίδα του πωλητή. Ας ανοίξουμε το αρχείο App.jsx και ας το προσθέσουμε ως τελευταίο στις θυγατρικές διαδρομές:

{
	path: '/sellers/:sellerId',
	element: <SellerPage />,
},

Μην ξεχάσετε να εισαγάγετε τα απαραίτητα hooks και components στα SellersPage.jsx και App.jsx.

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

Μέχρι εδώ όλα. Μελετήσαμε τα βασικά του Redux για τη δημιουργία εφαρμογών και ακόμη λίγο περισσότερο. Γνωριστήκαμε με διάφορα χρήσιμα εργαλεία. Σας εύχομαι καλή τύχη στη δημιουργία των Redux-εφαρμογών σας!

Ανοίξτε την εφαρμογή σας με τους μαθητές. Έχοντας μελετήσει τα υλικά του μαθήματος, στον φάκελο teachers δημιουργήστε το αρχείο TeacherPage.jsx. Στον κώδικα του component TeacherPage πάρτε το αντικείμενο με τον απαιτούμενο δάσκαλο και όλους τους μαθητές αυτού του καθηγητή. Με τη βοήθεια του map δημιουργήστε από αυτούς μια λίστα, αφήστε το πλήρες όνομα κάθε μαθητή να είναι σύνδεσμος προς τη σελίδα αυτού του μαθητή.

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

Στο App.jsx συνδέστε ακόμη μια θυγατρική διαδρομή για τη σελίδα του καθηγητή.

Εκκινήστε την εφαρμογή σας και βεβαιωθείτε, ότι όλα λειτουργούν.