概要

BtoC向けECショップのクローンサイトを作っています。
今回はカテゴリーメニューを実装してカテゴリー毎に商品表示できるようにします。
前回の記事の続きでページ左側にカテゴリーメニューを追加します。

フロントNext.js バックSpringBoot　商品一覧から商品を選択して買い物カゴに加える動きを実装する

ユースケース

杏林堂ネットスーパーを参考にします。

1.カテゴリーの項目を選択する
２．選択したカテゴリーの商品群が表示される。

※カテゴリーについて
カテゴリーには親カテゴリーと子カテゴリーがある。
親カテゴリーはクリックできない。子カテゴリーのみ商品の切り替えができる
孫カテゴリーは対応していない

開発環境

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

実装

作成したファイル一覧

ファイル名	説明
index.tsx	既存のファイル。カテゴリーに関するStateを２つを追加
categoryMenu.tsx	カテゴリーメニューのコンポーネント子カテゴリーの動きはCSSのみで実現
category.d.ts	カテゴリー単体の型定義ファイル
categoryService.ts	Api処理が入っている。axiosを利用
productView.tsx	既存のファイル。カテゴリーが変化したときに商品情報を更新するファイルを追加

実装の方針

useEffectを使って、初回時にカテゴリー情報を取得する。

カテゴリーを切り替える時の動き
１．カテゴリーを押すとCategoryId(UseStateになっている)の値が更新される。
２．CategoryIdの値が変化したら商品情報を再取得する。（useEffectを利用）
３．取得した商品情報はproductResponseに代入する。
　　productResponseはState化されているので、再レンダリングされる。

※CategoryIdはcontextを使って他のコンポーネント渡している。(index.tsxでcreateContextをしてる)

コード部分

index.tsx

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 * as CategoryService from "../../../service/categoryService";
import ProductView from "./productView";
import CartItemView from "./cartItemView";
+import CategoryMenu from "./categoryMenu";
+import { Category } from "../../../types/category/category";
+import * as productServiceV2 from '../../../service/productServiceV2';

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>();
  // カテゴリー情報のhttpレスポンス
+  const [categoryResponse,setCategoryResponse] = useState<Category[]>([]);
+  const[categoryId,setCategoryId] = useState<number>(1);

 

  // 初回時　ログインしてユーザーの買い物かご情報を取得する。
 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();
+	await getCategory();
  };

  // カテゴリーの情報を取得する
+  const getCategory = async () => {
+	const response = await CategoryService.getCategories();
+	await setCategoryResponse(response);
+  }
  // ユーザーのカート情報を取得する
  const getCartItem = async () => {
    let response: CartItemResponse = await CartItemService2.getCartItems2(
      localStorage.getItem("accessToken") as unknown as string
    );
+	await  setCartItemsResponse(response);
  };


  return(
  	<div className="Layout">
+		<div className="CategoryMenuPosition">
+			<mainContext.Provider value={{ categoryResponse,setCategoryId}}>
+				<CategoryMenu/>
+			</mainContext.Provider>
+		</div>
		<div className="ProductViewPosition">
+			<mainContext.Provider value={{ productResponse, +setProductResponse,setCartItemsResponse,categoryId }}>
				<ProductView />
			</mainContext.Provider>
		</div>

		<div className="CartItemViewPosition">
		<mainContext.Provider value={{ cartItemsResponse, setCartItemsResponse }}>
			<CartItemView />
		</mainContext.Provider>

		</div>

		<style jsx>{`
			.Layout{
				display:flex;
				flex-direction:row;
			}				
+			.CategorymenuPosition{
+				flex-basis:400px;
			}
			// ProductViewは中心に置く
			.ProductViewPosition{
				display:flex;
				flex-basis:1000px;
				flex-wrap:wrap;					
				// width:500px;

			}
			// CartItemViewは右側に置く
			.CartItemViewPosition{
				//align-self:stretch;
			}
		`}</style>
  
  	</div>
	);
}

categoryMenu.tsx

categoryMenu.tsx

import test from "node:test";
import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useContext, useEffect, useState } from "react";
import { Category } from "../../../types/category/category";
import { CategoryResponse } from '../../../types/category/categoryResponse';
import { mainContext } from './index';

// todo リファクタリング必要


// カテゴリーメニューのコンポーネント
export default function CategoryMenu() {
	const {categoryResponse,setCategoryId} : any = useContext(mainContext);

	const handlerClick = (onClickedCategoryId: number) => {
		console.log(onClickedCategoryId)
		setCategoryId(onClickedCategoryId);
	}	
	return (
		<div>
			カテゴリー覧
			<nav>
			<ul>
				{
					categoryResponse.map((category: Category) => {
						// 親カテゴリーだった場合表示する。
						if (category.parent == null)
							return (
								// eslint-disable-next-line react/jsx-key
								<li className='mainMenu'>
									<a href="#">{category.name}</a>					
									<ul>
										{
											// 子カテゴリーを表示する。
											 category.children.map(count => {
												const  title  = categoryResponse.at(count).name;
												return(
										
													<li key={count}>
														<button className="ButtonLayout"  onClick={() => handlerClick(categoryResponse.at(count).id)} >{title}</button>	
													</li>			
												)
											 })
										}
									</ul>
									
								</li>
							);
					})
				}
			</ul>
			</nav>
			<>

			</>
			<style jsx>{`	
				// 親カテゴリの設定 リストの・を消す。
				nav ul{		
					list-style: none;
				}

				// 子カテゴリのデフォルトのcss設定
				// hiddenで非表示にしてleftで位置崩れを防いでいる
				nav ul li ul{
					position:absolute;
					visibility: hidden;
					left:0px;
				}

				// 親カテゴリをマウスオーバーしたときに、子カテゴリを表示する。				
				nav  li.mainMenu:active > ul,
				nav  li.mainMenu:hover > ul,
				{
					position:absolute;
					z-index:5;
					visibility: visible;
					list-style: none;
					// ↓↓使うコンポーネントによっては、修正の必要があるかも…
					padding: 20px;
				    margin: 20px 10px 100px 0px;
					top:0px;
				    left:100px;
					width:180px;
					background-color: white;					
					// ↑↑使うコンポーネントによっては、修正の必要があるかも…
				}
				.ButtonLayout{
					background-color: white;
					border: none;
				}
			`}</style>
		</div>
	)
}

category.d.ts

category.ts

/**
 * @remarks 商品のカテゴリーを表す型です。
 * 
 * @auther RYA234 
 * 
 */

export  type Category = {
	/** MySQL側のIDです。*/
	id:number
	/** リンクとしてつかうので英語が入ります。  */
	alias:string
	/**　html上で表示されるカテゴリー名称です。日本語が入ることを想定してます。 */
	name:string
	/** サブカテゴリーです。サブカテゴリーを持つ場合対応するidが入ります。サブカテゴリーがない場合はnullが入ります。 */
	children:number[];
	// 親カテゴリーのidが入ります。親が存在する場合はそのidが入ります。親が存在しない場合はnullが入ります。
	parent : number;
}

categoryService.ts

categoryService.ts

import axios, { AxiosResponse } from 'axios';
import { Category } from '../types/category/category';
import { CategoryResponse } from '../types/category/categoryResponse';

 export  const getCategories = async () =>{
	return await axios.get(`http://127.0.0.1:5000/api/category/all`)
	.then((response)=>{
		return response.data as AxiosResponse<Category[]>;
	})
	.catch((error)=>{
		return error;
	});
};

productView.tsx

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,categoryId}:any = useContext(mainContext)
	// ページ番号
	const [pageNo,setPageNo] = useState<number>(1)
	
	// １ページあたりの商品数
	const pageSize : number = 10;
	
-	// 検証のためにカテゴリーIDを1に固定
-	// const categoryId : number = 1;
	
	// pageNoが変わるとgetProductByCategoryが実行される
	useEffect(() => {
		getProductByCategory()
	},[pageNo])
	
+	// categoryIdが変わるとgetProductByCategoryが実行されてpageNoを1に戻す。
+	useEffect(() => {
+		getProductOnChangeCategory()
+	},[categoryId])
	

	// ページネーション化されたカテゴリー毎の商品情報たちを取得する。
	const getProductByCategory = async () => {
		const response : ProductResponse= await productServiceV2.getProductsByCategoryId2(pageNo - 1,pageSize,categoryId)
+		await setProductResponse(response)
+	}

+	const getProductOnChangeCategory = async () => {
+		const response : ProductResponse= await productServiceV2.getProductsByCategoryId2(0,pageSize,categoryId)
+		await setPageNo(1);
+		await 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>		
		</>
	)
}

実装後の確認

カテゴリーボタンを押して商品一覧が切り替わることを確認

下gifアニメはその時の様子です。初期のカテゴリーは肉から魚、野菜と切り替えています。

参考

参考にしたサイト（杏林堂ネットスーパー）

カテゴリーメニューの実装方法　cssのみで実装できる（当時はcssの擬似クラス（hoverとか）がわからなくて質問した）