From 4b1d31def2eb36b2317fcd014d2effa912e4dd5f Mon Sep 17 00:00:00 2001
From: hayao <shun819.mail@gmail.com>
Date: Sat, 15 Jun 2024 11:58:26 +0900
Subject: [PATCH] Update: Implement "and" search

---
 src/app/(hayao)/playground/niconico/page.tsx | 9 +++++----
 src/app/(hayao)/playground/niconico/video.ts | 8 +++++++-
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/app/(hayao)/playground/niconico/page.tsx b/src/app/(hayao)/playground/niconico/page.tsx
index afeea13..863482c 100644
--- a/src/app/(hayao)/playground/niconico/page.tsx
+++ b/src/app/(hayao)/playground/niconico/page.tsx
@@ -6,7 +6,7 @@ import { Checkbox, Form, Input } from "react-daisyui";
 import Link from "@/components/elements/Link";
 import CommonSpacer from "@/components/layouts/CommonSpacer";
 
-import { useVideoList } from "./video";
+import { useSearch, useVideoList } from "./video";
 
 const Header = () => (
     <>
@@ -27,7 +27,7 @@ const Header = () => (
 );
 
 export default function Niconico() {
-    const [search, setSearch] = useState<string>("");
+    const [search, setSearch] = useSearch();
     const [musicOnly, setMusicOnly] = useState<boolean>(false);
 
     const { info, error } = useVideoList();
@@ -41,7 +41,7 @@ export default function Niconico() {
             <div>
                 {header}
                 <Form className="my-10">
-                    <Input value={search} onChange={(e) => setSearch(e.target.value)} className="w-full" />
+                    <Input value={search.join(" ")} onChange={(e) => setSearch(e.target.value)} className="w-full" />
                     <Form.Label title="音楽のみ" className="mx-auto w-fit child:mx-2">
                         <Checkbox checked={musicOnly} onChange={(e) => setMusicOnly(e.target.checked)} />
                     </Form.Label>
@@ -51,7 +51,8 @@ export default function Niconico() {
             <ul className="grid grid-cols-2 gap-3">
                 {info &&
                     Array.from(info?.values())
-                        .filter((v) => v.title.includes(search))
+                        //.filter((v) => v.title.includes(search))
+                        .filter((v) => search.every((s) => v.title.includes(s)))
                         .filter((v) => !musicOnly || v.cT === "music")
                         .map((v) => {
                             return (
diff --git a/src/app/(hayao)/playground/niconico/video.ts b/src/app/(hayao)/playground/niconico/video.ts
index e4d1d2d..3cd87df 100644
--- a/src/app/(hayao)/playground/niconico/video.ts
+++ b/src/app/(hayao)/playground/niconico/video.ts
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
 
 const apiUrl =
     process.env.NODE_ENV === "development" ? "http://localhost:3000/api/niconico" : "https://nicorekari.nanasi-rasi.net/DB.json";
@@ -16,6 +16,12 @@ export type ClickList = { [key: string]: boolean };
 
 export type VideoList = Map<string, Video>;
 
+export const useSearch = (): [string[], Dispatch<SetStateAction<string>>] => {
+    const [search, setSearch] = useState<string>("");
+    const replaced = search.replace("　", " ").split(" ");
+    return [replaced, setSearch];
+};
+
 export const useVideoList = () => {
     const [info, setInfo] = useState<VideoList | null>(null);
     const [error, setError] = useState<Error | null>(null);