From d543153941027c9280eea067a411e2043b8cfe7f Mon Sep 17 00:00:00 2001
From: Kosei805 <na913420ka85@gmail.com>
Date: Thu, 14 Nov 2024 09:09:20 +0900
Subject: [PATCH] fix: organize function, props, function name

---
 frontend/app/components/books/BookCard.tsx    |  9 +++++++--
 .../components/books/BookCardCartButton.tsx   | 11 ++++++++---
 .../app/components/books/BookCardFooter.tsx   |  5 +++--
 .../app/components/books/BookCardHeader.tsx   | 18 ++++++------------
 .../app/components/cart/CartCardHeader.tsx    | 13 ++++++-------
 .../app/components/cart/CartListComponent.tsx | 10 +++++++---
 .../components/cart/CartSelectedDialog.tsx    |  8 +++++---
 frontend/app/routes/home.cart/route.tsx       |  6 ++++--
 frontend/app/utils/cart.ts                    | 19 -------------------
 9 files changed, 46 insertions(+), 53 deletions(-)

diff --git a/frontend/app/components/books/BookCard.tsx b/frontend/app/components/books/BookCard.tsx
index 0e4b19ba..7eb2a3d0 100644
--- a/frontend/app/components/books/BookCard.tsx
+++ b/frontend/app/components/books/BookCard.tsx
@@ -18,7 +18,6 @@ const BookCard = ({ book }: BookCardProps) => {
 				<BookCardHeader
 					id={book.id}
 					stock={book.stock}
-					title={book.title}
 					thumbnail={book.thumbnail}
 				/>
 			</Card.Section>
@@ -26,7 +25,13 @@ const BookCard = ({ book }: BookCardProps) => {
 				<BookCardThumbnail id={book.id} thumbnail={book.thumbnail} />
 			</Card.Section>
 
-			{!!user && <BookCardFooter id={book.id} stock={book.stock} />}
+			{!!user && (
+				<BookCardFooter
+					id={book.id}
+					stock={book.stock}
+					thumbnail={book.thumbnail}
+				/>
+			)}
 		</Card>
 	);
 };
diff --git a/frontend/app/components/books/BookCardCartButton.tsx b/frontend/app/components/books/BookCardCartButton.tsx
index fb564e78..57fa666f 100644
--- a/frontend/app/components/books/BookCardCartButton.tsx
+++ b/frontend/app/components/books/BookCardCartButton.tsx
@@ -2,17 +2,22 @@ import { Button } from '@mantine/core';
 import { useAtom } from 'jotai';
 import { BiSolidCartAdd } from 'react-icons/bi';
 import { cartAtom } from '~/stores/cartAtom';
-import { addBookToCart } from '~/utils/cart';
+import { addBooksToCart } from '~/utils/cart';
 
 interface BookCardCartButtonProps {
 	id: number;
 	stock: number;
+	thumbnail?: string;
 }
 
-const BookCardCartButton = ({ id, stock }: BookCardCartButtonProps) => {
+const BookCardCartButton = ({
+	id,
+	stock,
+	thumbnail,
+}: BookCardCartButtonProps) => {
 	const [cart, setCart] = useAtom(cartAtom);
 	const addCart = () => {
-		setCart(addBookToCart(cart, id, stock));
+		setCart(addBooksToCart(cart, [{ id, stock, thumbnail }]));
 	};
 	return (
 		<Button
diff --git a/frontend/app/components/books/BookCardFooter.tsx b/frontend/app/components/books/BookCardFooter.tsx
index dc6753c3..a3cb1a08 100644
--- a/frontend/app/components/books/BookCardFooter.tsx
+++ b/frontend/app/components/books/BookCardFooter.tsx
@@ -4,12 +4,13 @@ import BookCardCartButton from './BookCardCartButton';
 interface BookCardFooterProps {
 	id: number;
 	stock: number;
+	thumbnail?: string;
 }
 
-const BookCardFooter = ({ id, stock }: BookCardFooterProps) => {
+const BookCardFooter = ({ id, stock, thumbnail }: BookCardFooterProps) => {
 	return (
 		<Center pt={10}>
-			<BookCardCartButton id={id} stock={stock} />
+			<BookCardCartButton id={id} stock={stock} thumbnail={thumbnail} />
 		</Center>
 	);
 };
diff --git a/frontend/app/components/books/BookCardHeader.tsx b/frontend/app/components/books/BookCardHeader.tsx
index ee4893b7..09235cc9 100644
--- a/frontend/app/components/books/BookCardHeader.tsx
+++ b/frontend/app/components/books/BookCardHeader.tsx
@@ -7,24 +7,18 @@ import BookCardHeaderBadge from './BookCardHeaderBadge';
 interface BookCardHeaderProps {
 	id: number;
 	stock: number;
-	title: string;
 	thumbnail?: string;
 }
 
-const BookCardHeader = ({
-	id,
-	stock,
-	title,
-	thumbnail,
-}: BookCardHeaderProps) => {
+const BookCardHeader = ({ id, stock, thumbnail }: BookCardHeaderProps) => {
 	const [selectedBook, setSelectedBook] = useAtom(selectedBooksAtom);
 	const [user] = useAtom(userAtom);
 	//  選択されている本のIDと表示する本のIDを比較する関数
-	const selectedCheck = (element: SelectedBookProps) => element.id === id;
+	const isSelected = (element: SelectedBookProps) => element.id === id;
 
-	const selectedBookAdd = () => {
+	const switchBookSelect = () => {
 		// チェックボックスの状態が変化した時に
-		if (selectedBook.some(selectedCheck)) {
+		if (selectedBook.some(isSelected)) {
 			// すでに選択されていた場合は選択を外す
 			setSelectedBook(selectedBook.filter((element) => element.id !== id));
 		} else {
@@ -38,8 +32,8 @@ const BookCardHeader = ({
 			{!!user && (
 				<Checkbox
 					value={id}
-					checked={selectedBook.some(selectedCheck)}
-					onChange={selectedBookAdd}
+					checked={selectedBook.some(isSelected)}
+					onChange={switchBookSelect}
 				/>
 			)}
 			<BookCardHeaderBadge stock={stock} />
diff --git a/frontend/app/components/cart/CartCardHeader.tsx b/frontend/app/components/cart/CartCardHeader.tsx
index b12e69b8..3a405125 100644
--- a/frontend/app/components/cart/CartCardHeader.tsx
+++ b/frontend/app/components/cart/CartCardHeader.tsx
@@ -1,7 +1,6 @@
 import { Checkbox, Group } from '@mantine/core';
 import { useAtom } from 'jotai';
-import type { SelectedBookProps } from '~/stores/bookAtom';
-import { cartAtom, selectedCartBooksAtom } from '~/stores/cartAtom';
+import { cartAtom, CartProps, selectedCartBooksAtom } from '~/stores/cartAtom';
 import CartCardNumberInput from './CartCardNumberInput';
 
 interface CartCardHeaderProps {
@@ -40,11 +39,11 @@ const CartCardHeader = ({
 	};
 
 	//  選択されている本のIDと表示する本のIDを比較する関数
-	const selectedCheck = (element: SelectedBookProps) => element.id === id;
+	const isSelected = (element: CartProps) => element.id === id;
 
-	const selectedBookAdd = () => {
+	const switchBookSelect = () => {
 		// チェックボックスの状態が変化した時に
-		if (selectedCartBook.some(selectedCheck)) {
+		if (selectedCartBook.some(isSelected)) {
 			// すでに選択されていた場合は選択を外す
 			setSelectedCartBook(
 				selectedCartBook.filter((element) => element.id !== id),
@@ -62,8 +61,8 @@ const CartCardHeader = ({
 		<Group justify="space-between" py={10}>
 			<Checkbox
 				value={id}
-				checked={selectedCartBook.some(selectedCheck)}
-				onChange={selectedBookAdd}
+				checked={selectedCartBook.some(isSelected)}
+				onChange={switchBookSelect}
 			/>
 			<CartCardNumberInput
 				id={id}
diff --git a/frontend/app/components/cart/CartListComponent.tsx b/frontend/app/components/cart/CartListComponent.tsx
index 0fc0bf5c..ab5b51af 100644
--- a/frontend/app/components/cart/CartListComponent.tsx
+++ b/frontend/app/components/cart/CartListComponent.tsx
@@ -7,10 +7,12 @@ import { cartAtom } from '~/stores/cartAtom';
 import NoCartComponent from './NoCartComponent';
 
 interface CartListComponentProps {
-	handleLoanPatch: () => void;
+	handleBorrowButtonClick: () => void;
 }
 
-const CartListComponent = ({ handleLoanPatch }: CartListComponentProps) => {
+const CartListComponent = ({
+	handleBorrowButtonClick,
+}: CartListComponentProps) => {
 	const [cart] = useAtom(cartAtom);
 	return (
 		<Stack bg="var(--mantine-color-body)" align="stretch" justify="flex-start">
@@ -20,7 +22,9 @@ const CartListComponent = ({ handleLoanPatch }: CartListComponentProps) => {
 			) : (
 				<>
 					<CartCards />
-					<CartSelectedDialog handleLoanPatch={handleLoanPatch} />
+					<CartSelectedDialog
+						handleBorrowButtonClick={handleBorrowButtonClick}
+					/>
 				</>
 			)}
 		</Stack>
diff --git a/frontend/app/components/cart/CartSelectedDialog.tsx b/frontend/app/components/cart/CartSelectedDialog.tsx
index e56ab386..dae517f5 100644
--- a/frontend/app/components/cart/CartSelectedDialog.tsx
+++ b/frontend/app/components/cart/CartSelectedDialog.tsx
@@ -4,10 +4,12 @@ import { cartAtom, selectedCartBooksAtom } from '~/stores/cartAtom';
 import { removeBooksFromCart } from '~/utils/cart';
 
 interface CartSelectedDialogProps {
-	handleLoanPatch: () => void;
+	handleBorrowButtonClick: () => void;
 }
 
-const CartSelectedDialog = ({ handleLoanPatch }: CartSelectedDialogProps) => {
+const CartSelectedDialog = ({
+	handleBorrowButtonClick,
+}: CartSelectedDialogProps) => {
 	const [selectedCartBook, setSelectedCartBook] = useAtom(
 		selectedCartBooksAtom,
 	);
@@ -24,7 +26,7 @@ const CartSelectedDialog = ({ handleLoanPatch }: CartSelectedDialogProps) => {
 				justify="center"
 				gap="md"
 			>
-				<Button fz="xs" color="blue" onClick={handleLoanPatch}>
+				<Button fz="xs" color="blue" onClick={handleBorrowButtonClick}>
 					借りる
 				</Button>
 				<Button
diff --git a/frontend/app/routes/home.cart/route.tsx b/frontend/app/routes/home.cart/route.tsx
index 9cbe09f3..28c2a180 100644
--- a/frontend/app/routes/home.cart/route.tsx
+++ b/frontend/app/routes/home.cart/route.tsx
@@ -102,7 +102,7 @@ const CartListPage = () => {
 	// volumeがstockを超えていないかチェックする
 	const checkStock = (element: CartProps) => element.stock < element.volume;
 
-	const handleLoanPatch = () => {
+	const handleBorrowButtonClick = () => {
 		if (selectedCartBook.length > 0 && !selectedCartBook.some(checkStock)) {
 			submit(JSON.stringify({ selectedCartBook: selectedCartBook }), {
 				action: '/home/cart',
@@ -116,7 +116,9 @@ const CartListPage = () => {
 		}
 	};
 
-	return <CartListComponent handleLoanPatch={handleLoanPatch} />;
+	return (
+		<CartListComponent handleBorrowButtonClick={handleBorrowButtonClick} />
+	);
 };
 
 export default CartListPage;
diff --git a/frontend/app/utils/cart.ts b/frontend/app/utils/cart.ts
index 73fa17a4..2dc4179e 100644
--- a/frontend/app/utils/cart.ts
+++ b/frontend/app/utils/cart.ts
@@ -21,25 +21,6 @@ export const addBooksToCart = (
 	return cart;
 };
 
-export const addBookToCart = (
-	cart: CartProps[],
-	bookId: number,
-	stock: number,
-) => {
-	const index = cart.findIndex((cartBook) => cartBook.id === bookId);
-	if (index !== -1) {
-		cart[index].volume += 1;
-	} else {
-		cart.push({
-			id: bookId,
-			stock,
-			thumbnail: '',
-			volume: 1,
-		});
-	}
-	return cart;
-};
-
 export const removeBooksFromCart = (cart: CartProps[], books: CartProps[]) => {
 	const idList = books.map((book) => book.id);
 	return cart.filter((cartBook) => !idList.includes(cartBook.id));