next.jsとsupabaseでコメントをリアルタイム表示するアプリを作る その3

こんばんは。
アウトプット太郎です。

前回に引き続き、改良を加えていきます！

前回：
https://qiita.com/output_tarou/items/8c994608c75cb7b65002

今見た目はこんな感じ

レイアウトを整えるとともに、
コメント日時を表示し、削除ボタンもつけてみます。

日時の取得自体はすでにcommentオブジェクトが
値としてcreated_atを保持しているので、呼び出せば即出せます。

ただしデータの形がDBに入れているようなtimestamp型になっているので、
2024-06-13 14:12:29.489131+00
関数をかましてやることでJSTにフォーマットさせます。

const formatDate = (dateString: string) => {
  const date = new Date(dateString);
  const options: Intl.DateTimeFormatOptions = {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
    hour12: false,
    timeZone: 'Asia/Tokyo',
  };
  return date.toLocaleDateString('ja-JP', options);
};

引数にtimestampを受け取り、
Data型のオブジェクトとしてインスタンス化し、
optionとして視覚的に見やすい形にしてリターンさせています。

次に、削除ボタンですが、
まずsupabase側でdeleteのRLS policyを追加します。

そして、ボタンを設置するとともに、
クリック時の関数を定義します。

  const handleCommentDelete = async (id: number) => {
    const { error } = await supabase
      .from('comments')
      .delete()
      .eq('id', id);

    if (error) console.error('Error deleting comment', error);
    else fetchComments();
  };

引数のidはcommentオブジェクトが持つ値で
supabase側で一意に特定できます。

こんな感じで日時、内容、削除ボタンが設置できました！