Přidání dodatečné logiky do aplikace Redux

V této lekci přidáme poslední komponentu do naší aplikace. Abychom byli konkrétní, přidáme k produktu reakci uživatele, který jej buď objednal, nebo si o něm přečetl informace.

Pojďme otevřít naši aplikaci s produkty. Stejně jako v případě názvu prodejce potřebujeme zobrazit reakce uživatelů na několika místech aplikace. A to znamená, že budeme potřebovat samostatnou komponentu. Proto začněme tím, že ve složce products vytvoříme soubor UserReactions.jsx. Pojďme pro začátek do něj napsat objekt, ve kterém budou naše reakce:

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

A níže začneme psát samotnou funkci, do které budeme předávat slice product:

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

Nyní ve složených závorkách napišme tělo funkce UserReactions. K tomu projdeme pomocí map dvojice klíč-hodnota našeho reactionObj, pro každou získáme označení pro tlačítko ('+', '+/-' nebo '-') a číselnou hodnotu té které reakce (tu budeme číst z product ve store podle názvu reakce):

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

A poté na konci kódu funkce vrátíme značkování s tlačítky userReactions:

return <div>{userReactions}</div>

A také přidáme ještě trochu stylů do index.css:

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

Pokud to vypadá trochu matoucí, nebojte se, dále vám bude vše mnohem srozumitelnější.

Otevřete vaši aplikaci se studenty. Ve vaší aplikaci bude možnost pro uživatele vybrat mezi studenty školitele skupiny a kapitána sportovního týmu. Proto, po prostudování materiálů lekce, vytvořte ve složce students soubor UserVotes.jsx. Na začátku souboru vytvořte objekt votesObj, ve kterém budete mít dvě vlastnosti - leader a captain, s hodnotami GL a TC, jako označení pro tlačítka.

Níže v souboru po definici objektu votesObj napište kód funkce UserVotes, analogicky podle materiálu z této lekce.