Django3.2 | 31 | QRオーダーシステムの構築 | アイテム数の実装 - 学生向けプログラミング入門

[30 | メニューページ]　<<　[ホーム]　>>　[32 | カートボタン]

「qrmenu_react/src/pages/Menu.js」ファイルを編集します。

記述編集　【QRMenu/qrmenu_react/src/pages/Menu.js】

import { Container, Row, Col } from 'react-bootstrap';
import { useParams } from 'react-router-dom';
import React, { useState, useEffect } from 'react';
import { fetchPlace } from '../apis';

import MenuList from '../components/MenuList';

const Menu = () => {
    const [ place, setPlace ] = useState({});
    const [shoppingCart, setShoppingCart] = useState({});
    const params = useParams();

    const onFetchPlace = async () => {
        const json = await fetchPlace(params.id);
        console.log(json);
        if(json) {
            setPlace(json);
        }
    };

    const onAddItemtoShoppingCart = (item) => {
        setShoppingCart({
            ...shoppingCart,
            [item.id]:{
                ...item,
                quantity: (shoppingCart[item.id]?.quantity || 0) + 1,
            }
        });
    }

    useEffect(() => {
        onFetchPlace();
    }, []);

    return (
        <Container ClassName="mt-5 mb-5">
            <Row className="justify-content-center">
                <Col lg={8}>
                    <MenuList 
                        place={place} 
                        shoppingCart={shoppingCart} 
                        onOrder={onAddItemtoShoppingCart} 
                    />
                </Col>
            </Row>
        </Container>
    )
};

export default Menu;

「src/components/MenuList.js」ファイルを編集します。

記述編集　【QRMenu/qrmenu_react/src/components/MenuList.js】

import React from 'react';
import styled from 'styled-components';
import MenuItem from './MenuItem';

const Place = styled.div`
    text-align: center;
    img {
        border-radius: 5px;
        margin-bottom: 20px;
        margin-top: 20px;
    }
`;

const MenuList = ({ place, shoppingCart, onOrder }) => {
    return (
        <>
        <Place>
            <img src={place.image} with={100} height={100} />
            <h3><b>{place.name}</b></h3>
        </Place>
        {place?.categories
            ?.filter(
                (category) => category.menu_items.filter((i) => i.is_available).length
            )
            .map((category) => (
                <div key={category.id} className="mt-5">
                    <h4 className="mb-4">
                        <b>{category.name}</b>
                    </h4>
                    {category.menu_items
                        .filter((item) => item.is_available)
                        .map((item) => (
                            <MenuItem 
                                key={item.id} 
                                item={{
                                    ...item,
                                    quantity: shoppingCart[item.id]?.quantity,
                                }}
                                onOrder={onOrder} 
                            />
                           
                        ))
                    }
                </div>
            ))
        }
        </>
    )
};

export default MenuList;

「src/components/MenuItem.js」ファイルを編集します。

記述編集　【Desktop/QRMenu/qrmenu_react/src/components/MenuItem.js】

import {Col, Button } from 'react-bootstrap';
import React from 'react';
import styled from 'styled-components';
import { BiEdit } from 'react-icons/bi';
import { AiOutlineDelete } from 'react-icons/ai';

const Container = styled.div`
    border-radius: 5px;
    background-color: white;
    margin-bottom: 30px;
    box-shadow: 1px 1px 8px rgba(0,0,0,0,1);
    display: flex;
    opacity: ${({active}) => (active ? 1 : 0.6)};
    > div: first-child {
        width: 40%;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        background-size: cover;
    }
    > div:last-child {
        padding: 15px 20px;
        min-height: 150px;
    }
`;

const MenuItem = ({ item, onEdit, onRemove, onOrder }) => (
    <Container active={item.is_available}>
        <Col xs={5} style={{ backgroundImage: `url(${item.image})` }} />
        <Col xs={7} className="d-flex flex-column justify-content-between w-100">
            <div>
                <div className="d-flex justify-content-between align-items-center mb-2">                
                    <h4 className="mb-2">
                        <b>{item.name}</b>
                    </h4>
                    <span>
                    { onEdit ? (
                        <Button variant="link" onClick={onEdit}>
                            <BiEdit size={20} />
                        </Button>    
                    ) : null  }
                   { onRemove ? (
                        <Button variant="link" onClick={onRemove}>
                            <AiOutlineDelete size={20} color="red" />
                        </Button>    
                    ) : null  }
                    </span>                           
                </div>

                <p className="mb-4">{item.description}</p>
            </div>
            <div className="d-flex justify-content-between align-items-end">
            <div>
                <h5 className="mb-0 text-standard">
                    <b>{item.price}円</b>
                </h5>

                {onOrder ? (
                    <Button variant="standard" className="mt-2" size="sm" onClick={() => onOrder(item)}>
                        {!item.quantity ? "注文" : `追加注文(現在 ${item.quantity}個選択)`}
                    </Button>
                ) : null}
            </div>

            {!item.is_available ? (<big className="text-danger">品切れ</big>) : null}

            </div>
        </Col>
    </Container>
);

export default MenuItem;