firebaseにユーザー情報の追加のやり方について質問です。ユーザー(メールアドレス)がログインしてる状態で性別の男女ボタンのどちらを押すとfirebase上(添付図のnicknameの下)にgender:「男or女」みたいな感じで割り込ませる実装がしたいです。main.jsのどこが違うかまたは追加する必要があるものありましたらご教示いただきたいです。よろしくお願いします。
Html
<section id="gender" class="view"> <h1 class="animated fadeIn">性別を選択してください</h1> <section class="gender-button"> <button id="man-button" type="button" class="man-button"> 男性 </button> <button id="woman-button" type="button" class="woman-button"> 女性 </button> </section> </section> コード
main.js
const updateNicknameDisplay = (uid) => { const user = dbdata.users[uid]; if (user) { $(`.nickname-${uid}`).text(user.nickname); if (uid === currentUID) { $('#menu-profile-name').text(user.nickname); } } }; // ニックネーム欄の値が変更されたらデータベースに保存する $('#settings-nickname').on('change', (e) => { const newName = $(e.target).val(); if (newName.length === 0) { // 入力されていない場合は何もしない return; } firebase .database() .ref(`users/${currentUID}`) .update({ nickname: newName, updatedAt: firebase.database.ServerValue.TIMESTAMP, }); }); //性別ボタンの動作確認 $('#man-button').on('click', (e) => { console.log('男性'); }); $('#woman-button').on('click', (e) => { console.log('女性'); }); const loadGenderView = () => { dbdata = {};//キャッシュデータを空にする // ユーザ一覧を取得してさらに変更を監視 const usersRef = firebase.database().ref('users'); // 過去に登録したイベントハンドラを削除 usersRef.off('value'); // イベントハンドラを登録 usersRef.on('value', (usersSnapshot) => { // usersに変更があるとこの中が実行される dbdata.users = usersSnapshot.val(); console.log(dbdata); console.log(currentUID); // 自分のユーザデータが存在しない場合は作成 if (dbdata.users === null || !dbdata.users[currentUID]) { const { currentUser } = firebase.auth(); if (currentUser) { console.log('ユーザデータを作成します'); firebase .database() .ref(`users/${currentUID}`) .set({ nickname: currentUser.email, gender: currentUser.gender, createdAt: firebase.database.ServerValue.TIMESTAMP, updatedAt: firebase.database.ServerValue.TIMESTAMP, }); // このコールバック関数が再度呼ばれるのでこれ以上は処理しない return; } } Object.keys(dbdata.users).forEach((uid) => { updateNicknameDisplay(uid); }); }); }; /** * ---------------------- * すべての画面共通で使う関数 * ---------------------- */ // ビュー(画面)を変更する const showView = (id) => { $('.view').hide(); $(`#${id}`).fadeIn(); loadGenderView(); }; コード
あなたの回答
tips
プレビュー