【Firebase】画面に表示されている日付を、 SNSのように〇〇時間前にする
Firebase

【Firebase】画面に表示されている日付を、 SNSのように〇〇時間前にする

作成日:2022年03月10日
更新日:2022年03月11日

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

firebase-react-chat-screen

【Firebase】Firestore Databaseに保存しているデータを基に、Reactでチャット画面を作成する

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

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

image2

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

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

react-date-fns

【React】date-fnsを使って、◯分前や◯時間前を表示する方法

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

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

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

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

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

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

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

tsx
<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 ヶ月以上なら日付を表示させるように条件分けします。

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

tsx
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

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

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

firebase-react-scroll-bottom

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

© 2024あずきぱんウェブスタジオ