Προσθήκη πρόσθετης λογικής στην εφαρμογή Redux

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

Ας ανοίξουμε την εφαρμογή μας με τα προϊόντα. Όπως και με το όνομα του πωλητή,我们需要 να δείξουμε τις αντιδράσεις των χρηστών σε πολλά σημεία της εφαρμογής. Αυτό σημαίνει ότι θα χρειαστούμε ένα ξεχωριστό στοιχείο. Γι' αυτό ας ξεκινήσουμε δημιουργώντας στο φάκελο products το αρχείο UserReactions.jsx. Ας γράψουμε αρχικά σε αυτό ένα αντικείμενο, στο οποίο θα υπάρχουν οι αντιδράσεις μας:

const reactionObj = {
	good: '+',
	soso: '+/-',
	bad: '-',
}

Και παρακάτω ας ξεκινήσουμε να γράφουμε την ίδια τη συνάρτηση, στην οποία θα περάσουμε το slice product:

export const UserReactions = ({ product }) => {}

Τώρα στις αγκύλες ας γράψουμε το σώμα της συνάρτησης UserReactions. Για αυτό θα διατρέξουμε με τη βοήθεια του map τα ζεύγη κλειδί-τιμή του reactionObj μας, για καθένα θα πάρουμε τον συμβολισμό για το κουμπί ('+', '+/-' ή '-') και την αριθμητική τιμή της μιας ή της άλλης αντίδρασης (αυτή θα την τραβήξουμε από το product στο store με βάση το όνομα της αντίδρασης):

const userReactions = Object.entries(reactionObj).map(([name, image]) => {
	return (
		<button key={name} type="button" className="reaction-button">
			{image} {product.reactions[name]}
		</button>
	)
})

Και μετά από αυτό στο τέλος του κώδικα της συνάρτησης θα επιστρέψουμε το markup με τα κουμπιά userReactions:

return <div>{userReactions}</div>

Και επίσης θα προσθέσουμε λίγο ακόμη στυλ στο index.css:

.reaction-button {
	margin-right: 10px;
	margin-bottom: 10px;
}

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

Ανοίξτε την εφαρμογή σας με τους μαθητές. Στην εφαρμογή σας θα υπάρχει δυνατότητα για τους χρήστες να επιλέξουν μεταξύ των μαθητών τον προϊστάμενο της ομάδας και τον αρχηγό της αθλητικής ομάδας. Επομένως, αφού μελετήσετε τα υλικά του μαθήματος, δημιουργήστε στο φάκελο students το αρχείο UserVotes.jsx. Στην αρχή του αρχείου δημιουργήστε το αντικείμενο votesObj, στο οποίο θα έχετε δύο ιδιότητες - leader και captain, με τιμές GL και TC, ως συμβολισμό για τα κουμπιά.

Παρακάτω στο αρχείο μετά τον ορισμό του αντικειμένου votesObj γράψτε τον κώδικα της συνάρτησης UserVotes, κατ' αναλογία με το υλικό από αυτό το μάθημα.