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