diff --git a/app/page.tsx b/app/page.tsx index 74eff06..fc7256f 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -23,27 +23,41 @@ interface Props { searchParams: { location: string | undefined; category: string | undefined; + searchText: string | undefined; }; } export default function Page({ searchParams }: Props) { const filteredItems = items.filter((item) => { - if (!searchParams['location'] && !searchParams['category']) { + // SearchParams(location, category, searchText)からアイテムを絞り込む + // どれも指定されていない場合は全てのアイテムを表示する + if ( + !searchParams.location && + !searchParams.category && + !searchParams.searchText + ) { return true; } - if (searchParams['location'] && searchParams['category']) { - return ( - item.locations?.includes(searchParams['location']) && - item.category === searchParams['category'] - ); + // 指定された場所のアイテムのみ絞り込む + if ( + searchParams.location && + item.locations?.includes(searchParams.location) + ) { + return false; } - if (searchParams['location']) { - return item.locations?.includes(searchParams['location']); + // 指定された種類のアイテムのみ絞り込む + if (searchParams.category && searchParams.category !== item.category) { + return false; } - if (searchParams['category']) { - return item.category === searchParams['category']; + + // 指定された検索ワードを含むアイテムのみ絞り込む + if ( + searchParams.searchText && + !item.name.includes(searchParams.searchText) + ) { + return false; } return true; diff --git a/next.config.js b/next.config.js index 54035e7..cbfa5fa 100755 --- a/next.config.js +++ b/next.config.js @@ -1,10 +1,10 @@ -const path = require("path"); +const path = require('path'); /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, sassOptions: { - includePaths: [path.join(__dirname, "styles")], + includePaths: [path.join(__dirname, 'styles')], }, experimental: {}, }; diff --git a/ui/SearchForm.tsx b/ui/SearchForm.tsx index 59968af..bc265c4 100644 --- a/ui/SearchForm.tsx +++ b/ui/SearchForm.tsx @@ -3,16 +3,24 @@ import { categories } from '@/lib/categories'; import { locations } from '@/lib/locations'; import { useSearchParams, useRouter, usePathname } from 'next/navigation'; -import { useCallback, useMemo } from 'react'; +import { useCallback, useMemo, useState } from 'react'; export const SearchForm = () => { const searchParams = useSearchParams(); const pathName = usePathname(); const router = useRouter(); + const [searchText, setSearchText] = useState( + searchParams.get('searchText'), + ); const locationOptions = locations; const categoryOptions = categories; + const onChangeSearchText = (value: string) => { + setSearchText(value); + updateSearchParams('searchText', value); + }; + const selectedOptions = useMemo(() => { const params = new URLSearchParams(searchParams); locationOptions.forEach((option) => { @@ -69,6 +77,15 @@ export const SearchForm = () => { ))} + + ); };