- Нельзя менять уже написанный код, тесты и другие файлы добавленные в проект
- Помимо стандартной библиотеки, вы можете использовать все что импортировано. Что не импортировано, то не используется.
- Выполняйте коммиты и пуши как можно чаще. Так вы будете видеть какие из тестов сработают, а какие нет.
- Во время работы не забывайте запускать саму утилиту и
npm test
Ваша задача написать и экспортировать компонент, который делает запрос на получение списка с кафе и рендерит их в списке. Данные с кафе находятся по адресу __fixtures__/cafes.js.
Таблица должна иметь заглавие c полями, которые указаны в данных о пользователях (рассмотрите данные самостоятельно).
Пример использования:
<CafesTable />Результат:
<div id="container" class="container m-3">
<div class="cafesTable">
<div class="controls">
<select name="subway" id="subway">
<option value="All" selected>Все</option>
<option value="Московская">Московская</option>
<option value="Арбат">Арбат</option>
<option value="Парк Культуры">Парк Культуры</option>
<option value="Красная Площадь">Красная Площадь</option>
<option value="Театральная">Театральная</option>
</select>
</div>
<ul class="cardsList">
<li class="card">
<img src="https://via.placeholder.com/150" alt="" />
<h2>Name</h2>
<p>decs</p>
<p>Address</p>
<p>Subway: Arbat</p>
<p>8:00 - 20:00</p>
</li>
</ul>
</div>
</div>make run # запускается сервер и клиентВ файле src/FilterCafes.jsx cоздайте и экспортируйте по умолчанию компонент <FilterCafes/>, в котором есть блок <div class = 'controls'>, содержащий <select name="subway" id="subway">.
<select name="subway" id="subway">
<option value="All">Все</option>
</select>В файле src/CafesTable.jsx cоздайте и экспортируйте по умолчанию компонент <CafesTable/>, в котором есть блок <div class = 'cafesTable'>, содержащий Прошлый компонент, а сразу после него добавьте список
<ul class="cardsList"></ul>В компоненте <CafesTable/> используйте хук useEffect() для запроса на сервер за данными. Вам необходимо сделать get запрос на сервер по адресу /cafes и отрендерить список кафе в списке. Обратите внимание, что у некоторых карточек отсутствует картинка, в таком случае использвуйте https://via.placeholder.com/150
Пример верстки карточки для кафе:
<li className="card">
<img src="" alt="" />
<h2>Name</h2>
<p>decs</p>
<p>Address</p>
<p>Subway: Arbat</p>
<p>8:00 - 20:00</p>
</li>Добавьте следующий варианты выбора для выподающего списка:
[
{
name: "Арбатская",
code: "Arbat",
},
{
name: "Александровский сад",
code: "Alexanders Garden",
},
{
name: "Московская",
code: "Moscow",
},
{
name: "Парк Культуры",
code: "Culture",
},
{
name: "Театральная",
code: "Theater",
},
];Пример результата:
<option value="Arbat">Арбатская</option>В файле src/FilterCafes.jsx экспортируйте по умолчанию компонент <FilterCafes/>, который отвечает за управление отображаемыми кафе. Он должен при выборе метро отображать кафе только рядом с выбранным метро.