Skip to content

企業情報一覧ページを作成する#52

Draft
Jyoumama wants to merge 52 commits intomainfrom
feature/create-companies-list
Draft

企業情報一覧ページを作成する#52
Jyoumama wants to merge 52 commits intomainfrom
feature/create-companies-list

Conversation

@Jyoumama
Copy link
Copy Markdown
Contributor

@Jyoumama Jyoumama commented Jan 27, 2025

Issue

概要

🔹 PRの目的
このプルリクエストでは、企業情報一覧ページの作成と、それに伴うコードの改善を行いました。

🔹 主な変更点
1.企業情報一覧ページの作成

  • ログインしたユーザーのみが企業情報一覧ページに遷移できるように実装。
  • fetchCompanies 関数のエラーハンドリングを強化。
  • 企業情報一覧のテーブルスタイリングを改善。
  1. Supabase関連の更新
  • 最新の database.types.ts を適用し、型定義を更新。
  • Supabase クライアントの設定を見直し、適切にデータ取得できるよう調整。
  1. 不要なファイルの整理
    pjord_svg.code-search という作業途中で意図せず作成してしまった検索関連ファイルを削除。
  • 一時的な database.types.new.ts を削除し、正式な型定義を database.types.ts に反映。

🔹 変更の確認方法
1.feature/create-companies-list ブランチをローカルにチェックアウト:

git checkout feature/create-companies-list
  1. アプリを起動:
npm run dev
  1. 確認ポイント
  • ログイン後、企業情報一覧ページ (/companies) へ正しく遷移できるか?
  • 企業情報のテーブルが適切に表示され、スタイリングが適用されているか?

📌 実施した主なコミット一覧

✅ 企業情報一覧ページの作成

  • コミット: ceaeae1
    変更点:
  • 企業情報一覧ページ (Companies.tsx) のレイアウトを作成。
  • ログインユーザーのみアクセスできるよう、認証チェックを追加。
    ✅ 不要な検索関連ファイルの削除
  • コミット: 7050aee
    変更点:
  • pjord_svg.code-search という未使用のファイルを削除。
    ✅ Supabaseの型定義とクライアント設定を更新
  • コミット: edb8a1d
    変更点:
  • database.types.tsnpx supabase gen types で最新化。
  • supabase.ts の設定を調整し、型エラーを防ぐ対応を実施。
    ✅ 一時的な database.types.new.ts の削除
  • コミット: 77d6a30
    変更点:
    database.types.ts への適用後、一時ファイルを削除。

変更前

  • 変更前(企業情報一覧のリンクなし)
スクリーンショット 2025-01-27 20 16 51

変更後

  • ログイン認証を実施(agentのローカルで使用するユーザー情報)
スクリーンショット 2025-01-27 20 17 35
  • ログインしたら企業情報一覧のリンクが表示される
スクリーンショット 2025-01-27 20 17 53
  • リンクをクリックしたら企業情報一覧ページに飛ぶ(※編集・削除ボタンはdefaultでありますが、別Issueのようなのでまだリンク等は出来ていません。)
スクリーンショット 2025-01-28 16 25 44

@vercel
Copy link
Copy Markdown

vercel bot commented Jan 27, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
agent ❌ Failed (Inspect) Jun 15, 2025 2:00pm

@supabase
Copy link
Copy Markdown

supabase bot commented Jan 27, 2025

Updates to Preview Branch (feature/create-companies-list) ↗︎

Deployments Status Updated
Database Sun, 15 Jun 2025 14:00:38 UTC
Services Sun, 15 Jun 2025 14:00:38 UTC
APIs Sun, 15 Jun 2025 14:00:38 UTC

Tasks are run on every commit but only new migration files are pushed.
Close and reopen this PR if you want to apply changes from existing seed or migration files.

Tasks Status Updated
Configurations Sun, 15 Jun 2025 14:00:39 UTC
Migrations Sun, 15 Jun 2025 14:00:41 UTC
Seeding Sun, 15 Jun 2025 14:00:42 UTC
Edge Functions Sun, 15 Jun 2025 14:00:42 UTC

View logs for this Workflow Run ↗︎.
Learn more about Supabase for Git ↗︎.

@Jyoumama
Copy link
Copy Markdown
Contributor Author

@kazuma-naka さん、
お疲れ様です〜。お手隙の際に、レビューをお願いします。🙏

@kazuma-naka
Copy link
Copy Markdown
Contributor

@Jyoumama さん、

お疲れ様です。
手元で起動してみました。
companies の一覧が表示されませんでした。

supabase を起動時に seed.sql を読み込むと以下の SQL が実行されるという認識を私は持っています。 @Jyoumama さんのスクショのデータが seed.sql と異なって見えるのですがどのようにデータを追加されたのか気になりました。

日報を拝読しまして Companies の一覧が表示されない理由は RLS が関係していますでしょうか?

INSERT INTO companies (name, website, memo) VALUES ('株式会社ロッカ', 'https://lokka.jp', '良い会社');
INSERT INTO companies (name, website, memo) VALUES ('株式会社リンゴ', 'https://example.com/apple', 'リンゴは良い会社');
INSERT INTO companies (name, website, memo) VALUES ('株式会社バナナ', 'https://example.com/banana', 'バナナは良い会社');
INSERT INTO companies (name, website, memo) VALUES ('株式会社オレンジ', 'https://example.com/orange', 'オレンジは良い会社');

companies_table

supabase_table_companies

@Jyoumama
Copy link
Copy Markdown
Contributor Author

Jyoumama commented Jan 29, 2025

@kazumanさん、確認&コメントをいただいてありがとうございます!
日報も確認いただいてありがとうございます!

とり急ぎ、返信いたします。結論、これからこちらのプルリクエストにkazumaNさんが適用されているseed.sqlをデータごと
以下のコマンドで取り込んでコミット&プッシュする作業に取り掛かりたいと考えています!

supabase db reset
supabase db seed

私が入力した企業のダミーデータがkazumaNさんのローカル環境でご覧になれない理由は、私がseed.sqlを更新せず、プルリクエストに含めていないためです。
現在ご確認いただいているこの作業ブランチをmainから切る際に、mainを最新の状態にしてからローカルにpullして、作業ブランチを作っていますが、既にseed.sqlに確認用のダミーデータが記載されているということを私が認識しておらず、自分のsupabaseのデータベースにスクショの内容のテーブルデータを入力して、表示の確認をしておりました!そのデータがRLSの設定が誤っていたため、私のローカル環境でアプリに表示されない状態だったのですが、RLSの設定を修正し、表示される様になったため、そのままseed.sqlをプルリクエストに含めずにレビュー依頼をしてしまっておりました〜。
修正しましたら、改めてレビュー依頼をさせていただけますか?
ご連絡は、Discordにもした方が良いでしょうか?
お忙しいところ、恐縮です。よろしくお願いします!☺️

@kazuma-naka
Copy link
Copy Markdown
Contributor

@kazumanさん、確認&コメントをいただいてありがとうございます! 日報も確認いただいてありがとうございます!

とり急ぎ、返信いたします。結論、これからこちらのプルリクエストにkazumaNさんが適用されているseed.sqlをデータごと 以下のコマンドで取り込んでコミット&プッシュする作業に取り掛かりたいと考えています!

supabase db reset
supabase db seed

私が入力した企業のダミーデータがkazumaNさんのローカル環境でご覧になれない理由は、私がseed.sqlを更新せず、プルリクエストに含めていないためです。 現在ご確認いただいているこの作業ブランチをmainから切る際に、mainを最新の状態にしてからローカルにpullして、作業ブランチを作っていますが、既にseed.sqlに確認用のダミーデータが記載されているということを私が認識しておらず、自分のsupabaseのデータベースにスクショの内容のテーブルデータを入力して、表示の確認をしておりました!そのデータがRLSの設定が誤っていたため、私のローカル環境でアプリに表示されない状態だったのですが、RLSの設定を修正し、表示される様になったため、そのままseed.sqlをプルリクエストに含めずにレビュー依頼をしてしまっておりました〜。 修正しましたら、改めてレビュー依頼をさせていただけますか? ご連絡は、Discordにもした方が良いでしょうか? お忙しいところ、恐縮です。よろしくお願いします!☺️

連絡はこちらで大丈夫ですよ!

@Jyoumama
Copy link
Copy Markdown
Contributor Author

@kazuma-naka さん、お疲れ様です。
お時間のある時にご確認いただけたらと思います。🙏
今回のプルリクエストでは、以下の変更を行いました。

1.企業一覧のコンポーネント src/components/Companies.tsx の修正
2.データベースのシードデータ supabase/seed.sql の修正
3.RLS ポリシーの追加 supabase/migrations/20250129044022_add_public_read_access.sql


動作確認時のご注意事項
kazumaNさんのローカル環境で、このブランチを最新状態の動作を確認していただくには、以下のコマンドでfeature/create-companies-listブランチにcheckoutしていただく必要あるかと思います。(老婆心ながら😓)

git fetch origin feature/create-companies-list
git checkout feature/create-companies-list

なお、ご存知かと思いますが、seed.sqlのデータを自分のローカル環境のsupabaseで取得し、アプリで表示させようとすると、下記のコマンドでseed.sqlのシードデータを適用する必要があります。

supabase db seed

実は、私のローカル環境でsupabase db seedコマンドを試し、アプリにデータが表示されるか試したところ、kazumaNさんからご提示いただいたseed.sqlのデータが(やはり?)アプリには表示されませんでした。(以下のスクショのデータです)
スクリーンショット 2025-01-29 17 07 41

そこで、ローカル環境のsupabaseのRLSポリシーの設定に”アプリにデータ表示ができる様になった設定”を追加し、変更しました。そのmigrationファイルの変更(RLSポリシーの変更)を適用するために、以下のコマンドで実行し、最新のマイグレーションをローカル環境に適用しました。

supabase db push

その後、再度、supabase db seedを行ってシードデータを適用し、npm run devで起動してから、/companiesにアクセスし、アプリにデータが表示されるのを確認しました。(以下、スクショです)
スクリーンショット 2025-01-29 17 18 33
seed.sqlの変更を分かりやすくするために`株式会社ブドウ`を追加し、アプリに表示できるようにしました!
supabaseをローカル環境に変えたり、リモート環境(本番環境)に変えたりする必要があり、環境変数もその度に変える必要があるので、手間取りました〜。


上記、分かりにくかったり(自分の実施したことが間違っていたりもするかもですし。。。)
ご不明、確認事項等ありましたら、ご遠慮なくご連絡ください〜。引き続きよろしくお願いします〜🙇

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

この POLICY ですと認証されたユーザー、 未認証のユーザー関係なくすべてのユーザーが companies テーブルにアクセスできると思います。
会社一覧を参照する際にログインが必要でしたので気になりました。
どのユーザーが companies テーブルに何の操作できるのか、定義してあげる必要があると感じました。

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://supabase.com/docs/guides/database/postgres/roles

こちらに supabase の roles の一覧があります

@Jyoumama
Copy link
Copy Markdown
Contributor Author

Jyoumama commented Feb 2, 2025

@kazuma-naka さん、
お忙しいところすみません!
企業一覧の認証チェック付きの実装や、RLSの統一を行いました。
以下の変更点について、レビューをお願いいたします。

🛠 主な変更点

  1. 企業一覧を認証チェック付きで実装 (Companies.tsx)
  • 認証されていないユーザーはデータを取得できないようにしました。
  • Supabase の auth.getUser() を使い、ログインユーザーのみがデータを取得できる仕様にしました。
  1. RLS (Row-Level Security) の統一 (supabase/migrations)
  • 20250129044022_add_public_read_access.sql の記述を select_companies_policy.sqlに統一しました。
  • authenticated ユーザーに SELECT 権限を付与しました。
  1. 細かいリファクタリング
  • supabase.ts, tsconfig.json などの不要な記号や余計な記述を整理しました。
  • スタイル調整 (テーブルのボーダーを統一) も行いました。

👀 レビューしてほしい点

  • 認証周りの実装 (fetchCompanies() の処理)
  • Supabase の RLS 設定の統一 (select_companies_policy.sql)
  • その他、改善点があれば教えてください!

お手すきの際に、レビューよろしくお願いします!🙏

@Jyoumama Jyoumama marked this pull request as ready for review February 2, 2025 20:53
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL || "http://127.0.0.1:54321";

もし process.env.NEXT_PUBLIC_SUPABASE_URL が設定されていないと http://127.0.0.1:54321 を使用しようとするのであまり必要のない定義に感じました。

Copy link
Copy Markdown
Contributor Author

@Jyoumama Jyoumama Feb 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

package.jsonのlocalとremoteがなぜ、分かれているのか?のコメント欄で記載したことと関連していますが、
自分のPC上では、env.localenv.remoteで環境変数を分けています。
よって、こちらhttp://127.0.0.1:54321/ をわざわざ設定するようにしていました。
おっしゃる通り、環境変数が常に設定される運用なら、デフォルトの "http://127.0.0.1:54321" は不要で、環境変数が未設定ならエラーを投げるように設定していますし、http://127.0.0.1:54321/を削除しても動作が変わらなかったので削除しました!

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Test は別ファイルに記述するとよいと思います

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Companies.test.tsxを作成し、テストは別に記述しました。
やっとパスしました〜。

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

handleLogin() を使って init()されています。
ローカルのテストユーザーでログインをされているのですが必要がないと思うのですがいかがでしょうか?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

こちらの local と remote はなぜ分かれているのでしょうか?

Copy link
Copy Markdown
Contributor Author

@Jyoumama Jyoumama Feb 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

本番環境の動作を確認する必要があるかなあ、と考えたので、自分でsupabaseのクラウド環境にリモートのagentのプロジェクトを(カリキュラムで実施したように)作成しており、ターミナルでremoteとlocalを別々に起動できるように設定しています。よって、package.jsonにそのコマンドを設定しています。
なので、package.jsonは当初プルリクエストには含めるべきではないなあ、と考えていたのですが、今回含めたのは、この動作確認の必要性を確認したかったからです。ですので、駒形さんなどに確認し、無用!であれば、このpackage.jsonはmergeすべきではないので、自分の環境のみで使用したいと考えます。

また、想定remoteの方の環境変数は、当然、Git管理していませんので、(.gitignoreするようにしている)レビュアーには見ることができませんが、自分のPCのプロジェクト上では.env.remoteenv.localとして別管理しています。

supabaseクラウド環境(リモートの Supabase)←本番環境(想定)で動作確認

NEXT_PUBLIC_SUPABASE_URL=https://省略
NEXT_PUBLIC_SUPABASE_ANON_KEY=・・・・

ローカル環境(self-hosted)←こちらでチーム開発

NEXT_PUBLIC_SUPABASE_URL=http://127.0.0.1:54321
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJI...

上記の理由になります。混乱させてしまい、申し訳ありません。。。

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@supabase/postgrest-js と npm-run-all は必要ないと思うのですがいかがでしょうか?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

すいません。 npm-run-all は必要かもしれません。

@Jyoumama
Copy link
Copy Markdown
Contributor Author

Jyoumama commented Feb 8, 2025

お手隙の際にご確認をお願いします。🙏

今回は、以下の変更を行いました:

主な変更点

  1. mainブランチの統合

    • mainブランチを feature/create-companies-list に統合し、以下のファイルで発生したコンフリクトを解消しました:
      • package-lock.json
      • src/lib/database.types.ts
  2. 機能修正

    • Companies コンポーネントの認証処理を改善しました。
    • Supabase のモックを修正し、認証とデータ取得の処理を最適化しました。
    • ログイン・サインアップページ の認証フローを調整しました。
  3. テストの追加

    • Companies コンポーネントのユニットテストを追加しました。
    • E2Eテストが追加されました(e2e/login_then_logout.test.ts)。
  4. 設定ファイルの更新

    • Jest の設定とセットアップを更新しました(jest.config.ts, jest.setup.ts)。
    • .gitignore を更新し、不要なファイルを無視するようにしました(例:full_backup.sql, .env.test など)。
    • TailwindCSS 設定ファイルを調整しました。
  5. 依存関係の整理

    • @supabase/postgrest-js をバージョン 1.17.9 に固定(mainのものに合わせて修正)。
    • @supabase/supabase-js のバージョンを 2.47.3 に更新(mainのものに合わせて修正)。
    • dotenv の型定義パッケージ(@types/dotenv)を追加。
    • コンフリクト解消時に発生した依存関係ファイルの更新漏れを修正。
  6. 動作確認

    • npm run dev によるローカル環境での動作確認を実施し、正常に動作することを確認しました。
    • 全てのテストが正常に通過しました(npm run test)。
    • Lint チェック(npm run lint)もエラーなし。

レビューのポイントと思われる点

  • コンフリクト解消部分(特に package-lock.jsonsrc/lib/database.types.ts)が適切か。
  • Companies コンポーネントや認証処理の修正が妥当か。
  • 新規追加したテストコードのカバレッジや内容に改善点があればご指摘ください。

…修正。 - `Header` コンポーネントのレンダリング方法を `await Header()` から `render(<Header />)` に変更。 ユーザー情報を非同期で取得するようになり、テストが確実に順番通りに実行されるようになりました。
-  の呼び出しを非同期で行い、 を直接返さずに適切なユーザーオブジェクトを返すように修正。

これにより、モックユーザーが非同期に設定され、テストの実行が確実に同期的に行われます。
-  をインポートし、プラグイン設定を修正。
-  から  に変更し、ESモジュール形式に対応。

Tailwind CSSのアニメーション機能を有効にし、設定方法をよりモジュール化しました。
@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Jun 15, 2025

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.


🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@komagata
Copy link
Copy Markdown
Member

@daiiiichi 一からPRを作った方がやりやすいのであればそちらでもOKですよ〜

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants