【Firebase】メッセージにプロフィール情報を追加し、Firestore Databaseに保存する
Firebase

【Firebase】メッセージにプロフィール情報を追加し、Firestore Databaseに保存する

作成日:2022年03月08日
更新日:2022年03月09日

前回は、Firestore Database に保存しているプロフィール情報を更新しました。

firebase-react-profile-update

【Firebase】Firestore Databaseに保存しているプロフィール情報を更新する

今回は、メッセージにプロフィール情報を追加し、Firestore Database に保存します。

まずは、MEssageInput.tsx で useProfile.ts からプロフィールを取り出せるようにします。

tsx
const profileData = useProfile();
const profile = profileData.profile;

handleClick 内の addDoc で、ユーザー情報を送信するようにします。

tsx
try {
const docRef = collection(firestore, "messages");
await addDoc(docRef, {
text: message,
createdAt: Timestamp.fromDate(new Date()),
user: {
name: profile?.name,
image: profile?.image,
uid: profile?.uid,
},
});
} catch (err) {
console.log(err);
setError(true);
}

では、試しにメッセージを送信してみます。

image2

送信すると、

image3

メッセージが追加されました。

Firebase Database を確認すると、

image4

メッセージにユーザー情報が追加されました。

次に、ブラウザにメッセージと一緒にアバターを表示させます。

Firebase Database の messages で user がないメッセージは、削除しておきます。

Home.tsx で、Message の型にimageを追加します。

tsx
interface Message {
id: string;
text: string;
createdAt: Timestamp;
user: {
name: string;
uid: string;
image: string;
};
}

次に、Avatar を追加します。

src は、image がある時、image を表示、iamga がない時、””とします。

tsx
<Avatar src={message.user.image ? message.user.image : ""} alt="" />

ブラウザを確認すると、

image5

アバターが表示されました。

アバターがない場合は、人の形をしたアイコンが表示されます。

MUI でチャット画面らしくしましょう。

tsx
{
messages ? (
messages.map((message: Message) => (
<Box key={message.id} sx={{ display: "flex", my: 2 }}>
<Box>
<Avatar src={message.user.image ? message.user.image : ""} alt="" />
</Box>
<Box sx={{ ml: 2 }}>
<Typography sx={{ p: 1, background: "#dddddd", borderRadius: 1 }}>
{message.text}
</Typography>
<Typography sx={{ fontSize: 12 }}>
{format(message.createdAt.toDate(), "yyyy年MM月dd日")}
</Typography>
</Box>
</Box>
))
) : (
<p>メッセージが存在しません</p>
);
}

image6

チャットのようになりました。

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

firebase-react-chat-screen

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

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