終於到了傳送資料的階段了!!! 這邊要使用到Cloud Firestore的建立資料夾並寫入功能，官方文件請參考此連結。

傳資料前要先規劃一下有哪些資料是要寫入的(目前只有想到這些項目，如果有想新增的之後再補上)

1. 文章標題
2. 時間
3. 區域
4. 地點
5. 內容
6. 文章建立時間
7. 作者
   1. 帳號
   2. id

在資料夾中新增文件，要使用setDoc(”**建立好的新資料夾**”, “**放入的資料**”)

import { doc, setDoc, serverTimestamp, collection } from "firebase/firestore"; 

async function onSubmit(){
    const newPost = doc(collection(db, "post"));
    const data = {
        title,
        dateRange,
        continent,
        place,
				content,
        createdAt: serverTimestamp(),
        author:{
            name: auth.currentUser.email,
            uid: auth.currentUser.uid
        }
    }
    await setDoc(newPost, data);
}

按下送出按鈕就可以看到**Cloud Firestore**的介面裡面多了post資料夾且其中還有一筆資料。

完整的程式碼如下

import "../../src/sassStyles/newpost.scss"
import { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

import {db, storage, auth} from "../utils/firebase"
import { doc, setDoc, serverTimestamp, collection } from "firebase/firestore"; 

import Continent from "../component/Continent";
function NewPost(){
    const [title, setTitle]= useState("")
    const [dateRange, setDateRange] = useState([null, null]);
    const [startDate, endDate] = dateRange;
    const [continent, setContinent] = useState("")
    const [place, setPlace] = useState("")
    const [content, setContent] = useState("")
    async function onSubmit(){
        const newPost = doc(collection(db, "post"));
        const data = {
            title,
            dateRange,
            continent,
            place,
            content,
            createdAt: serverTimestamp(),
            author:{
                name: auth.currentUser.email,
                uid: auth.currentUser.uid
            }
        }
        await setDoc(newPost, data);
    }
    function handleCallback(childData){
        setContinent(childData)
    }
    return(
        <main data-page="5" className="newPostPage">
	        <section className="form_section">
	            <div className="container">
                    <div className="form" action="">
                        <div className="flex">
                            <div className="imgwrap">
                                 <img src="" alt="" />
                            </div>
                        </div>
                        <div className="flex">
                            <div className="form-group req">
                                <label className="form-label" htmlFor="title">標題<span>*</span></label>
                                <input className="form-input" id="title" type="text" placeholder="請輸入標題" value={title} onChange={(e)=>{setTitle(e.target.value)}}/>
                                <small>{title ? "":"必填"}</small>
                            </div>
                            <div className="form-group">
                                <label className="form-label" htmlFor="date">時間<span>*</span></label>
                                <DatePicker
                                    selectsRange={true}
                                    startDate={startDate}
                                    endDate={endDate}
                                    onChange={(update) => {
                                        setDateRange(update);
                                    }}
                                    isClearable={true}
                                />
                                <small>{dateRange ? "":"必填"}</small>
                            </div>
                            <div className="form-group">
                                <label className="form-label" htmlFor="continent">區域<span>*</span></label>
                                <Continent parentCallback={handleCallback}/>
                                <small>{continent ? "":"必填"}</small>
                            </div>
                            <div className="form-group">
                                <label className="form-label" htmlFor="country">地點<span>*</span></label>
                                <input className="form-input" id="country" type="country" placeholder="請輸入地點" value={place} onChange={(e)=>{setPlace(e.target.value)}}/>
                                <small>{place ? "":"必填"}</small>
                            </div>
                            <div className="form-group">
                                <label className="form-label" htmlFor="textarea_content">內容<span>*</span></label>
                                <textarea name="" id="textarea_content" cols="30" rows="10" placeholder="請輸入內容" value={content} onChange={(e)=>{setContent(e.target.value)}}></textarea>
                                <small>{content ? "":"必填"}</small>
                            </div>
                        </div>
                        <div className="btnwrap">
                            <a className="btn blue" href="#" onClick={onSubmit}>送出 <span></span></a>
                        </div>
                    </div>
                </div>
        </section>
    </main>
    )
}

export default NewPost