Merge pull request #17 from toririm/hotifx/itemschema

アイテムスキーマを修正＆Firestore Timestampの型変換に対応

.eslintrc.cjs

@@ -20,6 +20,18 @@ module.exports = {
     es6: true,
   },
   ignorePatterns: ["!**/.server", "!**/.client"],
+  rules: {
+    // `_` から始まる変数は使わなくても警告を出さない
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      {
+        argsIgnorePattern: "^_",
+        varsIgnorePattern: "^_",
+        cautionErrorsIgnorePattern: "^_",
+        destructuredArrayIgnorePattern: "^_",
+      },
+    ],
+  },
 
   // Base config
   extends: ["eslint:recommended", "prettier"],

app/firebase/converter.ts

@@ -3,6 +3,7 @@ import type {
   QueryDocumentSnapshot,
   SnapshotOptions,
 } from "firebase/firestore";
+import _ from "lodash";
 import type { ZodSchema } from "zod";
 
 export const converter = <T>(schema: ZodSchema<T>) => {
@@ -16,7 +17,32 @@ export const converter = <T>(schema: ZodSchema<T>) => {
     ) => {
       const data = snapshot.data(options);
       // id は Firestore のドキュメント ID を使う
-      return schema.parse({ ...data, id: snapshot.id });
+      const dataWithId = { ...data, id: snapshot.id };
+      const dateParsedData = parseDateProperty(dataWithId);
+      return schema.parse(dateParsedData);
     },
   };
 };
+
+// 通常の Firestore のデータは上記 Zod によってパースできるが
+// Firestore の Timestamp はパースできないため、個別でパースする
+
+// この関数の型注釈は若干嘘
+const parseDateProperty = (data: DocumentData): DocumentData => {
+  const parsedData = _.mapValues(data, (value) =>
+    // toDate が存在する場合は Timestamp 型としてパースする
+    value?.toDate ? value.toDate() : value,
+  );
+  const recursivelyParsedData = _.mapValues(parsedData, (value) => {
+    // 再帰的にパースする
+    switch (Object.prototype.toString.call(value)) {
+      case "[object Object]":
+        return parseDateProperty(value);
+      case "[object Array]":
+        return (value as Array<DocumentData>).map((v) => parseDateProperty(v));
+      default:
+        return value;
+    }
+  });
+  return recursivelyParsedData;
+};

app/models/item.ts

@@ -3,7 +3,7 @@ import { z } from "zod";
 export const itemtypes = ["hot", "ice", "ore", "milk"] as const;
 
 export const itemSchema = z.object({
-  id: z.string().nullable(), // Firestore のドキュメント ID
+  id: z.string().optional(), // Firestore のドキュメント ID
   name: z.string({ required_error: "名前が未入力です" }),
   price: z.number({ required_error: "価格が未入力です" }),
   type: z.enum(itemtypes, {

app/models/order.ts

@@ -2,7 +2,7 @@ import { z } from "zod";
 import { itemSchema } from "./item";
 
 export const orderSchema = z.object({
-  id: z.string().nullable(), // Firestore のドキュメント ID
+  id: z.string().optional(), // Firestore のドキュメント ID
   orderId: z.number(),
   createdAt: z.date(),
   servedAt: z.date().nullable(),

package.json

@@ -22,6 +22,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "firebase": "^10.7.2",
+    "lodash": "^4.17.21",
     "lucide-react": "^0.424.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -32,6 +33,7 @@
   },
   "devDependencies": {
     "@remix-run/dev": "^2.11.0",
+    "@types/lodash": "^4.17.7",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^6.7.4",