ドキュメント一覧ページを作成する #38

kazuma-naka · 2024-12-12T17:31:25Z

Issue

ドキュメント一覧 #14

１回目の提出

概要

docs テーブルの migration ファイルの作成
seed.sql に docs テーブルにデータを挿入するSQL構文の追加
Docs ページを作成
Docs ページにリストとページャーを設置

変更確認方法

ブランチfeature/create-docs-listをローカルに取り込む
npm run devでローカル環境を立ち上げる

変更前

変更後

top page

docs

概要

docs テーブルの migration ファイルの作成
seed.sql に docs テーブルにデータを挿入するSQL構文の追加
Docs ページを作成
Docs ページにリストとページャーを設置
ページャー, ドキュメントリストはコンポネントとして作成
useDocs hook の作成

itemsPerPage で表示するドキュメント数を設定できるようにする

 <DocList itemsPerPage={20} />

BootCamp のドキュメント一覧と同じような仕様を心がけました。

２０のドキュメントをページごとに表示
１ページ目を選択すると１~ ５のボタンが表示される

変更確認方法

ブランチfeature/create-docs-listをローカルに取り込む
npm run devでローカル環境を立ち上げる

変更前

変更後

top page

docs

修正前

コンポネントテストの実装

DocList.test.tsx
モックの Docs が表示されるかテスト
Pagination.test.tsx
最初のページ、最後のページ、現在のページから一つ前、後のページに遷移するボタンが表示されているか、クリックすると遷移するかテストする。

~~## E2E テストの実装~~
~~- doclist.test.ts~~

~~Supawright でテスト用の docs データを作成。~~
~~created_at 順で新しいものからソートされるようにする。~~
~~テストデータにはテスト時の時間を渡すことで一番初めにテストデータが表示されるようにする。~~
このPRではE2Eテストは実装しない

vercel · 2024-12-12T17:31:29Z

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

Name	Status	Preview	Comments	Updated (UTC)
agent	❌ Failed (Inspect)			Mar 4, 2025 11:21pm

komagata · 2024-12-12T18:39:51Z

src/app/docs/page.tsx

+import { useState, useEffect } from "react";
+import supabase from "../../lib/supabase";
+
+interface Doc {


DBにあるテーブルの型はsupabaseの機能で生成したものを使ってください。

型を supabase の機能で生成したものに変更しました🖊

komagata · 2024-12-12T18:40:53Z

src/app/docs/page.tsx

+  const [totalPages, setTotalPages] = useState(0);
+  const [loading, setLoading] = useState(true);
+
+  const fetchDocs = async (page: number) => {


テストしやすいようにページにはコンポーネントを置くだけの感じでお願いします〜。

docs/page.tsx にコンポネントを置くだけに変更しました🖊

komagata · 2024-12-14T16:30:28Z

src/app/docs/layout.tsx

@@ -0,0 +1,9 @@
+import SingleLayout from "@/components/layouts/SingleLayout";
+
+export default function DashboardLayout({


Suggested change

export default function DashboardLayout({

export default function DocsLayout({

の方がいいかも？

DocsLayout に修正しました🖊

komagata · 2024-12-14T16:31:11Z

src/app/page.tsx

-        <li>
-          <Link href="/dashboard">ダッシュボード</Link>
-        </li>
+        {links.map((link, index) => (


komagata · 2024-12-14T16:32:51Z

src/components/DocList.tsx

+import supabase from "../lib/supabase";
+import Pagination from "./Pagination";
+
+interface Doc {


これって自分で手書き定義しているからsupabaseの機能で生成した型を使っていることにならないかな〜と思います。

type Doc = Tables<"docs">;

に変更しました🖊

https://supabase.com/docs/guides/api/rest/generating-types#type-shorthands

komagata · 2024-12-14T16:35:00Z

supabase/migrations/20241212152148_create_docs.sql

+    updated_at TIMESTAMP DEFAULT NOW(),
+    user_id INT NOT NULL,
+    last_updated_user_id INT NOT NULL
+);


このマークが出ているということは最終行に改行がないかもです。

ファイルの末尾に改行があるか - 初心者がRailsプロジェクトへの初PRする前に見るチェックリスト - komagataのブログ

最終行に改行を挿入しました🖊
またエディタの設定で最後に改行されるようにしました⚙

kazuma-naka · 2025-01-05T04:18:37Z

@komagata さん、
こちらも修正が終わりましたので確認よろしくおねがいします。

komagata · 2025-01-08T07:27:36Z

これに対するcomponent test, e2e testの作成をお願いします。

komagata · 2025-02-09T12:09:59Z

@kazuma-naka こちら、最後のコメントが僕になっているので、該当箇所が修正完了して、再度レビューが必要という状態になったらメンションで連絡お願いします。

今の状態はどういう状態ですか？（どちらがやり取りのボールを持っているのか）

kazuma-naka · 2025-02-09T12:21:00Z

@kazuma-naka こちら、最後のコメントが僕になっているので、該当箇所が修正完了して、再度レビューが必要という状態になったらメンションで連絡お願いします。

今の状態はどういう状態ですか？（どちらがやり取りのボールを持っているのか）

お疲れ様です。
現在 Jyouma さんにレビューを依頼しており、Jyouma さんから LGTM をいただいてから駒形さんにレビュー依頼を再度する予定です。
ですのでやり取りのボールはわたしは持っていないと思います。

…りその修正

komagata · 2025-03-09T18:43:06Z

src/app/docs/_components/DocList.tsx

@@ -0,0 +1,53 @@
+"use client";


@m0nch1 @firewood next.jsのデフォルトがサーバーなのでそっちがいいかなと思うのですが何が一般的ですかね？

App Routerとしては、できるだけ (client側の) hooksに依存せずに、サーバーで処理するのが基本なのかなと思います。
webで見つかるサンプルはclientのほうが多いようですね。

ページネーションが hooks なので、そこを切り出して use client にするのがいいかも 🤔

@firewood @m0nch1

お二人は逆の意見ってことですかね。
う〜ん、どっちに刷るのがいいですかね〜

@komagata cc: @kazuma-naka

逆ではなく、できるところは server で処理した方が良いかなという意見でした！
ページネーションの state とかは use client じゃないとできない気がするのでその部分は client component になると思うんですが、他のところは server にできると良いのかな〜という気持ちです！

@m0nch1

ページネーションの state とかは use client じゃないとできない気がするので

すみません、こちら意味が理解できなかったのですが、もう少しご説明いただければありがたいです〜。

ページネーションですが、

server側でページネーションし、指定されたページを返す

server側で全部返しておいて、clientでページネーションする
の後者の意味かなと思います。
普通にserverで実装すると前者になりそうですが、ページの行き来や、フィルタ条件を動的に変えるなら後者になるのかなと思います。

@firewood なるほどです、回答ありがとうございます。
@m0nch1 上記いかがでしょうか？

hotpepsi さんの記載の通りです！！
返信遅れました 🙏

@m0nch1 @firewood なるほどです。回答ありがとうございます。

komagata

僕も確認させて頂きました。OKです〜🙆‍♂️

kazuma-naka self-assigned this Dec 12, 2024

kazuma-naka requested a review from komagata December 12, 2024 17:31

komagata reviewed Dec 12, 2024

View reviewed changes

vercel bot had a problem deploying to Preview December 13, 2024 15:38 Failure

kazuma-naka force-pushed the feature/create-docs-list branch from cbcf4f8 to c2d8a05 Compare December 13, 2024 15:46

vercel bot had a problem deploying to Preview December 13, 2024 15:46 Failure

kazuma-naka requested a review from komagata December 13, 2024 15:47

vercel bot had a problem deploying to Preview December 13, 2024 16:49 Failure

vercel bot had a problem deploying to Preview December 13, 2024 16:54 Failure

kazuma-naka force-pushed the feature/create-docs-list branch from 8be2d36 to f33ed8c Compare December 14, 2024 15:51

vercel bot had a problem deploying to Preview December 14, 2024 15:51 Failure

komagata reviewed Dec 14, 2024

View reviewed changes

vercel bot had a problem deploying to Preview December 14, 2024 17:18 Failure

vercel bot had a problem deploying to Preview December 14, 2024 17:21 Failure

kazuma-naka requested a review from komagata December 14, 2024 17:25

vercel bot had a problem deploying to Preview December 17, 2024 06:14 Failure

kazuma-naka force-pushed the feature/create-docs-list branch from ec03455 to 24dbfe9 Compare January 8, 2025 00:38

vercel bot had a problem deploying to Preview January 8, 2025 00:38 Failure

kazuma-naka force-pushed the feature/create-docs-list branch from 24dbfe9 to 68e28dd Compare February 8, 2025 02:37

vercel bot had a problem deploying to Preview February 8, 2025 02:38 Failure

kazuma-naka requested a review from Jyoumama February 8, 2025 02:44

vercel bot had a problem deploying to Preview February 8, 2025 05:04 Failure

vercel bot had a problem deploying to Preview February 8, 2025 05:08 Failure

kazuma-naka force-pushed the feature/create-docs-list branch from 77ef109 to 2facd41 Compare February 10, 2025 05:33

vercel bot had a problem deploying to Preview February 10, 2025 05:34 Failure

kazuma-naka added 23 commits March 4, 2025 18:19

useEffect 内で fetchDocs を使っていたが dependency array 内になかったので warning が出てお…

afd4a46

…りその修正

ドキュメント一覧を shadcn の Card を使って実装

2c8f44e

Pagination をドキュメント一覧の上部にも配置

a818e0c

ディレクトリやnits なものの修正

e551e52

ドキュメント一覧は E2E テストが必要でなくコンポネントテストのみで十分なのでE2Eテストを削除

9c57139

itemPerPage を 20 に設定

2697a35

BootCamp のドキュメントに合わせたことをコメントで残す

4c2b699

docs の表示する順を updated_at の新しいものを上にソートする

2a5c021

Pagination.test.tsx を refactor する

6aca131

Docs のモック関数を mocks/supabase.ts に切り分ける

15d0628

DocList.test.tsx の docs のモックデータに現在の時間を渡す

24278e6

mockUseDocs を src/supabase.ts に移動する

aa1ad8d

pagination を Chakra UI を使って作成する

ef50060

pagination を chakra UI を使って実装

8be7750

Pagination 上部にマージンを追加

80b8607

src/mocks/supabase.ts のコンフリクトを解消

4e7c60b

DocList のCIテストのモックの変数の修正

df46877

DocList.tsx と DocList.test.tsx を src/components から削除する

cb2aa5f

use client を DocList に移動する

67acc39

DocsPage をサーバーコンポネントにして Layout を無くす

d74333a

import type { Tables } に変更する

525a472

import のパスを修正

7a91322

nits の部分を修正

1a6c1ed

kazuma-naka force-pushed the feature/create-docs-list branch from 545430f to 1a6c1ed Compare March 4, 2025 23:21

vercel bot had a problem deploying to Preview March 4, 2025 23:21 Failure

komagata reviewed Mar 9, 2025

View reviewed changes

komagata approved these changes Apr 8, 2025

View reviewed changes

komagata removed the request for review from Jyoumama April 8, 2025 06:39

komagata merged commit 296bbe1 into main Apr 8, 2025
4 of 6 checks passed

komagata deleted the feature/create-docs-list branch April 8, 2025 06:39

		@@ -0,0 +1,9 @@
		import SingleLayout from "@/components/layouts/SingleLayout";

		export default function DashboardLayout({

	export default function DashboardLayout({
	export default function DocsLayout({

ドキュメント一覧ページを作成する #38

ドキュメント一覧ページを作成する #38

Uh oh!

Conversation

kazuma-naka commented Dec 12, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Issue

概要

変更確認方法

変更前

変更後

top page

docs

概要

変更確認方法

変更前

変更後

top page

docs

コンポネントテストの実装

Uh oh!

vercel bot commented Dec 12, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kazuma-naka commented Jan 5, 2025

Uh oh!

komagata commented Jan 8, 2025

Uh oh!

komagata commented Feb 9, 2025

Uh oh!

kazuma-naka commented Feb 9, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

komagata left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

kazuma-naka commented Dec 12, 2024 •

edited

Loading

vercel bot commented Dec 12, 2024 •

edited

Loading