本の追加ページ(グローバル詳細ページ)の実装

frontend/app/components/book-detail/BookDetailControlButtons.tsx

@@ -0,0 +1,20 @@
+import BookDetailEditButton from './BookDetailEditButton';
+import { MdDeleteForever } from 'react-icons/md';
+import { Button } from '@mantine/core';
+import { useFetcher } from '@remix-run/react';
+import BookDetailDeleteButton from './BookDetailDeleteButton';
+
+interface BookDetailControlButtonsProps {
+	id: number;
+}
+
+const BookDetailControlButtons = ({ id }: BookDetailControlButtonsProps) => {
+	return (
+		<>
+			<BookDetailEditButton bookId={id} />
+			<BookDetailDeleteButton bookId={id} />
+		</>
+	);
+};
+
+export default BookDetailControlButtons;

frontend/app/components/book-detail/BookDetailControlPanel.tsx

@@ -1,22 +1,27 @@
-import { Button, Stack } from '@mantine/core';
-import { useFetcher } from '@remix-run/react';
+import { Stack } from '@mantine/core';
 import { useAtom } from 'jotai';
-import { MdDeleteForever } from 'react-icons/md';
 import { userAtom } from '~/stores/userAtom';
-import BookDetailEditButton from './BookDetailEditButton';
 import BookDetailThumbnail from './BookDetailThumbnail';
+import BookDetailControlButtons from './BookDetailControlButtons';
+import { useLocation } from '@remix-run/react';
+import GlobalBookDetailControlButtons from '../global-book-detail/GlobalBookDetailControlButtons';
+import { SearchBooks200BooksItem } from 'client/client.schemas';
 
 interface BookDetailControlPanelProps {
-	id: number;
+	id?: number;
 	thumbnail?: string;
+	searchBook?: SearchBooks200BooksItem;
+	totalBook?: number;
 }
 
 const BookDetailControlPanel = ({
 	id,
 	thumbnail,
+	searchBook,
+	totalBook,
 }: BookDetailControlPanelProps) => {
 	const [user] = useAtom(userAtom);
-	const fetcher = useFetcher();
+	const location = useLocation();
 
 	return (
 		<Stack
@@ -26,23 +31,15 @@ const BookDetailControlPanel = ({
 			gap="md"
 		>
 			<BookDetailThumbnail thumbnail={thumbnail} />
-			{!!user && <BookDetailEditButton bookId={id} />}
-			{!!user && (
-				<Button
-					color="red"
-					leftSection={<MdDeleteForever />}
-					fz="lg"
-					onClick={() =>
-						fetcher.submit(
-							{ bookId: id },
-							{ action: '/home/books/$bookId', method: 'DELETE' },
-						)
-					}
-					disabled={fetcher.state === 'submitting'}
-				>
-					削除
-				</Button>
-			)}
+			{user && location.pathname.includes('global')
+				? searchBook &&
+					typeof totalBook == 'number' && (
+						<GlobalBookDetailControlButtons
+							searchBook={searchBook}
+							totalBook={totalBook}
+						/>
+					)
+				: id && <BookDetailControlButtons id={id} />}
 		</Stack>
 	);
 };

frontend/app/components/book-detail/BookDetailDeleteButton.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { MdDeleteForever } from 'react-icons/md';
+import { Button } from '@mantine/core';
+import { useFetcher } from '@remix-run/react';
+
+interface BookDetailDeleteButtonProps {
+	bookId: number;
+}
+
+const BookDetailDeleteButton = ({ bookId }: BookDetailDeleteButtonProps) => {
+	const fetcher = useFetcher();
+	return (
+		<Button
+			color="red"
+			leftSection={<MdDeleteForever />}
+			fz="lg"
+			onClick={() =>
+				fetcher.submit(
+					{ bookId: bookId },
+					{ action: '/home/books/$bookId', method: 'DELETE' },
+				)
+			}
+			disabled={fetcher.state === 'submitting'}
+		>
+			削除
+		</Button>
+	);
+};
+
+export default BookDetailDeleteButton;

frontend/app/components/global-book-detail/GlobalBookDetailAuthorBadge.tsx

@@ -0,0 +1,24 @@
+import { Badge } from '@mantine/core';
+
+interface GlobalBookDetailAuthorBadgeProps {
+	name: string;
+}
+
+const GlobalBookDetailAuthorBadge = ({
+	name,
+}: GlobalBookDetailAuthorBadgeProps) => {
+	return (
+		<Badge
+			component="a"
+			color="teal"
+			href={`/home/global?author=${name}`}
+			style={{ cursor: 'pointer' }}
+			variant="outline"
+			size="lg"
+		>
+			{name}
+		</Badge>
+	);
+};
+
+export default GlobalBookDetailAuthorBadge;

frontend/app/components/global-book-detail/GlobalBookDetailContent.tsx

@@ -0,0 +1,32 @@
+import { Stack } from '@mantine/core';
+import { SearchBooks200BooksItem } from 'client/client.schemas';
+import GlobalBookDetailContentTable from './GlobalBookDetailContentTable';
+import BookDetailTitle from '../book-detail/BookDetailTitle';
+import BookDetailDescription from '../book-detail/BookDetailDescription';
+import GlobalBookDetailLink from './GlobalBookDetailLink';
+
+interface GlobalBookDetailContentProps {
+	book: SearchBooks200BooksItem;
+	bookId?: number;
+}
+
+const GlobalBookDetailContent = ({
+	book,
+	bookId,
+}: GlobalBookDetailContentProps) => {
+	return (
+		<Stack
+			bg="var(--mantine-color-body)"
+			align="stretch"
+			justify="flex-start"
+			gap="xl"
+		>
+			<BookDetailTitle title={book.title} />
+			<GlobalBookDetailContentTable book={book} />
+			<BookDetailDescription description={book.description ?? ''} />
+			{!!bookId && <GlobalBookDetailLink bookId={bookId} />}
+		</Stack>
+	);
+};
+
+export default GlobalBookDetailContent;

frontend/app/components/global-book-detail/GlobalBookDetailContentTable.tsx

@@ -0,0 +1,43 @@
+import { Group, rem, Stack, Table, Text } from '@mantine/core';
+import { SearchBooks200BooksItem } from 'client/client.schemas';
+import GlobalBookDetailAuthorBadge from './GlobalBookDetailAuthorBadge';
+
+interface GlobalBookDetailContentTableProps {
+	book: SearchBooks200BooksItem;
+}
+
+const GlobalBookDetailContentTable = ({
+	book,
+}: GlobalBookDetailContentTableProps) => {
+	return (
+		<Stack gap="sm" align="stretch" justify="flex-start">
+			<Text fz={rem(22)}>書籍情報</Text>
+			<Table fz={rem(17)}>
+				<Table.Tr key={'author'}>
+					<Table.Th>著者</Table.Th>
+					<Table.Td>
+						<Group gap={rem(7)}>
+							{book.authors.map((author, id) => (
+								<GlobalBookDetailAuthorBadge key={id} name={author} />
+							))}
+						</Group>
+					</Table.Td>
+				</Table.Tr>
+				<Table.Tr key={'publisher'}>
+					<Table.Th>出版社</Table.Th>
+					<Table.Td>{book.publisher}</Table.Td>
+				</Table.Tr>
+				<Table.Tr key={'publishedDate'}>
+					<Table.Th>出版日</Table.Th>
+					<Table.Td>{book.publishedDate}</Table.Td>
+				</Table.Tr>
+				<Table.Tr key={'isbn'}>
+					<Table.Th>ISBN</Table.Th>
+					<Table.Td>{book.isbn}</Table.Td>
+				</Table.Tr>
+			</Table>
+		</Stack>
+	);
+};
+
+export default GlobalBookDetailContentTable;

frontend/app/components/global-book-detail/GlobalBookDetailControlButtons.tsx

@@ -0,0 +1,44 @@
+import { Button } from '@mantine/core';
+import { useFetcher } from '@remix-run/react';
+import { CreateBookBody, SearchBooks200BooksItem } from 'client/client.schemas';
+import { BiSolidBookAdd } from 'react-icons/bi';
+
+interface GlobalBookDetailControlButtonsProps {
+	searchBook: SearchBooks200BooksItem;
+	totalBook: number;
+}
+
+const GlobalBookDetailControlButtons = ({
+	searchBook,
+	totalBook,
+}: GlobalBookDetailControlButtonsProps) => {
+	const fetcher = useFetcher<CreateBookBody>();
+	const addBookData: CreateBookBody = {
+		authors: searchBook.authors,
+		description: searchBook.description ?? '',
+		isbn: searchBook.isbn ?? '',
+		publishedDate: searchBook.publishedDate ?? '',
+		publisher: searchBook.publisher ?? '',
+		stock: 1,
+		thumbnail: searchBook.thumbnail,
+		title: searchBook.title,
+	};
+	return (
+		<Button
+			variant="filled"
+			color="teal"
+			disabled={totalBook > 0}
+			leftSection={<BiSolidBookAdd />}
+			onClick={() =>
+				fetcher.submit(addBookData, {
+					action: '/home/global/books/$bookId',
+					method: 'POST',
+				})
+			}
+		>
+			{totalBook > 0 ? '追加済み' : '追加'}
+		</Button>
+	);
+};
+
+export default GlobalBookDetailControlButtons;

frontend/app/components/global-book-detail/GlobalBookDetailLink.tsx

@@ -0,0 +1,16 @@
+import { Anchor, Text } from '@mantine/core';
+
+interface GlobalBookDetailLinkProps {
+	bookId: number;
+}
+
+const GlobalBookDetailLink = ({ bookId }: GlobalBookDetailLinkProps) => {
+	return (
+		<Text>
+			この書籍はすでに登録されています。蔵書の詳細ページは
+			<Anchor href={`/home/books/${bookId}`}>こちら</Anchor>
+		</Text>
+	);
+};
+
+export default GlobalBookDetailLink;

frontend/app/components/global-books/GlobalBookCard.tsx

@@ -11,7 +11,8 @@ const GlobalBookCard = ({ book }: GlobalBookCardProps) => {
 		<Card shadow="sm" radius="md" pb="xs" withBorder>
 			<Card.Section withBorder inheritPadding py="xs">
 				<BookCardThumbnail
-					id={book.isbn ? Number(book.isbn) : undefined}
+					// Google Books APIでisbnの味の検索ができるまではコメントアウト
+					// FIXME id={book.isbn ? Number(book.isbn) : undefined}
 					thumbnail={book.thumbnail}
 				/>
 			</Card.Section>

frontend/app/routes/home._index/route.tsx

@@ -26,7 +26,7 @@ interface LoaderData {
 	};
 }
 
-interface ActionResponse {
+export interface ActionResponse {
 	method: string;
 	status: number;
 }