✨ add free word search

YutaGoto · Oct 31, 2023 · 8c25b6c · 8c25b6c
1 parent 02adcac
commit 8c25b6c
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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<string | null>(
+    searchParams.get('searchText'),
+  );
 
   const locationOptions = locations;
   const categoryOptions = categories;
 
+  const onChangeSearchText = (value: string) => {
+    setSearchText(value);
+    updateSearchParams('searchText', value);
+  };
+
   const selectedOptions = useMemo<URLSearchParams>(() => {
     const params = new URLSearchParams(searchParams);
     locationOptions.forEach((option) => {
@@ -69,6 +77,15 @@ export const SearchForm = () => {
           ))}
         </select>
       </label>
+
+      <label>
+        <span className="text-sky-300">フリーワード</span>
+        <input
+          onChange={(e) => onChangeSearchText(e.target.value)}
+          defaultValue={searchText}
+          className="w-full bg-zinc-900 text-sky-300 rounded-lg border border-sky-300 px-4 py-3 hover:border-sky-700"
+        />
+      </label>
     </div>
   );
 };