import React, { useEffect, useState } from 'react';
import './GoodsPage.css';
import HeaderLogo from '../header-logo/HeaderLogo';
import axios from 'axios';
export default function GoodsPage() {
const [goods, setGoods] = useState([]);
useEffect( () => {
axios.get('тут адрес базы данных')
.then(res => setGoods(res.data))
.catch(err => console.log(err))
}, []);
const [filtered, setFiltered] = useState([]);
function btnHandlers(e) {
let target = e.target.value;
if (target === 'Все') {
setFiltered(goods);
} else if (target === 'Новинки') {
setFiltered(goods.filter(item => {
return item.new
}))
} else if (target === 'Мясные') {
setFiltered(goods.filter(item => {
return item.meat
}))
} else if (target === 'Острые') {
setFiltered(goods.filter(item => {
return item.spicy
}))
} else if (target === 'Напитки') {
setFiltered(goods.filter(item => {
return item.drink
}))
} else if (target === 'Закуски') {
setFiltered(goods.filter(item => {
return item.snacks
}))
}
}
useEffect( () => {
setFiltered(goods)
}, [goods])
return (
<>
<HeaderLogo />
<div className="goods_page-wrapper">
<div className="goods-container">
<div className="goods-filters-wrapper">
<div className="goods_filter-types">
<button value="Все" className="filter-btn" onClick={btnHandlers}>Все</button>
<button value="Новинки" className="filter-btn" onClick={btnHandlers}>Новинки</button>
<button value="Мясные" className="filter-btn" onClick={btnHandlers}>Мясные</button>
<button value="Острые" className="filter-btn" onClick={btnHandlers}>Острые</button>
<button value="Напитки" className="filter-btn" onClick={btnHandlers}>Напитки</button>
<button value="Закуски" className="filter-btn" onClick={btnHandlers}>Закуски</button>
</div>
<div className="goods_filter-sort">
<span className="icon-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7 10l5 5 5-5H7z"/></svg>
</span>
<p className="sort-title">Сортировать по: </p>
<select className="sort-select" >
<option value="Популярность" className="option-item">Популярности</option>
<option value="Цена" className="option-item">По цене</option>
<option value="Алфавит" className="option-item">По алфавиту</option>
</select>
</div>
</div>
<div className="cards-wrapper"> ... (тут перебор карточек)
</div>
</div>
</>)}