Firebase

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

作成日：2022年03月08日

更新日：2022年03月09日

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

【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);
}

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

送信すると、

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

Firebase Database を確認すると、

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

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

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="" />

ブラウザを確認すると、

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

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

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>
  );
}