概要
BtoC向けEcshopの商品一覧から商品を選択して買いものカゴに加える動きの実装を行います。
記事の内容としましては、フロントエンドの実装方法が中心になります。
２つの記事を元に実装していきます。
繋げるだけだから簡単（なはず）
フロントNext.js バックエンドSpringBootRESTAPIで買い物カゴ実装
バック：SpringBoot フロント:React ページネーション付き商品一覧機能を実装する
ユースケース
杏林堂ネットスーパーの動きを参考にします。
以下gifアニメは杏林堂ネットスーパーを使っている様子
１．商品一覧機能で表示されている商品を購入ボタンを押す
２．ボタンを押すと、買い物カゴに商品が追加される。
開発環境
OS:windows10
バックエンド側：
IDE:IntelliJ Community
spring-boot-starter-parent 2.75
java ： 11
データベース
mysql:8.0.29
クライアントソフト: MySQL Workbench
フロントエンド：
IDE:VScode
├── @types/node@18.11.15
├── @types/react-dom@18.0.9
├── @types/react@18.0.26
├── axios@1.2.1
├── eslint-config-next@13.0.6
├── eslint@8.29.0
├── next-auth@4.18.7
├── next@13.0.6
├── react-bootstrap@2.7.0
├── react-dom@18.2.0
├── react@18.2.0
├── styled-components@5.3.6
├── styled-jsx@5.1.1
└── typescript@4.9.4
実装
GetMethodのAPIを実行したときのレスポンスの例
productResponse.json
productResponse.json
{
"content": [
{
"id": 0,
"name": "国産 豚肩ロース 100g",
"description": "赤身と脂身が良いバランスで、とても食べやすい部位。",
"inStock": true,
"categoryId": 1,
"price": 250.0,
"taxRate": 0.08,
"discountPercent": 0.0,
"image": "1"
},
{
"id": 1,
"name": "アメリカ産 豚切りおとし 230g",
"description": "",
"inStock": true,
"categoryId": 1,
"price": 455.0,
"taxRate": 0.08,
"discountPercent": 0.0,
"image": "1"
},
{
"id": 2,
"name": "国産 豚肉かたロース 150g",
"description": "des",
"inStock": true,
"categoryId": 1,
"price": 387.0,
"taxRate": 0.08,
"discountPercent": 0.0,
"image": "2"
}
],
"pageNo": 0,
"pageSize": 3,
"totalElements": 55,
"totalPages": 19,
"last": false,
"categoryId": 1,
"categoryName": "食肉"
}
cartItemResponse.json
cartItemResponse.json
{
"cartItemDtos": [
{
"id": 45,
"customerId": 25,
"productId": 34,
"quantity": 1,
"productName": "和牛かたスライス 230g",
"priceWithoutTax": 2024.0,
"priceWithTax": 2185.9202
},
{
"id": 46,
"customerId": 25,
"productId": 32,
"quantity": 3,
"productName": "アメリカ産 牛タン 70g",
"priceWithoutTax": 558.0,
"priceWithTax": 602.64
},
{
"id": 47,
"customerId": 25,
"productId": 6,
"quantity": 3,
"productName": "国産 豚肉スペアリブ 300g",
"priceWithoutTax": 534.0,
"priceWithTax": 576.72003
}
],
"productCost": 5300.0,
"shippingCost": 0.0,
"subTotal": 5300.0,
"tax": 424.0,
"total": 5724.0
}
実装のために作成したファイル一覧
Proudct
| ファイル名 | 説明 |
|---|---|
| paginationV2.tsx | ページネーションのコンポーネント |
| productContentV2.tsx | 商品の情報を表示するコンポーネント |
| productService.ts | axiosで作ったapi処理が入っているファイル productドメインを対象 |
| productResponse.d.ts | 商品情報を取得するAPIを実行したときのレスポンスを定義 |
| productView.tsx | 商品一覧機能の完成形、productContentとpaginationを組み合わせたコンポーネント |
| product.d.ts | 商品情報単体の型定義ファイル、productResponse上で使う。 |
CartItem
| ファイル名 | 説明 |
|---|---|
| cartItemServiceV2.ts | axiosで作ったapi処理をが入っているファイル cartItemドメインを対象 |
| cartMainItemV3.tsx | 金額側のコンポーネントファイル 一つだけ生成 |
| cartSubItemV3.tsx | 商品のコンポーネントファイル 商品の数だけコンポーネントを生成する |
| cartItemDto.d.ts | １つの商品の型定義ファイル REST-APIの出力結果に合わせてる |
| cartItemResponse.d.ts | Apiのレスポンスに関する型定義ファイル 商品の配列 金額情報を定義している |
| cartItemView.tsx | 買い物カゴの完成形 cartMainとcartSubItemを組み合わせたコンポーネント |
その他
| ファイル名 | 説明 |
|---|---|
pages/develop/ProductAndCartItem/index.tsx
|
ページのURL state、コンテキスト、ProductViewとCartItemViewの位置の定義を行っているファイル |
実装の方針
データ取得をするApiのpttpレスポンスをStateにして、Contextで子コンポーネントに渡しています。
httpレスポンスが変化するたびにレンダリングが行われるので、適切なタイミングで
現時点ではNext.jsの機能は活用できていないです。ページ機能ぐらいだけです。
実質的にTypeScript+Reactで実装しています。（よくない）
コンポーネントの分け方はこんな感じでとらえてます。
コード（長いので先に「作成したファイル一覧」を御覧ください）
paginationV2
paginationV2.tsx
import { setHttpClientAndAgentOptions } from "next/dist/server/config";
import { useState, useEffect, useCallback, EventHandler, SetStateAction, Dispatch, useContext } from "react";
import { MouseEventHandler } from "react";
import { mainContext } from './index';
/**
* @remarks ページネーション コンポーネント
* 親コンポーネントに現在のページ数を渡します。
* RestApiを呼ぶ関数は親コンポーネント側で行います。
*
* @param totalPage: 総ページ数：固定値として使われる想定
* @param pageNo:現在のページ番号を取得する useState[pageNo, setPageNo]の１つ目の引数
* @param setPageNo:現在のページ番号を更新する useState[page,setPage]の２つ目の引数
*/
export default function PaginationV2(props:{totalPage:number ,pageNo:number, setPageNo:Dispatch<SetStateAction<number>>}) {
let currentPageNo = 1;
const totalPage: number = 10;
let paginationContent: JSX.Element[] = [];
// 前へボタンを押したときの処理
const backHandler = () => {
props.setPageNo( props.pageNo - 1)
};
// 次へボタンを押したときの処理
const nextHandler = () => {
props.setPageNo(props.pageNo + 1)
console.log(props.pageNo);
};
// ページ番号を押したときの処理
const selectNumberHandler = (pg: number) => {
props.setPageNo(pg)
};
return (
<>
<div className="Layout">
{/* 前のページに戻る-ページ数が最初の場合は表示されない */}
<div className="Child">
{props.pageNo != 1 ?
<button className="Font" onClick={backHandler}>前へ</button>
:<div className="Font">    </div> // 「前へ」ボタンが非表示でもレイアウトを維持するための処置。（何もしないと崩れる）
}
</div>
{/* 即時関数を使って1からtotalNumberの数字を作成する。クリックすると押した番号のデータを取得するrestapiを呼ぶ関数を実行する */}
{(() => {
for (let i = 0; i < props.totalPage; i++) {
paginationContent.push(
<>
<button
className= { props.pageNo== i+1 ? 'SelectedChild' :'Child'}
onClick={()=>selectNumberHandler(i+1)}
>
{i + 1}
</button>
</>
);
}
return <div>{paginationContent}</div>;
})()}
{/* 次のページへ進む-ページ数が最後の場合は表示されない */}
<div className="Child">
{props.pageNo != props.totalPage ?
<button className="Font" onClick={nextHandler}>次へ</button>
:<div className="Font">    </div> // レイアウトを維持するために空欄を入れる
}
</div>
 
</div>
<style jsx>{`
// 大枠 要素を横並びにする
.Layout {
display: flex;
flex-wrap: wrap;
align-items: center;
}
// 子の幅 間隔を決定する
.Child {
flex-basis: auto;
align-items: center;
background-color: white;
margin: 3px;
border: none;
}
// 現在のページを明示するために背景色を変える 透明な青色とする
.SelectedChild{
flex-basis: auto;
align-items: center;
background-color: #1c5bcf85;
margin: 5px;
border: none;
}
// 文字のフォントサイズ 背景色設定
.Font {
align-items: center;
background-color: white;
text-align: center;
}
// マウスオーバー時の背景色は透明な灰色
button:hover {
background-color: #1c5bcf85;
}
// 子要素のボタン感を無くすために 色と境界線を無くす
button {
background-color: white;
border: none;
}
`}</style>
</>
);
}
productContent
productContentV2.tsx
import Image from 'next/image';
import { useContext, useState,useEffect } from 'react';
import { mainContext } from '.';
import * as CartItemService2 from "../../../service/cartItemServiceV2";
import { CartItemResponse } from '../../../types/cartItem/cartItemResponse';
interface Props{
id:number;
productName:string;
priceWithoutTax:number;
priceIncludingTax:string;
imageURL:string;
}
/**
*
* @param props 商品情報
* @returns 商品情報を表示するコンポーネント
*/
export default function ProductContentV2(props : Props){
// 個数のプルダウンメニューの値
const[tempNum,setTempNum] = useState<number>(1);
// 買い物カゴ情報をAPIから取得した後、値をを更新するため利用
const {setCartItemsResponse}: any = useContext(mainContext);
// 商品情報の取得に利用
const {productResponse}:any = useContext(mainContext)
// 商品情報を再取得したときに個数の値を１にする
useEffect(()=>{
setTempNum(1)
},[productResponse])
// 購入ボタンを押したとき、買い物かごに商品を追加して、買い物かご情報を取得する。
const addProductHandler = async (event: React.MouseEvent<HTMLButtonElement>) => {
await addCartItem();
await getCartItem();
}
// 個数のプルダウンリストを変更したときに実行される。”一時的”に値を収納する
const onChangeHandler = async(e: React.ChangeEvent<HTMLSelectElement>) => {
await setTempNum(Number(e.target.value))
}
// 新しい商品を買い物カゴに追加する
const addCartItem = async () => {
const response = await CartItemService2.addProductCart2(
props.id,tempNum,
localStorage.getItem("accessToken") as unknown as string
);
};
// ユーザーの買い物カゴ情報を取得する
const getCartItem = async () => {
let response: CartItemResponse = await CartItemService2.getCartItems2(
localStorage.getItem("accessToken") as unknown as string
);
setCartItemsResponse(response);
};
return(
<>
<div className = 'ContentPadding ContentLayout'>
<Image src={props.imageURL}
width={160}
height={150}
alt='logo' />
<div>{props.productName}</div>
<div className='PriceWithoutTaxAndQuantityLayout'>
<div>{`税抜` + props.priceWithoutTax +`円`}</div>
<div>数量</div>
<div>
<select value={tempNum} onChange={(e: React.FormEvent<HTMLSelectElement>)=>onChangeHandler(e)}>
<option value={tempNum}>{tempNum}</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</div>
<div className='PriceIncludingTaxAndBuyButtonLayout'>
<div>{`税込` + props.priceIncludingTax +`円`}</div>
<button onClick={addProductHandler} >購入</button>
</div>
</div>
<style jsx>{`
// 大枠の空白部分を担当
.ContentPadding{
padding: 20px;
border:1px solid black;
}
// 大枠のレイアウト（縦並び）
.ContentLayout{
position:relative;
flex:1;
width:200px;
height:350px;
}
// 税抜き価格と数量のレイアウト（横並び-等間隔）
.PriceWithoutTaxAndQuantityLayout{
display:flex;
justify-content:space-between;
}
// 税込み価格と購入ボタンのレイアウト（横並び-等間隔）
.PriceIncludingTaxAndBuyButtonLayout{
display:flex;
justify-content:space-between;
}
`}</style>
</>
)
}
productService
productService.tsx
import axios, { AxiosResponse } from 'axios';
import { Product } from '../types/product/product';
import { ProductResponse } from '../types/product/productResponse';
export const getProductsByCategoryId2 = async ( pageNo : number,pageSize:number, categoryId:number) =>{
return await axios.get(`http://127.0.0.1:5000/api/products?`
+`pageNo=`+ pageNo
+`&pageSize=`+ pageSize
+`&category=`+ categoryId,
)
.then((response)=>{
return response.data as AxiosResponse<ProductResponse>;
})
.catch((error)=>{
return error;
});
};
productResponse
productResponse.d.ts
export type ProductResponse = {
content : Product[]
pageNo : number
pageSize : number
totalElements : number
totalPages : number
isLast : boolean
categoryId : number
categoryName : string
}
productView
productView.tsx
import { ProductResponse } from '../../../types/product/productResponse';
import { createContext, SetStateAction, useContext, useEffect, useState } from 'react';
import { mainContext } from '.';
import * as productServiceV2 from '../../../service/productServiceV2';
import { Product } from '../../../types/product/product';
import ProductContentV2 from './productContentV2';
import PaginationV2 from './paginationV2';
export default function ProductView(){
// 商品情報のhttpレスポンス
const {productResponse,setProductResponse}:any = useContext(mainContext)
// ページ番号
const [pageNo,setPageNo] = useState<number>(1)
// １ページあたりの商品数
const pageSize : number = 10;
// 検証のためにカテゴリーIDを1に固定
const categoryId : number = 1;
// pageNoが変わるとgetProductByCategoryが実行される
useEffect(() => {
getProductByCategory()
},[pageNo])
// ページネーション化されたカテゴリー毎の商品情報たちを取得する。
const getProductByCategory = async () => {
const response : ProductResponse= await productServiceV2.getProductsByCategoryId2(pageNo - 1,pageSize,categoryId)
setProductResponse(response)
}
return(
<>
<div className="Layout">
{
productResponse?.content.map((product: Product,index:number)=>{
return(
<div className="Child" key={index}>
<ProductContentV2 productName={productResponse.content[index].name} priceWithoutTax={productResponse.content[index].price} priceIncludingTax={(productResponse.content[index].price * (1 + productResponse.content[index].taxRate)).toFixed() as string} imageURL={'/sampleProduct1.JPG'} id={productResponse.content[index].id}/>
</div>
)
})
}
</div>
<div className="PaginationPosition">
<PaginationV2 totalPage={productResponse?.totalPages as number} pageNo={pageNo} setPageNo={setPageNo}/>
</div>
<style jsx>{`
// 大枠
.Layout{
display:flex;
flex-wrap:wrap;
background-color:white;
}
// 子の幅を指定 これしないとレイアウトが崩れる
.Child{
flex-basis:200px;
//align-self:stretch;
}
.PaginationPosition{
margin:auto;
width:50%
}
`}</style>
</>
)
}
product.d
.product.d.ts
/**
* @remarks 商品情報です ページネーション化されたprooduct.d.tsで使われます。
*
* @author RYA234
*
*/
export type Product = {
id:number
name:string
description:string
inStock:boolean
categoryId:number
price:number
taxRate:number
discountPercent:number
image:string
}
cartItemService
cartItemServiceV2.tsx
import axios, { AxiosResponse } from 'axios';
import { response } from 'msw';
/**
*
* @remarks SpringBootで作ったAPIを呼ぶ関数
*
*
* @param jwtAccessKey
* @returns
*/
export function addProductCart2(productId:number,quantity:number, jwtAccessKey:string){
return axios.post(`http://127.0.0.1:5000/api/cart/add`
+ `?productId=` +productId
+ `&quantity=` +quantity
,{},
{ headers : {
'Authorization': `Bearer ${jwtAccessKey}`,
'Request-Method' : 'POST',
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': 'http://127.0.0.1:5000/*',
'Access-Control-Allow-Headers': 'accept, accept-language, content-language, content-type',
'Access-Control-Allow-Credentials': 'true'
}}
).then((response)=>{
console.log("cartItems is added");
})
.catch((error) => {
console.log("cartItems are not set");
});
}
export const getCartItems2 = async (jwtAccessKey : string) => {
return await axios.get(`http://127.0.0.1:5000/api/cart/all`,
{
headers: {
'Authorization': `Bearer ${jwtAccessKey}`
}
}
)
.then((response) => {
{
const cartItems: CartItem[] = response.data;
console.log(cartItems);
console.log("service is ended");
return response.data as AxiosResponse<CartItem[]>;
}
})
.catch((error) => {
console.log("cartItems are not set");
return error;
});
}
export const updateQuantity2 = async (productId:number,quantity:number,jwtAccessKey:string) =>{
return await axios.put(`http://127.0.0.1:5000/api/cart/update`
+ `?productId=` +productId
+ `&quantity=` +quantity,
{},
{ headers : {
'Authorization': `Bearer ${jwtAccessKey}`,
'Request-Method' : 'PUT',
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': 'http://127.0.0.1:5000/*',
'Access-Control-Allow-Headers': 'accept, accept-language, content-language, content-type',
'Access-Control-Allow-Credentials': 'true'
}}
)
.then((response) => {
console.log(response.data);
})
.catch((error) => {
console.log("update is failed");
});
}
export const removeProduct2 = async (productId:number, jwtAccessKey:string) =>{
return await axios.delete(`http://127.0.0.1:5000/api/cart/remove`
+`?productId=`+ productId,
{ headers : {
'Authorization': `Bearer ${jwtAccessKey}`
}}
)
.then((response) => {
console.log(response.data);
})
.catch((error) => {
console.log(error);
});
;
}
cartMainItem
cartMainItemV3.tsx
import { useContext, useState } from "react";
import {mainContext } from './index';
// ショッピングカートの金額情報を表示するコンポーネント
export default function CartMainItemV3(this :any) {
const {cartItemsResponse} : any= useContext(mainContext)
console.log("cartItemsResponse is" + cartItemsResponse)
return (
<div className="Layout" key={cartItemsResponse}>
<div className="Title">買い物カゴの中身</div>
<button className="PurchaseButton">決済へ</button>
<div className="MoneyInfomation">
<div>合計額:</div>
{/* cartItemsResponse.totalだとエラーになる「TypeError: Cannot read properties of undefined」 */}
<div>{cartItemsResponse?.total.toFixed()}円</div>
</div>
<div className="MoneyInfomation">
<div>商品小計:</div>
<div>{cartItemsResponse?.productCost}円</div>
</div>
<div className="MoneyInfomation">
<div>配送料:</div>
<div>{cartItemsResponse?.shippingCost}円</div>
</div>
<div className="MoneyInfomation">
<div>消費税:</div>
<div>{cartItemsResponse?.tax.toFixed()}円</div>
</div>
<style jsx>{`
footer{
}
.Layout{
display: flex;
flex-direction: column;
width:200px;
aligh-items: center;
border: 1px solid black;
}
.Title{
align-self: center;
}
.PurchaseButton{
width:100px;
align-self: center;
}
.MoneyInfomation{
display: flex;
flex-direction: row;
justify-content:space-around;
}
`}</style>
</div>
)
}
cartSubItemV
cartSubItemV3.tsx
import React, { useContext, useState } from "react";
import {mainContext } from "./index";
import * as cartItemServiceV2 from "../../../service/cartItemServiceV2";
import { CartItemResponse } from "../../../types/cartItem/cartItemResponse";
// ショッピングカートの商品部分のコンポーネント
export default function CartSubItemV3(props:{index:number}) {
const { cartItemsResponse, setCartItemsResponse}: any = useContext(mainContext);
// 数量を変えたときに一時的に収納する値 修正ボタンを押したときこの値に入っている値を処理をする
let [tempNum, setTempNum] = useState<number>(cartItemsResponse?.cartItemDtos[props.index]?.quantity);
// 「削除」ボタンを押した時の処理 コンポーネントを削除して情報の更新
const onDeleteButtonHandler = async (event: React.MouseEvent<HTMLButtonElement>) => {
await removeCartItem();
await getCartItem();
};
// 「修正」ボタン押した時の処理-数量を変更して描画更新
const onQuantityChangeButtonHandler = async (
event: React.MouseEvent<HTMLButtonElement>
) => {
await updateCartItem();
await getCartItem();
};
//プルダウンリストで数量変更を変更したときに実行。”一時的”に値を保持する。
const onChangeHandler = (e: React.FormEvent<HTMLSelectElement>) => {
setTempNum(e.currentTarget.value as unknown as number);
console.log(
`商品名:${cartItemsResponse.cartItemDtos[props.index].productName}のセレクトボックス表示が${tempNum} に変更されました。)`
);
};
// データベースからユーザーの買い物カゴの商品情報を取得する関数
const getCartItem = async () => {
let response: CartItemResponse = await cartItemServiceV2.getCartItems2(
localStorage.getItem("accessToken") as unknown as string
);
setCartItemsResponse(response);
};
//買い物カゴの 商品を一つ削除
const removeCartItem = async () => {
await cartItemServiceV2.removeProduct(
cartItemsResponse.cartItemDtos[props.index].productId,
localStorage.getItem("accessToken") as string
);
console.log(removeCartItem);
};
// 買い物カゴに入った数量を変更
const updateCartItem = async () => {
await cartItemServiceV2.updateQuantity2(
cartItemsResponse.cartItemDtos[props.index].productId,
tempNum,
localStorage.getItem("accessToken") as string
);
};
return (
<div className="Layout">
<div>{cartItemsResponse?.cartItemDtos[props.index].productName}</div>
<div>税抜{cartItemsResponse?.cartItemDtos[props.index].priceWithoutTax}円</div>
<div className="IncludingTax">
税込{cartItemsResponse?.cartItemDtos[props.index].priceWithTax.toFixed()}円
</div>
<div className="SubLayout">
<select
value={tempNum}
onChange={(e: React.FormEvent<HTMLSelectElement>) =>
onChangeHandler(e)
}
>
<option value={tempNum}>{tempNum}</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<button
className="ModifyButton"
onClick={onQuantityChangeButtonHandler}
>
修正
</button>
<button className="DeleteButton" onClick={onDeleteButtonHandler}>
削除
</button>
</div>
<style jsx>{`
.Layout {
display: flex;
flex-direction: column;
width: 200px;
aligh-items: center;
border: 1px solid black;
}
.SubLayout {
display: flex;
flex-direction: row;
column-gap: 10px;
}
.IncludingTax {
color: red;
}
.ModifyButton {
background-color: green;
color: white;
}
.DeleteButton {
background-color: red;
color: white;
}
`}</style>
</div>
);
}
cartItemDto
cartItemDto.tsx
export type CartItemDto={
id:number
customerId:number
productId:number
quantity:number
productName:string
priceWithoutTax:number
priceWithTax:number
}
cartItemReponse
cartItemResponse.d.ts
// CartItemを取得した時のレスポンスの型定義
export type CartItemResponse = {
// 各々商品の情報
cartItemDtos : CartItemDto[]
// 商品の合計額(税抜き)
productCost:number
// 配送料(4000円だと無料)
shippingCost:number
// ？？？
subTotal:number
// 消費税の合計額
tax:number
// お客様が支払う金額
total:number
}
cartItemView
cartItemView.tsx
import { CartItemResponse } from "../../../types/cartItem/cartItemResponse";
import { useContext } from 'react';
import { mainContext } from './index';
import CartMainItemV3 from "./cartMainItemV3";
import CartSubItemV3 from './cartSubItemV3';
import { CartItemDto } from '../../../types/cartItem/cartItemDto';
// 買い物カゴの金額情報と買い物カゴに入れた商品情報たちを束ねてるコンポーネント
export default function CartItemView(){
// carItemのResponse Contextで子コンポーネントに渡す
const {cartItemsResponse} : any =useContext(mainContext);
// 新しい商品を買い物カゴに追加する
return (
<div>
{/* MainItemsの実装 金額関係 */}
<CartMainItemV3 />
{/* SubItemsの実装 買い物カゴにいれた商品 */}
{cartItemsResponse?.cartItemDtos.map((cartItemDtos:CartItemDto, index:number) => {
return (
<>
<CartSubItemV3 index={index} />
</>
);
})}
</div>
);
}
pages/develop/ProductAndCartItem/index
pages/develop/ProductAndCartItem/index.tsx
import { createContext, useState,useEffect } from "react";
import { CartItemResponse } from "../../../types/cartItem/cartItemResponse";
import { Customer } from "../../../types/customer";
import { ProductResponse } from "../../../types/product/productResponse";
import * as CustomerService from "../../../service/customerService";
import * as CartItemService2 from "../../../service/cartItemServiceV2";
import ProductView from "./productView";
import CartItemView from "./cartItemView";
export const mainContext = createContext(0);
// 商品一覧機能と買い物カゴ機能をつなげる方法を確認するページ
// http://127.0.0.1:3000/develop/cartItemAndProduct
export default function Index() {
// 商品情報のhttpレスポンス
const [productResponse, setProductResponse] = useState<ProductResponse>();
// 買い物カゴ情報のhttpレスポンス
const [cartItemsResponse, setCartItemsResponse] = useState<CartItemResponse>();
// 初回時 ログインしてユーザーの買い物かご情報を取得する。
useEffect(() => {
loginAndGetCartItem();
},[]);
// ログインするときに必要なユーザー情報
const loginRequestBody: Customer = {
email: "aaaba@gmail.com",
password: "test",
append: function (arg0: string, inputEmail: string): unknown {
throw new Error("Function not implemented.");
},
};
// ログインしてカートアイテムの情報を取得する
const loginAndGetCartItem = async () => {
const response = await CustomerService.signIn2(loginRequestBody);
localStorage.setItem("accessToken", response);
await getCartItem();
};
// ユーザーのカート情報を取得する
const getCartItem = async () => {
let response: CartItemResponse = await CartItemService2.getCartItems2(
localStorage.getItem("accessToken") as unknown as string
);
setCartItemsResponse(response);
};
return(
<div className="Layout">
<div className="ProductViewPosition">
<mainContext.Provider value={{ productResponse, setProductResponse,setCartItemsResponse }}>
<ProductView />
</mainContext.Provider>
</div>
<div className="CartItemViewPosition">
<mainContext.Provider value={{ cartItemsResponse, setCartItemsResponse }}>
<CartItemView />
</mainContext.Provider>
</div>
<style jsx>{`
.Layout{
display:flex;
flex-direction:row;
}
// ProductViewは中心に置く
.ProductViewPosition{
display:flex;
flex-basis:1000px;
flex-wrap:wrap;
// width:500px;
}
// CartItemViewは右側に置く
.CartItemViewPosition{
//align-self:stretch;
}
`}</style>
</div>
);
}
実装後の確認
左側はViewを確認するためブラウザ、右側はDBを確認するためMySqlWorkBenchです。
商品一覧から商品を追加すると、買い物カゴに追加される。
ブラウザとDBともに商品が加えられていることを確認できます。期待した動きができています。
次やること
商品カテゴリーメニューを実装して、カテゴリー毎に商品を表示できるようにする。
以下杏林堂ネットスーパーの参考図
参考
杏林堂ネットスーパー