import { useState, useEffect } from 'react'; import { Container, Carousel, Row, Col, Button } from 'react-bootstrap'; import MenuItem from '../molecules/MenuItem'; import CacheStorage from './CacheStorage'; import axios from 'axios'; const carouselImages = [ { itemType: 1, imageUrl: '/dishes.jpg' }, { itemType: 2, imageUrl: '/drinks.jpg' }, { itemType: 3, imageUrl: '/desserts.jpg' }, ]; function MenuSection() { const [carouselMaxHeight, setHeight] = useState('700px'); const [index, setIndex] = useState(0); const [menuItems, setMenuItems] = useState({}); // Đối tượng lưu danh sách món theo từng itemType const [loading, setLoading] = useState(true); const handleSelect = (selectedIndex) => { setIndex(selectedIndex); }; // const menuItems = [ // { name: 'Món 1', description: 'Mô tả món 1', imageSrc: '/placeholder3.jpg' }, // { name: 'Món 2', description: 'Mô tả món 2', imageSrc: '/placeholder3.jpg' }, // { name: 'Món 3', description: 'Mô tả món 3', imageSrc: '/placeholder3.jpg' } // ]; const categoryMapper = { 1: 'Món chính', 2: 'Đồ uống', 3: 'Tráng miệng', }; useEffect(() => { const fetchMenuItems = async () => { try { const menuItemsByType = {}; for (const carousel of carouselImages) { // Gọi API để lấy món theo itemType const response = await axios.get(process.env.REACT_APP_API_URL + `/menu-items?limit=3&filter.item_type=${carousel.itemType}`); // Lưu danh sách món theo itemType menuItemsByType[carousel.itemType] = response.data.data; } console.log(menuItemsByType); setMenuItems(menuItemsByType); setLoading(false); CacheStorage.set('homeMenuItems',JSON.stringify(menuItemsByType)); console.log('fetched from API'); } catch (error) { console.error('Error fetching menu items:', error); setLoading(false); } }; if (CacheStorage.get('homeMenuItems')) { setMenuItems(JSON.parse(CacheStorage.get('homeMenuItems'))); setLoading(false); console.log('fetched from cache'); } else { fetchMenuItems(); } }, []); useEffect(() => { const handleResize = () => { if (window.innerWidth < 992) { // md setHeight('1500px'); // Không giới hạn chiều cao } else { setHeight('700px'); // Giới hạn chiều cao cho md trở lên } }; // Đăng ký event resize window.addEventListener('resize', handleResize); // Gọi lần đầu để xác định chiều cao ban đầu handleResize(); // Cleanup return () => { window.removeEventListener('resize', handleResize); }; }, []); let menuContent; if (loading) { menuContent = (
Đang tải dữ liệu
); } else { menuContent = (