倒數第4天的挑戰，是完成一套新增讀取編輯刪除(CRUD)的頁面組裝與串接，話不多說直接開始！

組裝列表頁面(店家視角)

1. 串接讀取文件的 API

import { collection, getDoc, getDocs } from "firebase/firestore";
import { db } from "../firebase";

useEffect(() => {
    async function fetchListings() {
      try {
        const productsRef = collection(db, "products");
        // 做讀取成功的事...
      } catch (error) {
        console.log(error);
      }
    }
}, []);

2. 製作沒有資料時的渲染效果
   
3. 製作有資料時的表格
   基本上是為了方便店家在後續編輯與刪除使用，在列表頁僅有呈現服務項目名稱與操作按鈕。然而因為編輯與刪除依照當初故事設定也有一些情境，所以也要寫判斷和設計樣式，考慮到手機版網頁的排版，操作按鈕僅使用視覺清楚的 icon 標示。
   

新增表單頁面

1. 組裝表單元素
   刻畫面時，我會確認 <label> 和 <input> 等輸入框欄位的 for 和 name 屬性有對上，這是很基本的原理，方便後續取值送出。
   
2. 新增送出的 function

const onSubmit = (e) => {
    e.preventDefault();
    // 檢查必填值與規則等，呼叫 API

3. 串接新增文件的 API

import { collection, addDoc } from "firebase/firestore"; 

const addDocFunction = (formdata) => {
    try {
      const docRef = await addDoc(collection(db, product, formdata);
      // 做新增成功的事...
    } catch (error) {
      console.log("error => ", error);
    }
 };

4. 回到 Firebase Console 控制台中確認資料是否成功寫入
   

編輯表單頁面

基本上是依樣畫葫蘆新增頁面，沒有做過多的變化調整。

1. 串接讀取單一服務項目的 API
   先使用 useParams 抓取單一服務項目的 id

import { useParams } from "react-router-dom";

const params = useParams();

然後使用該 id 當作參數呼叫 API

import { db } from "../firebase";
import { doc, getDoc } from "firebase/firestore";

useEffect(() => {
    async function fetchProduct() {
      const docRef = doc(db, "products", params.productId);
      const docSnap = await getDoc(docRef);
      if (docSnap.exists()) {
        // 做讀取成功的事...
      }
    }
    fetchProduct();
}, [params.productId]);

2. 將值渲染進表單的預設值裡
   在這步驟通常我也會確認故事情境，是否有些欄位需要加上 readonly 屬性。
   

3. 新增更新的 function
   因為我習慣將新增和編輯表單做在同一頁面，僅使用 React 裡的 state 去控制目前為新增或編輯頁面，呼叫不同的「送出(onSubmit)事件」，所以如果跟我同一種做法的話，也要記得將標題和送出按鈕的文字做判斷～

const onSubmit = (e) => {
    e.preventDefault();
    // 檢查必填值與規則等，呼叫 API

4. 串接更新的 API

import { doc, updateDoc } from "firebase/firestore";
import { db } from "../firebase";

const updateDocFunction = (formdata) => {
    try {
      const docRef = await updateDoc(collection(db, product, formdata);
      // 做更新成功的事...
    } catch (error) {
      console.log("error => ", error);
    }
 };

刪除功能

刪除功能僅做在列表頁面，且僅有在該服務項目沒有被預約中的狀況下才可點擊，所以預先做出兩種情境，在程式碼中加上 todo memo，並於 git 提交訊息中附註訊息，後續再回來加上判斷。