検索ができるようになった(まずはキャンパスだけ)

src/App.tsx

@@ -8,32 +8,55 @@ import {
 } from './subject';
 import SyllabusTable from './table-view/SyllabusTable';
 import SyllabusTableRaw from './table-view/SyllabusTableRaw';
+import SearchComponent from './search/SearchComponent';
+import { SearchOptions } from './search';
 // import { numberOfSubjectsToShow } from './subject/SyllabusTable';
 
 
 // TODO 担当教員が極端に多いケースがあるので、その場合は適当な上限を作って「...」としておく
 // TODO そもそも1行で表示するのが適切でないものもある。複数行表示するようにして、ウィンドウの横幅がある程度あるときには横スクロールなしで一覧できるようにする
 
 function App() {
-    console.log("App")
     initializeSubject();
     // updateTable();
 
+    initializeSubject();
+
+    const [searchOptions, setSearchOptions] = useState<SearchOptions>({
+        campus: '',
+        bookmarkFilter: 'all',
+    });
     const [isTableRaw, setIsTableRaw] = useState(true);
 
+    const handleSearch = (newSearchOptions: SearchOptions) => {
+        setSearchOptions(newSearchOptions);
+    };
+
+
     return (
         <>
-            <h1>シラバス momiji2</h1>
-            <p>開発中です。</p>
-            <p>github: swawa-yu</p>
-            <p>twitter: @swawa_yu, @archaic_hohoemi</p>
-            <p>参考：KdBっぽいなにか</p>
+            <div>
+                <h1>シラバス momiji2</h1>
+                <p>開発中です。</p>
+                <p>github: swawa-yu</p>
+                <p>twitter: @swawa_yu, @archaic_hohoemi</p>
+                <p>参考：KdBっぽいなにか</p>
+            </div>
+
+            <br></br>
+
+            <SearchComponent onSearch={handleSearch}></SearchComponent>
+
             <br></br>
 
-            <button onClick={() => setIsTableRaw(!isTableRaw)}>
-                {isTableRaw ? "見やすい表に切り替える" : "基本データ表に切り替える"}
-            </button>
-            {isTableRaw ? <SyllabusTableRaw></SyllabusTableRaw> : <SyllabusTable></SyllabusTable>}
+            <div>
+                <button onClick={() => setIsTableRaw(!isTableRaw)}>
+                    {isTableRaw ? "見やすい表に切り替える" : "基本データ表に切り替える"}
+                </button>
+                {isTableRaw ?
+                    <SyllabusTableRaw searchOptions={searchOptions}></SyllabusTableRaw> :
+                    <SyllabusTable searchOptions={searchOptions}></SyllabusTable>}
+            </div>
         </>
     )
 }

src/search/SearchComponent.tsx

@@ -1,40 +1,39 @@
 import React, { useState } from 'react';
+import { SearchOptions } from '.';
 
 type SearchComponentProps = {
-    onSearch: (term: string, checkbox: boolean) => void;
+    onSearch: (SearchOptions: SearchOptions) => void;
 };
 
-const SearchComponent: React.FC<SearchComponentProps> = ({ onSearch }) => {
-    const [searchTerm, setSearchTerm] = useState('');
-    const [checkboxValue, setCheckboxValue] = useState(false);
 
-    const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setSearchTerm(e.target.value);
-    };
-
-    const handleCheckboxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setCheckboxValue(e.target.checked);
-    };
+const SearchComponent: React.FC<SearchComponentProps> = ({ onSearch }: SearchComponentProps) => {
+    const [localSearchOptions, setLocalSearchOptions] = useState<SearchOptions>({
+        campus: '',
+        bookmarkFilter: 'all',
+    });
 
     const handleSearch = () => {
-        onSearch(searchTerm, checkboxValue);
+        onSearch(localSearchOptions);
     };
 
     return (
-        <div>
-            <input
-                type="text"
-                value={searchTerm}
-                onChange={handleSearchChange}
-                placeholder="検索..."
-            />
-            <input
-                type="checkbox"
-                checked={checkboxValue}
-                onChange={handleCheckboxChange}
-            />
-            <button onClick={handleSearch}>検索</button>
-        </div>
+        <>
+            <div>
+                <input
+                    type="text"
+                    value={localSearchOptions.campus}
+                    onChange={(e) => setLocalSearchOptions({ ...localSearchOptions, campus: e.target.value })}
+                    placeholder="キャンパス"
+                />
+                <input
+                    type="checkbox"
+                    checked={localSearchOptions.bookmarkFilter === 'bookmark'}
+                    onChange={(e) => setLocalSearchOptions({ ...localSearchOptions, bookmarkFilter: e.target.checked ? 'bookmark' : 'all' })}
+                />
+                <button onClick={handleSearch}>検索</button>
+            </div>
+            <div>検索条件: campus={localSearchOptions.campus}</div>
+        </>
     );
 };
 

src/search/index.ts

@@ -0,0 +1,35 @@
+import { subjectCodeList, subjectMap, Subject } from "../subject";
+
+// 検索条件で絞り込んだ科目のリスト(講義コードのリスト)を返す
+export const filteredSubjectCodeList = (searchOptions: SearchOptions) => {
+    return subjectCodeList.filter(
+        (subjectCode: string) => matchesSearchOptions(subjectMap[subjectCode], searchOptions)
+    );
+}
+
+export interface SearchOptions {
+    campus: string;
+    // keyword: string;
+    // year: string;
+    bookmarkFilter: 'all' | 'bookmark' | 'except-bookmark';
+    // season: NormalSeasons | undefined;
+    // module: Modules | undefined;
+    // periods: Periods;
+    // disablePeriods: Periods | null;
+    // containsName: boolean;
+    // containsCode: boolean;
+    // containsRoom: boolean;
+    // containsPerson: boolean;
+    // containsAbstract: boolean;
+    // containsNote: boolean;
+    // filter: 'all' | 'bookmark' | 'except-bookmark';
+    // concentration: boolean;
+    // negotiable: boolean;
+    // asneeded: boolean;
+}
+
+export function matchesSearchOptions(subject: Subject, searchOptions: SearchOptions): boolean {
+    let machesCampus = searchOptions.campus === "" || subject["開講キャンパス"] === searchOptions.campus;
+
+    return machesCampus;
+}

src/table-view/SyllabusTable.tsx

@@ -1,38 +1,28 @@
-import React from 'react';
+import { useMemo } from 'react';
 import SubjectUnitComponent from './SubjectUnitComponent';
-import {
-    subjectCodeList,
-    subjectMap,
-    // propertyToShowList,
-} from '../subject';
+import { subjectMap } from '../subject';
 
 import './SyllabusTable.css';
-import { SearchOptions } from '../subject/search';
+import { maxNumberOfSubjectsToShow } from '../table-view';
+// import { Subject } from '../subject';
+import { SearchOptions } from '../search';
+import { filteredSubjectCodeList } from '../search';
 
-const fillteredSubjectCodeList = (options: SearchOptions) => {
-    return subjectCodeList.filter((subjectCode) =>
-        (subjectMap[subjectCode]["開講キャンパス"] === options.campus)
-    );
-};
+interface SyllabusTableProps {
+    searchOptions: SearchOptions;
+}
 
-export let numberOfSubjectsToShow = 100;
 
-function SyllabusTable() {
-    const maxNumberOfSubjectsToShow = 1000;
-    const searchOptions: SearchOptions = {
-        campus: "霞",
-    }
+function SyllabusTable({ searchOptions }: SyllabusTableProps) {
 
     // 開講キャンパスは霞で絞っている
-    const data = React.useMemo(
-        () => fillteredSubjectCodeList(searchOptions).slice(0, maxNumberOfSubjectsToShow).map(subjectCode => subjectMap[subjectCode]),
-        []
-    );
+    const data = useMemo(() => {
+        return filteredSubjectCodeList(searchOptions).slice(0, maxNumberOfSubjectsToShow).map(code => subjectMap[code]);
+    }, [searchOptions]);
 
     return (
         <>
             <div className='table-wrapper'>行数: {data.length}</div> {/* 行数を表示 */}
-            <div>検索条件: campus={searchOptions.campus}</div> {/* 検索条件を表示 */}
 
             {/* LectureUnit コンポーネントを使用して授業を表示 */}
             <div className="lectures-container">