前回は、Firestore Database に保存しているデータを基に、React でチャット画面を作成しました。

今回は、画面に表示されている日付を、 SNS のように〇〇時間前にします。

現在は、投稿した日付が表示されています。

image2

こちらを、1 分未満なら『たった今』、1 ヶ月未満なら『〇〇前』、1 ヶ月以上なら日付を表示させます。

基本は、以前紹介した『Date-Fns を使って、◯ 分前や ◯ 時間前を表示する方法』になぞって実装します。

まずは、現在時刻からどのくらい経っているかを表示するために、date-fnsからformatDistanceをインポートします。

また、日本語にするために、date-fns/localeからjaをインポートします。

import { format, formatDistance } from "date-fns"
import { ja } from "date-fns/locale"

条件分けするために、time関数を作成します。

formatDistanceの第一引数に現在時刻、第二引数に基準の日付、第三引数にlocatejaを指定します。

const time = (date: Timestamp) => {
  let timestamp = formatDistance(new Date(), date.toDate(), {
    locale: ja,
  })
  return timestamp
}

JSX で日付を表示していたところに、time関数を使用します。

<Box>
  <Typography sx={{ p: 1, background: "#dddddd", borderRadius: 1 }}>
    {message.text}
  </Typography>
  <Typography sx={{ fontSize: 12 }}>{time(message.createdAt)}</Typography>
</Box>

ブラウザで確認してみましょう。

image3

日付が、経過した時間へ変更されました。

試しにメッセージを送信すると、

image4

『1 分未満』と表示されました。

1 分未満なら『たった今』、1 ヶ月未満なら『〇〇前』、1 ヶ月以上なら日付を表示させるように条件分けします。

つまり、『未満』が含まれていたら『たった今』、『か月』や『年』が表示されていたら日付、それ以外は、〇〇前と表示するようにします。

const time = (date: Timestamp) => {
  let timestamp = formatDistance(new Date(), date.toDate(), {
    locale: ja,
  })
  if (timestamp.indexOf("未満") !== -1) {
    return (timestamp = "たった今")
  } else if (
    timestamp.indexOf("か月") !== -1 ||
    timestamp.indexOf("年") !== -1
  ) {
    return (timestamp = format(date.toDate(), "yyyy年M月d日", {
      locale: ja,
    }))
  } else {
    return (timestamp = timestamp + "前")
  }
}

では、確認してみましょう。

image5

今のところ、1 ヶ月以上前の投稿がないので、全て〇〇前になっています。

メッセージを投稿してみると、

image6

『たった今』と表示されました。

次回は、最新メッセージが表示されるよう、ローディング後、一番下の画面まで移動します。

ブログ一覧