Dodawanie dodatkowej logiki do aplikacji Redux

Na tym zajęciu dodamy ostatni komponent do naszej aplikacji. Jeśli być konkretnym, to będziemy dodawać do produktu reakcję użytkownika, który go albo zamawiał, albo przeczytał o nim informacje.

Otwórzmy naszą aplikację z produktami. Jak w przypadku z nazwą sprzedawcy, nam trzeba pokazać reakcje użytkowników w kilku miejscach aplikacji. A to znaczy, że będziemy potrzebować oddzielnego komponentu. Dlatego zacznijmy od tego, że w folderze products stworzymy plik UserReactions.jsx. Dajmy na początku wpiszmy w nim obiekt, w którym będą nasze reakcje:

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

A poniżej zaczniemy pisać samą funkcję, do której będziemy przekazywać slice product:

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

Teraz w nawiasach klamrowych napiszmy ciało funkcji UserReactions. W tym celu przeiterujemy za pomocą map pary klucz-wartość naszego reactionObj, dla każdej otrzymamy oznaczenie dla przycisku ('+', '+/-' lub '-') i numeryczną wartość tej lub innej reakcji (ją my będziemy wyciągać z product w store po nazwie reakcji):

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

I po tym na końcu kodu funkcji zwróćmy wersztkę z przyciskami userReactions:

return <div>{userReactions}</div>

A także dodajmy jeszcze trochę stylów do index.css:

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

Jeśli to wygląda nieco zagmatwanie, nie przejmuj się, dalej stanie ci się wszystko o wiele zrozumialsze.

Otwórz twoją aplikację ze studentami. W twojej aplikacji będzie możliwość dla użytkowników wybrać spośród studentów starostę grupy i kapitana sportowej drużyny. Dlatego, po przestudiowaniu materiałów lekcji, stwórz w folderze students plik UserVotes.jsx. Na początku pliku stwórz obiekt votesObj, w którym będziesz miał dwie właściwości - leader i captain, ze wartościami GL i TC, jako oznaczenie dla przycisków.

Poniżej w pliku po zdefiniowaniu obiektu votesObj napisz kod funkcji UserVotes, przez analogię z materiałem z tej lekcji.