Вам необоходимо сделать приложение для отображение товаров в интернет-магазине. Заказчик хочет, чтобы пользователь мог увидеть товары в виде карточек или в виде списка, в зависимости от того, какое расположение выберет пользователь.
Реализуйте компонент Store
, который управляет состоянием приложения, (хранит список товаров в атрибуте products
).
Иконка разметки, которая указывает на переключение между типами расположения товаров реализована в компоненте без состояния IconSwitch
, которому от Store
мы передаем два свойства:
icon
- название иконки, которую хотим показать. Название иконки соответствует названию класса из библиотеки material icons. В нашем случае это - либоview_list
, либоview_module
.onSwitch()
- обработчик события, который реагирует на нажатие пользователем на иконку.
Пример:
<IconSwitch icon={"view_list"} onSwitch={() => console.log("change state here")}/>
Сами товары отображаются в компонентах без состояния CardsView
или ListView
.
Компоненту CardsView
от Store
мы передаем свойство cards
- массив с данными, каждый элемент из которого затем уже отображается с помощью карточки товара ShopCard
.
Т.е. CardsView
отображает много карточек ShopCard
. На один товар - одна карточка ShopCard
.
Компоненту ListView
от Store
мы передаем всего одно свойство items
- массив с данными, каждый элемент из которого затем уже отображается с помощью ShopItem
для товаров, которые мы хотим отобразить.
Т.е. ListView
отображает много ShopItem
. На один товар - один ShopItem
.
Чтобы компонент Store
мог реагировать на выбор пользователем вида разметки, в класс Store
необходимо добавить состояние (state).
Ваша задача:
- установить состояние выбранного типа разметки в обработчике события который
Store
передает в свойствоonSwitch
компонентаIconSwitch
- из компонента
Store
передать правильную иконку в свойствоicon
компонентаIconSwitch
- в компоненте
Store
отобразить товары в компонентеCardsView
илиListView
соответсвенно состоянию компонентаApp
Не забудьте подключить Material Icons:
@import url('https://fonts.googleapis.com/icon?family=Material+Icons')
Данные для отображения:
const products = [{
name: "Nike Metcon 2",
price: "130",
color: "red",
img: "https://raw.githubusercontent.com/netology-code/ra16-homeworks/master/events-state/layouts/img/1.jpg"
}, {
name: "Nike Metcon 2",
price: "130",
color: "green",
img: "https://raw.githubusercontent.com/netology-code/ra16-homeworks/master/events-state/layouts/img/2.jpg"
}, {
name: "Nike Metcon 2",
price: "130",
color: "blue",
img: "https://raw.githubusercontent.com/netology-code/ra16-homeworks/master/events-state/layouts/img/3.jpg"
}, {
name: "Nike Metcon 2",
price: "130",
color: "black",
img: "https://raw.githubusercontent.com/netology-code/ra16-homeworks/master/events-state/layouts/img/4.jpg"
}, {
name: "Nike free run",
price: "170",
color: "black",
img: "https://raw.githubusercontent.com/netology-code/ra16-homeworks/master/events-state/layouts/img/7.jpg"
}, {
name: "Nike Metcon 3",
price: "150",
color: "green",
img: "https://raw.githubusercontent.com/netology-code/ra16-homeworks/master/events-state/layouts/img/5.jpg"
}];