fix: organize function, props, function name

frontend/app/components/books/BookCard.tsx

@@ -18,15 +18,20 @@ const BookCard = ({ book }: BookCardProps) => {
 				<BookCardHeader
 					id={book.id}
 					stock={book.stock}
-					title={book.title}
 					thumbnail={book.thumbnail}
 				/>
 			</Card.Section>
 			<Card.Section withBorder inheritPadding py="xs">
 				<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>
 	);
 };

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

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>
 	);
 };

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} />

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}

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>

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

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;

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));