From 7d19ce28127fa609f8e64732afe0e18b06c3ce14 Mon Sep 17 00:00:00 2001
From: Kosei805 <na913420ka85@gmail.com>
Date: Sat, 23 Nov 2024 13:42:46 +0900
Subject: [PATCH] add: book edit page breadcrumbs list

---
 .../app/routes/home.books.$bookId/route.tsx   | 31 ++++++++++++++-----
 1 file changed, 23 insertions(+), 8 deletions(-)

diff --git a/frontend/app/routes/home.books.$bookId/route.tsx b/frontend/app/routes/home.books.$bookId/route.tsx
index f74420ec..32b9f621 100644
--- a/frontend/app/routes/home.books.$bookId/route.tsx
+++ b/frontend/app/routes/home.books.$bookId/route.tsx
@@ -4,7 +4,7 @@ import type {
 	LoaderFunctionArgs,
 } from '@remix-run/cloudflare';
 import { json, redirect } from '@remix-run/cloudflare';
-import { Outlet, useLoaderData } from '@remix-run/react';
+import { Outlet, useLoaderData, useLocation } from '@remix-run/react';
 import type { getBookResponse, getLoansResponse } from 'client/client';
 import { deleteBook, getBook, getLoans } from 'client/client';
 import { commitSession, getSession } from '~/services/session.server';
@@ -119,6 +119,7 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 
 const BookDetail = () => {
 	const { bookResponse, loansResponse } = useLoaderData<typeof loader>();
+	const location = useLocation();
 	switch (bookResponse.status) {
 		case 400:
 			return <ErrorComponent message="リクエストが不正です" />;
@@ -130,13 +131,27 @@ const BookDetail = () => {
 	return (
 		<Stack bg="var(--mantine-color-body)" align="stretch" justify="flex-start">
 			<BreadCrumbsComponent
-				anchors={[
-					{ title: '蔵書一覧', href: '/home' },
-					{
-						title: bookResponse.data.title,
-						href: `/home/books/${bookResponse.data.id}`,
-					},
-				]}
+				anchors={
+					location.pathname.includes('/edit')
+						? [
+								{ title: '蔵書一覧', href: '/home' },
+								{
+									title: bookResponse.data.title,
+									href: `/home/books/${bookResponse.data.id}`,
+								},
+								{
+									title: '書籍情報編集',
+									href: `/home/books/${bookResponse.data.id}/edit`,
+								},
+							]
+						: [
+								{ title: '蔵書一覧', href: '/home' },
+								{
+									title: bookResponse.data.title,
+									href: `/home/books/${bookResponse.data.id}`,
+								},
+							]
+				}
 			/>
 			<Grid gutter={rem(50)}>
 				<Grid.Col span={3}>