From eb669e87f16b9a1d1ce68e3940e8a7de47b47261 Mon Sep 17 00:00:00 2001 From: arrow2nd <44780846+arrow2nd@users.noreply.github.com> Date: Thu, 19 Oct 2023 20:31:35 +0900 Subject: [PATCH 01/50] =?UTF-8?q?=F0=9F=94=A7=20=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- next.config.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/next.config.js b/next.config.js index d83edcb..f89c308 100644 --- a/next.config.js +++ b/next.config.js @@ -1,10 +1,7 @@ /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, - swcMinify: true, - experimental: { - appDir: true - } + swcMinify: true }; module.exports = nextConfig; From 3149bcad77d32397ec1bfd519e188928e9d44ee7 Mon Sep 17 00:00:00 2001 From: arrow2nd <44780846+arrow2nd@users.noreply.github.com> Date: Thu, 19 Oct 2023 20:44:23 +0900 Subject: [PATCH 02/50] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20search=20->=20form?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../__snapshots__/index.test.tsx.snap | 0 components/ui/{search => form}/index.test.tsx | 6 +- components/ui/form/index.tsx | 39 +++++++ .../ui/{search => form}/input/index.test.tsx | 0 components/ui/form/input/index.tsx | 24 +++++ .../ui/{search => form}/label/index.tsx | 0 .../ui/{search => form}/select/index.test.tsx | 0 .../ui/{search => form}/select/index.tsx | 0 components/ui/index.tsx | 38 ++----- components/ui/search/index.tsx | 100 ------------------ components/ui/search/input/index.tsx | 50 --------- 11 files changed, 72 insertions(+), 185 deletions(-) rename components/ui/{search => form}/__snapshots__/index.test.tsx.snap (100%) rename components/ui/{search => form}/index.test.tsx (93%) create mode 100644 components/ui/form/index.tsx rename components/ui/{search => form}/input/index.test.tsx (100%) create mode 100644 components/ui/form/input/index.tsx rename components/ui/{search => form}/label/index.tsx (100%) rename components/ui/{search => form}/select/index.test.tsx (100%) rename components/ui/{search => form}/select/index.tsx (100%) delete mode 100644 components/ui/search/index.tsx delete mode 100644 components/ui/search/input/index.tsx diff --git a/components/ui/search/__snapshots__/index.test.tsx.snap b/components/ui/form/__snapshots__/index.test.tsx.snap similarity index 100% rename from components/ui/search/__snapshots__/index.test.tsx.snap rename to components/ui/form/__snapshots__/index.test.tsx.snap diff --git a/components/ui/search/index.test.tsx b/components/ui/form/index.test.tsx similarity index 93% rename from components/ui/search/index.test.tsx rename to components/ui/form/index.test.tsx index 137c1c1..9a3e0a0 100644 --- a/components/ui/search/index.test.tsx +++ b/components/ui/form/index.test.tsx @@ -1,20 +1,20 @@ import { fireEvent, render } from "@testing-library/react"; import { act } from "react-dom/test-utils"; -import Search from "./index"; +import Form from "./index"; describe("Search", () => { const sleep = () => new Promise((r) => setTimeout(r, 50)); const keyDownEnter = { key: "Enter", code: "Enter", charCode: 13 }; test("見た目が変化していないか", () => { - const { container } = render(); + const { container } = render(
); expect(container).toMatchSnapshot(); }); test("検索時に他の検索欄がクリアされるか", async () => { const { container, getByRole, getAllByRole } = render( - + ); const textbox = getByRole("textbox"); diff --git a/components/ui/form/index.tsx b/components/ui/form/index.tsx new file mode 100644 index 0000000..b07b3af --- /dev/null +++ b/components/ui/form/index.tsx @@ -0,0 +1,39 @@ +import { poemList } from "data/poem-list"; + +import Input from "./input"; +import Label from "./label"; +import Select from "./select"; + +const Form = () => { + // 選択要素に使用するアイドル名 + const idolNames = Array.from(new Set(poemList.map((e) => e.idolName))); + + // 選択要素に使用する衣装名 + const clothesTitles = Array.from( + new Set(poemList.map((e) => e.clothesTitle)) + ).sort(); + + return ( +
+ {/* 画面幅が lg 以下なら縦並びにする */} +
+
+
+ ); +}; + +export default Form; diff --git a/components/ui/search/input/index.test.tsx b/components/ui/form/input/index.test.tsx similarity index 100% rename from components/ui/search/input/index.test.tsx rename to components/ui/form/input/index.test.tsx diff --git a/components/ui/form/input/index.tsx b/components/ui/form/input/index.tsx new file mode 100644 index 0000000..06f7c92 --- /dev/null +++ b/components/ui/form/input/index.tsx @@ -0,0 +1,24 @@ +import { ComponentPropsWithRef } from "react"; +import { FiSearch } from "react-icons/fi"; + +export default function input( + props: ComponentPropsWithRef<"input"> +): JSX.Element { + return ( +
+ + +
+ ); +} + diff --git a/components/ui/search/label/index.tsx b/components/ui/form/label/index.tsx similarity index 100% rename from components/ui/search/label/index.tsx rename to components/ui/form/label/index.tsx diff --git a/components/ui/search/select/index.test.tsx b/components/ui/form/select/index.test.tsx similarity index 100% rename from components/ui/search/select/index.test.tsx rename to components/ui/form/select/index.test.tsx diff --git a/components/ui/search/select/index.tsx b/components/ui/form/select/index.tsx similarity index 100% rename from components/ui/search/select/index.tsx rename to components/ui/form/select/index.tsx diff --git a/components/ui/index.tsx b/components/ui/index.tsx index 90aad12..c49cdb0 100644 --- a/components/ui/index.tsx +++ b/components/ui/index.tsx @@ -1,48 +1,22 @@ -'use client'; +"use client"; import { useEffect, useState } from "react"; import Poems from "components/poems"; -import { usePoem } from "hooks/usePoem"; +import { Poem } from "types/poem"; +import Form from "./form"; import Line from "./line"; -import Search from "./search"; type Props = { - poemText: string; + poems: Poem[]; }; -const UI = ({ poemText }: Props) => { - const [type, setType] = useState(""); - const [keyword, setKeyword] = useState(""); - const poems = usePoem(type, keyword); - - const setSearchKeyword = (type: string, keyword: string) => { - setType(type); - setKeyword(keyword); - }; - - const handleSearch = (type: string, keyword: string) => { - // 40文字以上なら切り取る - if (keyword.length >= 40) { - keyword = keyword.slice(0, 40); - } - - // 検索キーワードをセット - setSearchKeyword(type, keyword); - }; - - // idで指定されたポエムがあれば検索する - useEffect(() => { - if (poemText !== "") { - setSearchKeyword("text", poemText); - } - }, [poemText]); - +const UI = ({ poems }: Props): JSX.Element => { return (
- +
diff --git a/components/ui/search/index.tsx b/components/ui/search/index.tsx deleted file mode 100644 index 0f2950f..0000000 --- a/components/ui/search/index.tsx +++ /dev/null @@ -1,100 +0,0 @@ -import { useRef, useState } from "react"; - -import { poemList } from "data/poem-list"; - -import Input from "./input"; -import Label from "./label"; -import Select from "./select"; - -type Props = { onSearch: (type: string, label: string) => void }; - -const Search = ({ onSearch }: Props) => { - // 選択要素に使用するアイドル名 - const [idolNames] = useState( - Array.from(new Set(poemList.map((e) => e.idolName))) - ); - - // 選択要素に使用する衣装名 - const [clothesTitles] = useState( - Array.from(new Set(poemList.map((e) => e.clothesTitle))).sort() - ); - - const keywordInput = useRef(null); - const idolSelect = useRef(null); - const clothesSelect = useRef(null); - - // キーワード欄をクリア - const clearKeywordInput = () => { - if (keywordInput.current?.value) { - keywordInput.current.value = ""; - } - }; - - // アイドル名の選択をクリア - const clearIdolSelect = () => { - if (idolSelect.current?.state.selectValue) { - idolSelect.current.clearValue(); - } - }; - - // 衣装名の選択をクリア - const clearClothesSelect = () => { - if (clothesSelect.current?.state.selectValue) { - clothesSelect.current.clearValue(); - } - }; - - const handleSubmit = () => { - const keyword = keywordInput.current?.value; - if (!keyword) return; - - clearIdolSelect(); - clearClothesSelect(); - - onSearch("text", keyword); - }; - - const handleChangeIdolName = (label: string) => { - clearKeywordInput(); - clearClothesSelect(); - - onSearch("idolName", label); - }; - - const handleChangeclothesTitle = (label: string) => { - clearKeywordInput(); - clearIdolSelect(); - - onSearch("clothesTitle", label); - }; - - return ( -
- {/* 画面幅が lg 以下なら縦並びにする */} -
-
-
- ); -}; - -export default Search; diff --git a/components/ui/search/input/index.tsx b/components/ui/search/input/index.tsx deleted file mode 100644 index 8548aeb..0000000 --- a/components/ui/search/input/index.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import { - InputHTMLAttributes, - KeyboardEventHandler, - forwardRef, - useState -} from "react"; -import { FiSearch } from "react-icons/fi"; - -type Props = InputHTMLAttributes & { - onSubmit: () => void; -}; - -const Input = (props: Props, ref: React.MutableRefObject) => { - const [isTyping, setIsTyping] = useState(false); - - const handleKeyDown: KeyboardEventHandler = (ev) => { - // 入力が確定した - if (!isTyping && ev.key === "Enter") { - props.onSubmit(); - ev.preventDefault(); - ev.currentTarget.blur(); - } - }; - - return ( -
-
- setIsTyping(true)} - onCompositionEnd={() => setIsTyping(false)} - data-testid="poem-search-textbox" - ref={ref} - /> - -
-
- ); -}; - -export default forwardRef(Input); From 9108c496d8f6480c9340eaf29356402a5ef89228 Mon Sep 17 00:00:00 2001 From: arrow2nd <44780846+arrow2nd@users.noreply.github.com> Date: Thu, 19 Oct 2023 20:44:41 +0900 Subject: [PATCH 03/50] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20props=E3=81=AE?= =?UTF-8?q?=E5=A4=89=E6=9B=B4=E3=81=AB=E8=BF=BD=E5=BE=93?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/page.tsx b/app/page.tsx index 3cfa55d..2202671 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -57,7 +57,7 @@ export default function Page({ searchParams }: Props) { className={`flex flex-col min-h-screen bg-neutral-white ${kiwiMaru.variable}`} >
- +