こんにちは、KOUKIです。Reactで画面開発を行なっています。
前回は、Product編集機能を実装しました。
今回は、Orderページの作成にチャレンジしましょう。
尚、「React, NextJS and Golang: A Rapid Guide – Advanced」コースを参考にしています。解釈は私が勝手に付けているので、本物をみたい場合は受講をお勧めします!
前回
事前準備
|
1 2 3 |
touch react-admin/src/models/order.ts touch react-admin/src/models/order-item.ts touch react-admin/src/pages/Orders.tsx |
Order
モデルの作成
データの型タイプをモデルで定義します。
|
1 2 3 4 5 6 7 8 9 10 |
// models/order.ts import { OrderItem } from './order-item' export interface Order { id: number name: string email: string total: number order_items: OrderItem[] } |
|
1 2 3 4 5 6 7 8 9 |
// models/order-item.ts export interface OrderItem { id: number product_title: string price: number quantity: number admin_revenue: number ambassador_revenue: number } |
Orderモデルを作成したので、LinkモデルのOrdersプロパティの型をOrderに変更しましょう。
|
1 2 3 4 5 6 7 8 9 |
// models/link.ts import { Order } from './order' export interface Link { id: string code: string orders: Order[] } |
Orderページの作成
Orderページのテンプレートを作成しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 |
// pages/Orders.tsx import Layout from '../components/Layout' const Orders = () => { return ( <Layout> Orders </Layout> ) } export default Orders |
ルートの追加
次に、Orderページへのルートを追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// App.tsx ... import Orders from './pages/Orders' function App() { return ( <div className="App"> <BrowserRouter> ... <Route path={'/orders'} exact component={Orders}></Route> </BrowserRouter> </div> ); } export default App; |
Menuの変更
Menuに、Orderリンクを追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// src/components/Menu.tsx const Menu = () => { return ( <nav id="sidebarMenu" className="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse"> <div className="position-sticky pt-3"> <ul className="nav flex-column"> ,,, <li className="nav-item"> <NavLink to={'/orders'} className="nav-link" aria-current="page"> Orders </NavLink> </li> </ul> </div> </nav> ) } export default Menu |
ページ遷移の確認
「docker-compose up」でDockerを立ち上げ、「http://localhost:3000/」へアクセスしてTopページを表示してください。
するとMenu一覧に「Orders」が出ていると思うので、それをクリックしてOrderページへ遷移してください。
Order表示機能の実装
Orderページを完成させましょう。
|
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 |
// pages/Orders.tsx import { useEffect, useState } from 'react' import { Accordion, AccordionDetails, AccordionSummary, Table, TableBody, TableCell, TableHead, TableRow } from '@material-ui/core' import { Order } from '../models/order' import Layout from '../components/Layout' import axios from 'axios' const Orders = () => { // Stateの設定 const [orders, setOrders] = useState<Order[]>([]) const orderUrl = 'orders' // ページが読み込まれた時に実行 useEffect(() => { ( async () => { const { data } = await axios.get(orderUrl) setOrders(data) } )() }, []) return ( <Layout> {orders.map(order => { return ( <Accordion key={order.id}> <AccordionSummary> {order.name} ${order.total} </AccordionSummary> <AccordionDetails> <Table> <TableHead> <TableRow> <TableCell>#</TableCell> <TableCell>Product Title</TableCell> <TableCell>Price</TableCell> <TableCell>Quantity</TableCell> </TableRow> </TableHead> <TableBody> {order.order_items.map(item => { return ( <TableRow key={item.id}> <TableCell>{item.id}</TableCell> <TableCell>{item.product_title}</TableCell> <TableCell>{item.price}</TableCell> <TableCell>{item.quantity}</TableCell> </TableRow> ) })} </TableBody> </Table> </AccordionDetails> </Accordion> ) })} </Layout> ) } export default Orders |
Order データをAPIからとってくるやり方は、これまで解説してきたものと同じなので、説明は省きます。
Accordionは、初めて出てきましたね。
Orderデータ表示確認
Orderデータの表示確認をしましょう。
OKですね。
次回
次回は、Profile機能を実装します。
Reactまとめ
参考書籍
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/1919737f.3a3d64cb.19197380.327d0987/?me_id=1278256&item_id=19902768&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Frakutenkobo-ebooks%2Fcabinet%2F6041%2F2000009456041.jpg%3F_ex%3D240x240&s=240x240&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")
ソースコード
ここまで実装したソースコードを下記に記載します。
Orders.tsx
|
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 |
// pages/Orders.tsx import { useEffect, useState } from 'react' import { Accordion, AccordionDetails, AccordionSummary, Table, TableBody, TableCell, TableHead, TableRow } from '@material-ui/core' import { Order } from '../models/order' import Layout from '../components/Layout' import axios from 'axios' const Orders = () => { // Stateの設定 const [orders, setOrders] = useState<Order[]>([]) const orderUrl = 'orders' // ページが読み込まれた時に実行 useEffect(() => { ( async () => { const { data } = await axios.get(orderUrl) setOrders(data) } )() }, []) return ( <Layout> {orders.map(order => { return ( <Accordion key={order.id}> <AccordionSummary> {order.name} ${order.total} </AccordionSummary> <AccordionDetails> <Table> <TableHead> <TableRow> <TableCell>#</TableCell> <TableCell>Product Title</TableCell> <TableCell>Price</TableCell> <TableCell>Quantity</TableCell> </TableRow> </TableHead> <TableBody> {order.order_items.map(item => { return ( <TableRow key={item.id}> <TableCell>{item.id}</TableCell> <TableCell>{item.product_title}</TableCell> <TableCell>{item.price}</TableCell> <TableCell>{item.quantity}</TableCell> </TableRow> ) })} </TableBody> </Table> </AccordionDetails> </Accordion> ) })} </Layout> ) } export default Orders |
App.tsx
|
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 |
// App.tsx import './App.css'; import {BrowserRouter, Route} from 'react-router-dom' import {RedirectToUsers} from './components/RedirectToUsers' import Users from './pages/Users' import Login from './pages/Login' import Register from './pages/Register' import Links from './pages/Links' import Products from './pages/products/Products' import ProductForm from './pages/products/ProductForm' import Orders from './pages/Orders' function App() { return ( <div className="App"> <BrowserRouter> <Route path={'/'} exact component={RedirectToUsers}></Route> <Route path={'/login'} component={Login}></Route> <Route path={'/register'} component={Register}></Route> <Route path={'/users'} exact component={Users}></Route> <Route path={'/users/:id/links'} component={Links}></Route> <Route path={'/products'} exact component={Products}></Route> <Route path={'/products/create'} component={ProductForm}></Route> <Route path={'/products/:id/edit'} component={ProductForm}></Route> <Route path={'/orders'} exact component={Orders}></Route> </BrowserRouter> </div> ); } export default App; |
Menu.tsx
|
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 |
// src/components/Menu.tsx import { NavLink } from "react-router-dom" const Menu = () => { return ( <nav id="sidebarMenu" className="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse"> <div className="position-sticky pt-3"> <ul className="nav flex-column"> <li className="nav-item"> <NavLink to={'/users'} className="nav-link" aria-current="page"> Users </NavLink> </li> <li className="nav-item"> <NavLink to={'/products'} className="nav-link" aria-current="page"> Products </NavLink> </li> <li className="nav-item"> <NavLink to={'/orders'} className="nav-link" aria-current="page"> Orders </NavLink> </li> </ul> </div> </nav> ) } export default Menu |
order.ts
|
1 2 3 4 5 6 7 8 9 10 |
// models/order.ts import { OrderItem } from './order-item' export interface Order { id: number name: string email: string total: number order_items: OrderItem[] } |
order-item.ts
|
1 2 3 4 5 6 7 8 9 |
// models/order-item.ts export interface OrderItem { id: number product_title: string price: number quantity: number admin_revenue: number ambassador_revenue: number } |
link.ts
|
1 2 3 4 5 6 7 8 |
// models/link.ts import { Order } from './order' export interface Link { id: string code: string orders: Order[] } |
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。