建立好基本表單後就要傳送資料到後台去了，今天原先是要先把基本的欄位先傳到資料庫裡面試試，但在開始引入Cloud Firestore時發現了要優化的地方，在這想要改寫一下之前所寫好的firebase.js，愈做到後面發現共用的東西都被零散的丟在每一頁，需要做一下統整。

這是調整後的firebase.js，auth、db、storage 把他們跟初始的資料寫在一起，再到頁面引入資料。

import { initializeApp } from 'firebase/app';
import { getAuth } from "firebase/auth";
import { getFirestore } from 'firebase/firestore';
import { getStorage } from "firebase/storage";

const firebaseConfig = {
    apiKey: "AIzaSyDohLWkytRZXcfUm9vfoOdQXB5T-dp6k8k",
    authDomain: "notaloner-94408.firebaseapp.com",
    projectId: "notaloner-94408",
    storageBucket: "notaloner-94408.appspot.com",
    messagingSenderId: "44993397298",
    appId: "1:44993397298:web:706cd9931c2e4fc9ce722b"
  };

  const app = initializeApp(firebaseConfig);

  export const auth = getAuth(app);
  export const db = getFirestore(app);
  export const storage = getStorage(app);

其他有使用到firebase資料的頁面一併也要改寫一下，這邊就以註冊頁面為範例:

把原本的

firebase.auth().createUserWithEmailAndPassword(email, password)

改寫成

const auth = getAuth();
createUserWithEmailAndPassword(auth,email, password)

完整的註冊頁面會變成:

import '../sassStyles/signup.scss';
import {React, useState} from 'react';
import { useNavigate } from "react-router-dom";
import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";

function Signup(){
    const navigate = useNavigate();
    const [email,setEmail]=useState('');
    const [password,setPassword]=useState('');
    const [emailErrorMessage,setEmailErrorMessage]=useState('');
    const [passwordErrorMessage,setPasswordErrorMessage]=useState('');
    function onSubmit(){
        const auth = getAuth();
        createUserWithEmailAndPassword(auth,email, password)
        .then(userCredential => {
            var user = userCredential.user;
            navigate("/")
           
        })
        .catch((error) => {
            var errorCode = error.code;
            // var errorMessage = error.message;
            console.log(errorCode)
            switch(errorCode){
                case 'auth/email-already-in-use':
                    setEmailErrorMessage('信箱已存在');
                    break;
                case 'auth/invalid-email':
                    setEmailErrorMessage('請輸入正確的Email格式');
                    break;
                case 'auth/weak-password':
                    setPasswordErrorMessage('至少6字元以上');
                break;
            }
        });
    
    };
    return(
        <main data-page="-" className='signupPage'>
            <section className="banner_section">
                <div className="container">
                    <div className="pagetitle">
                        <h1 className="pagetitle_cn">會員註冊</h1>
                        <div className="pagetitle_en">SIGN UP</div>
                    </div>
                </div>
            </section>
            <section className="form_section">
                <div className="container">
                    <div >
                        <div className="form-group">
                            <label className="form-label" htmlFor="email">帳號<span>*</span></label>
                            <input className="form-input" id="email" type="email" placeholder="請輸入您常用的Email" value={email} onChange={(e) => {setEmail(e.target.value)	}}/>
                            <small>{emailErrorMessage}</small>
                        </div>
                        <div className="form-group">
                            <label className="form-label" htmlFor="password1">密碼設定<span>*</span></label>
                            <input className="form-input" id="password1" type="password" placeholder="至少6字元以上" value={password} onChange={ (e) => {setPassword(e.target.value)}}/>
                            <small>{passwordErrorMessage}</small>
                        </div>
                        <div className="btnwrap">
                            <a className="btn blue" href="#" onClick={onSubmit}>註冊 <span></span></a>
                        </div>
                    </div>
                </div>
            </section>
        </main>
    )
}
export default Signup

改寫的過程一直有出現錯誤，發現引入的方式與寫法要特別注意，有時候看到一些網路資源使用，卻疏忽了版本問題，以至於錯誤的產生。今天雖然是沒有做功能，但改寫有優化到也是件值得開心的事。