前回は、プロフィール画面にデフォルトでユーザー情報を表示しました。

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

まずは、Firebase Database に保存している users のドキュメント ID をプローフィール情報に追加します。

userProfile.ts のプロフィール情報は、getDocs のdoc.data()で取得しています。

ドキュメント ID は、doc.idで取得することができます。

doc.idを docData へ追加します。

const querySnapshot = await getDocs(q)
querySnapshot.forEach(doc => {
  const docData = doc.data()
  docData.id = doc.id
  setProfile(docData)
})

次に、Profile.tsx へ移動し、ユーザー情報を取得します。

Firestore Database の情報を更新するには、docupdateDocを使用します。

firebase/firestoreからdocupdateDocをインポートします。

import { addDoc, collection, doc, updateDoc } from "firebase/firestore"

単一のユーザー情報を取得するには、docを使用します。

以前設定した、firebaseApp から firestore をインポートします。

Firebase の設定は、こちらをご覧ください。

docの第一引数には、Firebase Database の設定をしているfirestore、第二引数には、コレクションである『users』、第三引数には、先程設定したドキュメント ID があるprofile.idを指定します。

const userRef = doc(firestore, "users", profile?.id)

ユーザー情報を更新するには、updateDocを使用します。

getDownloadURLの中で、profileがある場合はupdateDocを指定し、profileがない場合はaddDocを指定します。

imageがない場合も同様に指定しておきましょう。

try {
  const uid = user.user!.uid
  const docRef = collection(firestore, "users")

  if (image) {
    const imageRef = ref(firestorage, image.name)

    uploadBytes(imageRef, image).then(() => {
      getDownloadURL(imageRef).then(async url => {
        if (profile) {
          const userRef = doc(firestore, "users", profile?.id)
          await updateDoc(userRef, {
            name,
            image: url,
          })
        } else {
          await addDoc(docRef, {
            name,
            image: url,
            uid,
          })
        }
      })
    })
  } else {
    if (profile) {
      const userRef = doc(firestore, "users", profile?.id)
      await updateDoc(userRef, { name })
    } else {
      await addDoc(docRef, { name, image: "", uid })
    }
  }
  setSuccess(true)
} catch (err) {
  console.log(err)
  setError(true)
}

Button や Alert も profile がある場合は『更新』、profile がない場合は『作成』と表示されるようにします。

<Button type="submit" fullWidth variant="contained" sx={{ mt: 3, mb: 2 }}>
  {profile ? "更新" : "作成"}
</Button>
{
  error && (
    <Alert severity="error">{profile ? "更新" : "作成"}できませんでした</Alert>
  )
}
{
  success && (
    <Alert severity="success"> {profile ? "更新" : "作成"}しました</Alert>
  )
}

では、動作確認します。

image2

ユーザー名を『テスト 2 号』にしてみます。

image3

更新ボタンをクリックすると、

image4

メッセージが表示されました。

Firebase Database でユーザー情報を確認すると、

image5

テスト 2 号へ変更されていました。

ちなみに、ユーザーが存在しない場合は、ボタンが『作成』になっていました。

image6

再度作成ボタンをクリックすると、

image7

『作成しました』というメッセージになっていました。

ついでに、ヘッダーのアバターも登録している画像へ変更します。

Header.tsx

const profileData = useProfile()
const profile = profileData.profile
<Avatar src={profile ? profile.image : ""} alt="" />

image8

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

ブログ一覧