ブログにコメントできないコメント機能を表示させることにした

📅 2024-10-04

Customize

ブログにコメントできないコメント機能を表示させることにした

ブログ改造日記

🔄 2024-10-05

ここからは本文です

＼できあがった状態は以下の通り／

ブログ上：

Notion上：

返ってきたやつメモ：

{
  object: 'list',
  results: [
    {
      object: 'comment',
      id: '1155c7d2-12ad-802e-afde-001d7c2dda7b',
      parent: [Object],
      discussion_id: '1155c7d2-12ad-8090-a3fa-001c1bf734f8',
      created_time: '2024-10-04T07:50:00.000Z',
      last_edited_time: '2024-10-04T07:50:00.000Z',
      created_by: [Object],
      rich_text: [Array]
    },
    {
      object: 'comment',
      id: '1155c7d2-12ad-80af-a872-001dd957ff5c',
      parent: [Object],
      discussion_id: '1155c7d2-12ad-8090-a3fa-001c1bf734f8',
      created_time: '2024-10-04T13:25:00.000Z',
      last_edited_time: '2024-10-04T13:25:00.000Z',
      created_by: [Object],
      rich_text: [Array]
    }
  ],
  next_cursor: null,
  has_more: false,
  type: 'comment',
  comment: {},
  request_id: '372094f9-f0e9-4dde-b2bd-670d2f81d256'
}

すばらしくて涙が出そう….( ；∀；)

では、さっそく作り方を解説します！！！

分からない部分はAIに聞いて下さい。ポイントだけ提示されていれば把握できるかと思います✌

作り方

1. データの流れを雑に作る

1-1. Notion pageのコメントのデータを取得する

export async function getCommentsPage(pageId: string): Promise<Comment> {
  const blockId = pageId;
  const res = await client.comments.list({ block_id: blockId });
  const comments = res.results.map((comment) => {
    return {
      id: comment.id,
      text: comment.rich_text[0].plain_text // 例えば、コメントのテキストを抽出
    };
  });
  
  return comments
}

lib/notion/client.ts

これをconsole.logすると、配列になって返ってくる

[
  {
    id: '1155c7d2-12ad-802e-afde-001d7c2dda7b',
    text: 'コメントをする',
  },
  {
    id: '1155c7d2-12ad-80af-a872-001dd957ff5c',
    text: '２つめのコメントをする。これは、スレッドにぶらさげてる感じかな？',
  }
]

1-2. functionで処理した内容を表示させる

<div>{comment.map((comment) => (<div>{comment.text}</div>))} </div>

app/blog/[slug]/page.tsxのconst BlogSlugPage内

2. 見た目を整える

コメントごとに改行を加える。

<div>{comment.map((comment) => (<div style={{ marginBottom: '10px'}}>{comment.text}</div>))} </div>

app/blog/[slug]/page.tsxのconst BlogSlugPage内

3. 他に欲しい情報を加える

コメントをした主の名前を添える。

3-1. コメント主名を取得する

async function getUserName(userId: string){
   const res = await client.users.retrieve({ user_id: userId });
   const user= res.name
   return user
}

lib/notion/client.ts

3-2. コメント内容とコメント主名をまとめて処理する

Promiseで約束をしとくw

export async function getCommentsPage(pageId: string) {
  const blockId = pageId;
  const res = await client.comments.list({ block_id: blockId });
  const comments = await Promise.all(res.results.map(async (comment) => {
    const userName = await getUserName(comment.created_by.id);
    return {
      id: comment.id,
      text: comment.rich_text[0].plain_text, // コメントのテキストを抽出
      user: userName // ユーザー名を追加
    };
  }));

  return comments
}

lib/notion/client.ts

3-3. 横並びにして表示する

<div>
  {comment.map((comment, index) => (
    <div key={index} style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
      <div style={{ marginRight: '10px', fontWeight: 'bold' }}>{comment.user}:</div>
      <div>{comment.text}</div>
    </div>
  ))}
</div>