作りたいものから逆算して学ぶFireStore、例えば予約システム②

「作りたいものから逆算して学ぶFireStore 、例えば予約システム ①」からの続きの記事になります。

FirestoreのarrayUnionとarrayRemoveを説明するために、実用的テーストを入れてシンプルに作ろうと思ったら、知識不足を思い知ることに！

気になるかたはGitHubでご覧ください！FireStore9BasicTechnique

結論

配列を階層に持つと関連データ処理が予想外に大変になります。やりながら後悔しました。ただカレンダーコンポーネントではそういうデータ形式を使ったりすると思うので、必要に応じてそういうデータ構造にすれば良いと思います。

とりあえず作成したものを画面で見てください。

それでもって、arrayUnionとarrayRemoveを使って、増減する配列部分がこれ

画面右のreserveArrayの０とか１っていうのが、予約を登録するたびに増えてきます。
一覧画面の右のCancelボタンを押すと、配列の要素が削除されます。

大変だったこと

• 登録するときの存在チェックなど
• 削除するとき複数の配列から特定の配列を探さなくてはならない
• 階層型のデータを表で表すとき、変換しないと使いにくい
• Material UIのフォーム（慣れたら使いやすそう）
• フォームの状態管理（useForm.tsというところでやってます）
• 日付と時間の計算処理 (util.tsでやってます)
• 配列のデータ階層はすっきり書きにくい

でした。失敗したことで、自分の知識が足りないところがいろいろわかりました。
arrayUnionは使うのは一瞬ですね。登録する時のTry部分１行のみ

firebaseAdvance.ts

export const addReserve = async (
  ymd: string,
  staffNo: number,
  clientName: string,
  menu: string,
  startTime: string,
  endTime: string
) => {
  const id = getStaffReserveId(ymd, staffNo);
  const docRef = doc(db, "staff_reserve", id);
  const mydoc = await getDoc(docRef);
  if (mydoc.exists()) {
    const reserve = makeReserveObject(clientName, menu, startTime, endTime);
    try {
      await updateDoc(docRef, {
        reserveArray: arrayUnion(reserve),
      });
    } catch (error) {
      Swal.fire("addReserveRecord", "Can't add Reserve Data", "error");
    }
  } else {
    addStaffReserve(ymd, staffNo, clientName, menu, startTime, endTime);
  }
  Swal.fire("Reserve Success");
};

arrayRemoveも使うのは一瞬、同じく下のTry部分だけ１行

firebaseAdvance.ts

export const removeReserve = async (
  ymd: string,
  staffNo: number,
  startTime: string,
  endTime: string
) => {
  const id = getStaffReserveId(ymd, staffNo);
  const staffReserveRef = doc(db, "staff_reserve", id);
  const myDoc = await getDoc(staffReserveRef);
  if (!myDoc.exists()) {
    Swal.fire("removeReserveRecord", "Can't Find StaffReserveData", "error");
    return;
  }
  const ExistReserve = myDoc.data() as StaffReserve;
  const reserve = findReserve(ExistReserve, startTime, endTime);
  if (reserve) {
    try {
      await updateDoc(staffReserveRef, {
        reserveArray: arrayRemove(reserve),
      });
    } catch (error) {
      Swal.fire("removeReserveRecord", "Can't Edit Record", "error");
    }
  } else {
    Swal.fire("removeReserveRecord", "Can't Find Reserve", "error");
  }
  Swal.fire("removeReserveRecord", "Reserve is Canceld", "success");
};

記事にするのやめようと思いましたが、Githubのコードを眺めたら、もしかして使えるフレーズがいくつか探せるかもしれません。

自分的には、useFormのところや、存在チェック、階層のあるデータをStateで持ったときの部分削除処理とか、日付系の関数を作ったとこは、他で役に立ちそうで良かった感じです。

今回、プログラミングは考えるより、慣れろを実感しました。
残念なことに、今回はFireStoreはあまり関係なかったかも。