Strona sprzedawcy w Redux

Pozostało już niewiele. Zróbmy na tych zajęciach ostatnią rzecz - dodajmy do naszej aplikacji osobną stronę dla każdego sprzedawcy. Będą tu tylko już znane Ci działania. Zabierzmy się do pracy.

Otwórzmy naszą aplikację z produktami, a w niej folder sellers. Stwórzmy w tym folderze plik SellerPage.jsx. Teraz zaczniemy pisać kod SellerPage dla naszego komponentu:

export const SellerPage = () => {}

Na początek pobierzmy id sprzedawcy i po nim znajdźmy obiekt potrzebnego sprzedawcy w slicie:

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

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

Następnie poniżej w kodzie dla SellerPage po pobraniu sprzedawcy pobierzmy wszystkie produkty, a następnie wybierzmy z nich tylko te, które zostały wystawione przez danego sprzedawcę:

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

A następnie z nazw wybranych produktów stwórzmy listę przy użyciu map. Przy czym każda nazwa produktu na tej liście będzie linkiem do strony tego produktu:

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

I na końcu kodu dla SellerPage zwróćmy layout: nagłówek z nazwą sprzedawcy i listę produktów, które wystawił ten sprzedawca:

return (
	<div>
	<h2>Sprzedawca: {seller.name}</h2>

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

Oczywiście potrzebujemy jeszcze trasy dla strony sprzedawcy. Otwórzmy plik App.jsx i dodajmy go jako ostatni do tras potomnych:

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

Nie zapomnij zaimportować niezbędnych hooks i komponentów do SellersPage.jsx i App.jsx.

Uruchommy naszą aplikację, załadujmy produkty, a następnie w menu po lewej stronie kliknijmy na link 'Sellers'. Teraz możemy wejść na stronę dowolnego sprzedawcy, klikając na jego nazwę, a następnie na jego stronie zobaczyć wszystkie jego produkty. A, klikając na dowolny z jego produktów, wejdziemy na stronę z tym produktem.

Na tym na razie koniec. Poznaliśmy podstawy Redux do tworzenia aplikacji i nawet trochę głębiej. Zapoznaliśmy się z różnymi przydatnymi narzędziami. Życzę Ci powodzenia w tworzeniu Twoich aplikacji Redux!

Otwórz Twoją aplikację ze studentami. Po zapoznaniu się z materiałami lekcji, w folderze teachers stwórz plik TeacherPage.jsx. W kodzie komponentu TeacherPage pobierz obiekt z potrzebnym nauczycielem i wszystkich studentów danego nauczyciela. Przy użyciu map stwórz z nich listę, niech imię i nazwisko każdego studenta będzie linkiem do strony tego studenta.

Niech w zwracanym layoucie będzie nagłówek z imieniem i nazwiskiem nauczyciela, poniżej będzie mniejszy nagłówek - z przedmiotem, który prowadzi, a jeszcze poniżej lista jego studentów.

W App.jsx podłącz jeszcze jedną trasę potomną dla strony z nauczycielem.

Uruchom Twoją aplikację i upewnij się, że wszystko działa.