Add barcode scan button to global search page (#46)

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

@@ -1,6 +1,9 @@
-import { TextInput } from '@mantine/core';
+import { Button, Group, Text, TextInput, rem } from '@mantine/core';
 import type { UseFormReturnType } from '@mantine/form';
+import { useDisclosure } from '@mantine/hooks';
 import type { SearchGoogleBooksParams } from 'client/client.schemas';
+import { MdCameraAlt } from 'react-icons/md';
+import IsbnScanModal from '../common/isbn-scan-modal/IsbnScanModal';
 
 interface GlobalSearchIsbnFormProps {
 	form: UseFormReturnType<
@@ -10,13 +13,28 @@ interface GlobalSearchIsbnFormProps {
 }
 
 const GlobalBookSearchIsbnForm = ({ form }: GlobalSearchIsbnFormProps) => {
+	const [opened, { open, close }] = useDisclosure();
+
 	return (
-		<TextInput
-			label="ISBN"
-			placeholder="10桁または13桁のISBN"
-			key={form.key('isbn')}
-			{...form.getInputProps('isbn')}
-		/>
+		<>
+			<IsbnScanModal url="/home/global" disclosure={{ opened, close }} />
+			<TextInput
+				label={
+					<Group>
+						<Text>ISBN</Text>
+						<Button variant="transparent" onClick={open}>
+							<MdCameraAlt size={24} />
+							<Text td="underline" ml={rem(5)}>
+								バーコードを読み取る
+							</Text>
+						</Button>
+					</Group>
+				}
+				placeholder="10桁または13桁のISBN"
+				key={form.key('isbn')}
+				{...form.getInputProps('isbn')}
+			/>
+		</>
 	);
 };
 

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

@@ -5,7 +5,7 @@ import { json } from '@remix-run/cloudflare';
 import { useLoaderData, useNavigate } from '@remix-run/react';
 import { searchGoogleBooks, searchGoogleBooksResponse } from 'client/client';
 import { SearchGoogleBooksParams } from 'client/client.schemas';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import GlobalBookListComponent from '~/components/global-books/GlobalBookListComponent';
 
 interface LoaderData {
@@ -96,8 +96,9 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
 const GlobalBookListPage = () => {
 	const { booksResponse, condition } = useLoaderData<typeof loader>();
 	const { keyword, title, author, publisher, isbn, page, limit } = condition;
-	const [opened, { open, close }] = useDisclosure();
+
 	const [searchMode, setSearchMode] = useState(keyword ? 'keyword' : 'detail');
+	const [opened, { open, close }] = useDisclosure();
 	const navigate = useNavigate();
 	const form = useForm<SearchGoogleBooksParams>({
 		mode: 'uncontrolled',
@@ -110,6 +111,21 @@ const GlobalBookListPage = () => {
 		},
 	});
 
+	// 検索条件が変更されたらフォームの値を更新する
+	useEffect(() => {
+		const formValues = form.getValues();
+
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		const { page, limit, ...rest } = condition;
+
+		Object.entries(rest).forEach(([key, value]) => {
+			const currentValue = formValues[key as keyof SearchGoogleBooksParams];
+			if (currentValue !== value) {
+				form.setFieldValue(key, value);
+			}
+		});
+	}, [condition]);
+
 	const handleDetailSubmit = (props: SearchGoogleBooksParams) => {
 		const params = new URLSearchParams();