OpenSearchでなにか作るぞ!(その8 フロントサイドを引き続きつくる）

最近あまり作業できていなかったdAnimeSearchプロジェクト。
今回はフロントを引き続き作っていきます。

イベントハンドラとダミーデータでモックを作成する

前回まででざっくりとフォルダ構成やコンポーネントの構成を決めました。
今回はひとまずイベントハンドラとダミーデータを作成して、大まかに動くようにしたいと思います。

前回のおさらいです

・components – template : 検索条件と検索結果をそれぞれ表示するテンプレート
・components – ui-elements:ボタンやテキストボックスなどの最小単位のコンポーネント
・pages:親コンポーネントに位置するコンポーネント。この中でテンプレートを読み込む

SearchConditionTemplate.tsxの中身

import SearchButton from "../ui-elements/SearchButton";
import SearchTextBox from "../ui-elements/SearchTextBox";

const SearchConditionTemplate = (props : any) => {
    return(
        <div>
            <SearchTextBox onChange={props.handleKeywordChange} /><SearchButton onClick={props.onClick}/>
        </div>
    );
}

export default SearchConditionTemplate;

こんな感じで、テキストボックスと検索用ボタンのみとなります。
各イベントハンドラは親コンポーネントからプロパティ経由で取得します。

SearchResultTemplate.tsxの中身

import SearchResultCard from "../ui-elements/SearchResultCard";

const SearchResultTemplate = (searchResultProps: any) => {

    let list = [];

    if(searchResultProps == null){
        return ;
    }

    for(const [i, result] of searchResultProps.results.entries()){
        list.push(<SearchResultCard result/>);
    }

    return(
        <div>
            {list}
        </div>
    );
}

export default SearchResultTemplate;

検索結果を表示するだけのページになります。プロパティ経由で検索結果を受け取り、画面に表示します。

search.tsxの中身

import { SetStateAction, useState } from "react";
import SearchConditionTemplate from "@/components/template/SearchConditionTemplate";
import SearchResultTemplate from "@/components/template/SearchResultTemplate";


const Search = () => {

    // ステートの宣言
    const [keyword, setKeyword] = useState('');
    const [searchResults, setSearchResults] = useState<any[]>([]);

    // 入力値変更イベントハンドラ
    const handleKeywordChange = (e : any) => {
        console.log("キーワード変更");
        setKeyword(e.target.value);
      };

    // 検索イベントハンドラ
    const handleSearch = () => {
        console.log("検索クリック");
        // ここで実際の検索処理を実装する
        // 例: ダミーの検索結果を設定
        const dummyResults = [
          { id: 1, title: '検索結果1' },
          { id: 2, title: '検索結果2' },
          { id: 3, title: '検索結果3' },
        ];
        setSearchResults(dummyResults);
      };

    return(
        <div className="App">
            <SearchConditionTemplate handleKeywordChange={handleKeywordChange} onClick={handleSearch}/>
            <SearchResultTemplate results={searchResults}/>
        </div>
    );
}

export default Search

親コンポーネントとなるsearchコンポーネントの中身。
各テンプレートを読み込んで表示を行うことと、イベントハンドラやステートを宣言し、各コンポーネントへプロパティ経由で受け渡します。

検索結果は今のところダミーデータですが、将来的に検索ボタンをクリックしたときにOpenSearchに検索を行い、結果を受け渡すように変更します。