Django3.2 | 30 | QRオーダーシステムの構築 | メニューページ - 学生向けプログラミング入門

[29 | QRコードプリント]　<<　[ホーム]　>>　[31 | アイテム数の実装]

「QRMenu/qrmenu_react/src/pages」フォルダに「Menu.js」ファイルを新規作成します。
作成した「src/pages/Menu.js」ファイルを以下のように編集します。

新規作成　【Desktop/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 params = useParams();

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

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

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

export default Menu;

パスの設定をします。
「src/router/App.js」ファイルに記述を追加します。

記述追加　【Desktop/QRMenu/qrmenu_react/src/router/App.js】

import { BrowserRouter, Switch, Route } from 'react-router-dom';
import { ToastContainer } from 'react-toastify';
import React from 'react';

import { AuthProvider } from '../contexts/AuthContext';
import PrivateRoute from './PrivateRoute';

import Home from '../pages/Home';
import Login from '../pages/Login';
import Register from '../pages/Register';
import Places from '../pages/Places';
import Place from '../pages/Place';
import Menu from '../pages/Menu';

function App() {
  return (
    <AuthProvider>
    <BrowserRouter>
      <Switch>
        <Route exact path='/'>
          <Home />
        </Route>
        <Route exact path='/login'>
          <Login />
        </Route>
        <Route exact path='/menu/:id/:table'>
          <Menu />
        </Route>
        <Route exact path='/register'>
          <Register />
        </Route>
        
        <PrivateRoute exact path='/places/:id'>
          <Place />
        </PrivateRoute>                  
        <PrivateRoute exact path='/places'>
          <Places />
        </PrivateRoute>        
      </Switch>
    </BrowserRouter>
    <ToastContainer />
    </AuthProvider>
  )
}

export default App;

「src/components」フォルダに「MenuList.js」ファイルを新規作成します。
作成した「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 }) => {
    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} />
                           
                        ))
                    }
                </div>
            ))
        }
        </>
    )
};

export default MenuList;