diff --git a/frontend/app/components/global-books/GlobalBookSearchIsbnForm.tsx b/frontend/app/components/global-books/GlobalBookSearchIsbnForm.tsx
index 29d3eab..252fa26 100644
--- a/frontend/app/components/global-books/GlobalBookSearchIsbnForm.tsx
+++ b/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 (
-
+ <>
+
+
+ ISBN
+
+
+ }
+ placeholder="10桁または13桁のISBN"
+ key={form.key('isbn')}
+ {...form.getInputProps('isbn')}
+ />
+ >
);
};
diff --git a/frontend/app/routes/home.global._index/route.tsx b/frontend/app/routes/home.global._index/route.tsx
index b7dec4e..98f52bc 100644
--- a/frontend/app/routes/home.global._index/route.tsx
+++ b/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();
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({
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();