Hugging Face's logo

Spaces:
pbl6-cats
/
PBL6-informative-system
Sleeping

App Files Community
PBL6-informative-system
File size: 4,746 Bytes 
0d37b12
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
 
import { useState, useEffect } from 'react';
import { Button, Container, Row, Col, Tab, Tabs, Alert } from 'react-bootstrap';
import AdminTemplate from "../../templates/AdminTemplate";
import DataStorage from '../../organisms/DataStorage';
import axios from 'axios';
import MenuItem from '../../molecules/MenuItem';
import { useNavigate } from 'react-router-dom';

const categoryMapper = [
    { itemType: 1, category: 'Món chính' },
    { itemType: 2, category: 'Đồ uống' },
    { itemType: 3, category: 'Tráng miệng' },
];

export default function AdminMenuPage() {

    const navigate = useNavigate();

    useEffect(() => {
        if (!DataStorage.get('isLoggedInAdmin')) {
            navigate('/admin-login');
        }
    }, [navigate]);

    const [error, setError] = useState("");
    const [loading, setLoading] = useState(true);
    const [menuItems, setMenuItems] = useState({});
    const [key, setKey] = useState(0);

    function organizeMenuItemsByType(menuData) {
        // Lấy ra tất cả menu_item từ array ban đầu
        const menuItems = menuData.map(item => item);

        // Tạo một object để nhóm menu_item theo item_type, khởi tạo các mảng rỗng cho mỗi item_type từ categoryMapper
        const organizedItems = categoryMapper.reduce((acc, { itemType }) => {
            acc[itemType] = [];
            return acc;
        }, {});

        // Thêm menu_item vào organizedItems theo item_type
        menuItems.forEach(menuItem => {
            const type = menuItem.item_type;

            // Đưa menu_item vào array của item_type tương ứng
            if (organizedItems[type]) {
                organizedItems[type].push(menuItem);
            }
        });

        return organizedItems;
    }

    useEffect(() => {
        const fetchMenuItems = async () => {
            try {
                let menuItemsByType = {};
                // Gọi API để lấy món theo itemType
                const response = await axios.get(process.env.REACT_APP_API_URL + `/menu-items?limit=100`);
                // Lưu danh sách món theo itemType
                console.log('Response', response.data.data);
                menuItemsByType = organizeMenuItemsByType(response.data.data);

                console.log(menuItemsByType);
                setMenuItems(menuItemsByType);
                setLoading(false);
            } catch (error) {
                setError(JSON.stringify(error));
                setLoading(false);
            }
        }
        fetchMenuItems()
    }, [])


    let menuContent;

    if (loading) {
        menuContent = (<p>Đang tải thực đơn...</p>);
    } else {
        menuContent = (<Tabs
            id="controlled-tab-example"
            activeKey={key}
            onSelect={(k) => setKey(k)}
            className="mb-3 custom-tab"
        >
            {categoryMapper.map((category, index) => (
                <Tab eventKey={index} title={category.category}>
                    <Container fluid className='my-5'>
                        <Row md={3} className="g-4">
                            {menuItems[category.itemType]?.map((item, idx) => (
                                <Col key={item.id}>
                                    <div onClick={() => navigate(`/admin-menu-edit?id=${item.id}`)}>
                                        <MenuItem
                                            dishName={item.item_name}
                                            description={item.description}
                                            imageSrc={item.image_url}
                                        />
                                    </div>
                                </Col>
                            ))}
                        </Row>
                    </Container>
                </Tab>
            ))}
        </Tabs>);
    }

    return (
        <AdminTemplate content={
            (
                <Container className='text-center align-items-center justify-content-center' style={{ minHeight: '80vh' }}>

                    {error && <Alert variant="danger">{error}</Alert>}

                    <h1 className='mb-5'>Menu</h1>
                    <Row className='my-5 justify-content-center align-items-center'>
                        <Col xs={8} md={4} lg={2}>
                            <Button onClick={() => navigate(`/admin-menu-edit`)}>
                                Bổ sung món mới
                            </Button>
                        </Col>
                    </Row>
                    <Row className="align-items-center">
                        {menuContent}
                    </Row>
                </Container>
            )
        } />
    );
}