24 add orm

[nunawa]

ORMとしてTypeORMを導入し、SQLべた書きをやめた。導入のためtypeormとreflect-metadataパッケージを追加した。また、dbディレクトリ以下にTypeORMのEntityを定義した。
TypeORMの導入にあたって、sql.jsを直接呼んでいる箇所は削除し、index.tsxでsql.jsとTypeORMのDataSourceの初期化を行うようにした。
また、FilterOption.tsxが複雑化しており、導入の障害になっていたのでリファクタした。まず、Accordionsは分割し、SQLの実行結果からコンポーネントを生成する方式をやめ、JSONファイルから生成する方式にした。さらに、onSubmitのSQLクエリ作成部分は、SQLべた書きではなくTypeORMのQueryBuilderで生成するようにした。CPUなどパーツごとのクエリ作成部分は別の関数に分けて記載し、処理の流れを分かりやすくした。クエリ作成で使うため、types/index.tsにある型情報も追記した。

[cloudflare-workers-and-pages]

Deploying jisaku-nunawa-net with    Cloudflare Pages

Latest commit:	9f1d8cc
Status:	✅  Deploy successful!
Preview URL:	https://615696e2.jisaku-nunawa-net.pages.dev
Branch Preview URL:	https://24-add-orm.jisaku-nunawa-net.pages.dev

View logs

[nunawa]

Copilot's Summary

This pull request includes several major changes to the codebase, primarily focused on migrating from sql.js to typeorm for database management, adding new database entities, and cleaning up some console logs. The most important changes are summarized below:

Migration to typeorm:

• components/PartsTab.tsx: Replaced sql.js with typeorm by changing the database initialization and query execution logic to use DataSource from typeorm. [1] [2]
• pages/index.tsx: Updated the main component to initialize a typeorm DataSource instead of using sql.js. Imported new database entities and set up the DataSource with those entities. [1] [2] [3] [4] [5] [6]

Addition of database entities:

• Added new entity classes for Cpu, Gpu, Memory, Motherboard, and Ssd in the db directory to define the database schema using typeorm. [1] [2] [3] [4] [5]

JSON data updates:

• Updated JSON files to include new data for cpu, gpu, memory, motherboard, and ssd to support the new database schema. [1] [2] [3] [4] [5]

TypeScript type updates:

• Updated filterOptions type in types/index.ts to include specific filter options for cpu, gpu, memory, motherboard, and ssd.

Code cleanup:

• Removed unnecessary console log statements in components/ProductList.tsx.

These changes collectively enhance the database management by leveraging typeorm, improve code maintainability, and ensure the application is using a more robust and scalable database solution.

[nunawa]

Cloudflare PagesでプレビューしたところUncaught (in promise) z: no such table: dとコンソールに出てフィルターができない状態になった。Entityの@Entity()にnameを追加して解決した。
参考: https://stackoverflow.com/a/55729558