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

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

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

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

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

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を追加します。

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

次に、Avatar を追加します。

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

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

ブラウザを確認すると、

image5

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

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

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

{
  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 でチャット画面を作成します。

ブログ一覧