Green: Switch purchase time to timestamp (todos)

- update firebase sample data
- test that playwright tests didn't get 10x as slow, and that that's really just my laptop battery

package.json

@@ -14,6 +14,7 @@
     "ios": "npm run build && npm run sync && npm run xcode",
     "xcode": "cap open ios",
     "firebase": "firebase emulators:start --import ./firestore-emulator-data",
+    "firebase-export": "firebase emulators:export ./firestore-emulator-data",
     "report": "playwright show-report",
     "test-all-browser": "playwright test --workers=1",
     "test-gui": "playwright test --ui --workers=1",

src/components/entry/EntryForm.svelte

@@ -4,31 +4,37 @@
   import CategorySelect from "./CategorySelect.svelte";
   import { Database } from "../../lib/Database";
   import { Timestamp } from "firebase/firestore";
-  import { purchaseBeingEdited } from "../../lib/Stores";
+  import {
+    purchaseAskingToConfirmDelete,
+    purchaseBeingEdited,
+  } from "../../lib/Stores";
   import type { Purchase } from "../../lib/DatabaseTypes";
+  import {
+    datetimeToTimestamp,
+    initialDatetimeString,
+    timestampToDatetimeString,
+  } from "../../lib/utils/DateUtils";
 
   App.addListener("appStateChange", ({ isActive }) => {
     isActive && document.getElementById("amount")?.focus();
   });
 
-  const today = new Date();
-  const month = String(today.getMonth() + 1).padStart(2, "0");
-  const day = String(today.getDate()).padStart(2, "0");
-  const selectedDate = `${today.getFullYear()}-${month}-${day}`;
+  console.log("Initial Datetime String from app: ", initialDatetimeString);
 
   const { form, handleChange, handleSubmit, handleReset } = createForm({
     initialValues: {
       amount: "",
       category: "",
-      date: selectedDate,
+      purchaseDatetime: initialDatetimeString,
       description: "",
     },
     onSubmit: (formData) => {
       const entryTime = Timestamp.fromDate(new Date());
       const purchase: Purchase = {
         ...formData,
+        purchaseDatetime: datetimeToTimestamp(formData.purchaseDatetime),
         amount: parseFloat(formData.amount) || 0,
-        entryTime,
+        entryDatetime: entryTime,
       };
       if ($purchaseBeingEdited) {
         Database.get()
@@ -52,13 +58,19 @@
       form.set({
         amount: purchase.amount.toString(),
         category: purchase.category,
-        date: purchase.date,
+        purchaseDatetime: timestampToDatetimeString(purchase.purchaseDatetime),
         description: purchase.description,
       });
     } else {
       handleReset();
     }
   });
+
+  purchaseAskingToConfirmDelete.subscribe((purchaseRef) => {
+    if (purchaseRef == undefined) {
+      handleReset();
+    }
+  });
 </script>
 
 <div class="entry-form">
@@ -95,14 +107,14 @@
     </div>
 
     <div class="row-item space-between">
-      <label for="date">Date</label>
+      <label for="datetime">Date/Time</label>
       <input
-        id="date"
-        name="date"
-        type="date"
-        data-testid="date-input"
+        id="datetime"
+        name="datetime"
+        type="datetime-local"
+        data-testid="datetime-input"
         on:change={handleChange}
-        bind:value={$form.date}
+        bind:value={$form.purchaseDatetime}
       />
     </div>
 

src/components/purchases/PastPurchase.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { get } from "svelte/store";
   import { Database } from "../../lib/Database";
   import type {
     Purchase,
@@ -50,11 +49,6 @@
           Database.get().deletePurchase(purchase.ref);
         } else {
           purchaseAskingToConfirmDelete.set(purchase.ref);
-          console.log(
-            purchase.ref.id +
-              " set conf to " +
-              get(purchaseAskingToConfirmDelete)?.id
-          );
         }
       }}>{deleteConfirmationActive ? "confirm" : "delete"}</button
     ></th

src/components/purchases/PastPurchasesList.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { get } from "svelte/store";
   import { Database } from "../../lib/Database";
   import { purchaseBeingEdited } from "../../lib/Stores";
   import PastPurchase from "./PastPurchase.svelte";

src/lib/Database.ts

@@ -136,13 +136,10 @@ export class Database {
   }
 
   private initializePurchasesSubscription() {
-    // todo-postshadcn: date needs to become purchaseTime
-    // want to sort by date, not entry. Date isn't specific enough to sort.
     // todo-postshadcn: get all within timespan from UI, instead of limiting to 15
-    // todo-postshadcn -> sort in most recent first
     const q = query(
       collection(this.db, "purchases"),
-      orderBy("entryTime"),
+      orderBy("purchaseDatetime", "desc"),
       limit(15)
     );
 

src/lib/DatabaseTypes.ts

@@ -15,12 +15,9 @@ export type FirebaseDocumentRef = DocumentReference;
 export interface Purchase {
   amount: number;
   category: string;
-  // TODO:
-  // refactor: purchaseDateTime
-  date: string;
+  purchaseDatetime: Timestamp;
   description: string;
-  // refactor: entryDateTime
-  entryTime: Timestamp;
+  entryDatetime: Timestamp;
 }
 
 export type WithFirebaseDocumentRef<T> = T & { ref: FirebaseDocumentRef };

src/lib/Logging.ts

@@ -1,3 +1,7 @@
 export const logInfo = (msg: String) => {
   console.log("🧿 // " + msg);
 };
+
+export const logDebug = (msg: String) => {
+  console.log("⚙️ // " + msg);
+};

src/lib/utils/DateUtils.ts

@@ -0,0 +1,15 @@
+import { format, parse } from "date-fns";
+import { Timestamp } from "firebase/firestore";
+
+export const datetimeStringFormat = "yyyy-MM-dd'T'HH:mm";
+
+export const dateToDatetimeString = (date: Date) =>
+  format(date, datetimeStringFormat);
+
+export const initialDatetimeString = dateToDatetimeString(new Date());
+
+export const datetimeToTimestamp = (datetime: string) =>
+  Timestamp.fromDate(parse(datetime, datetimeStringFormat, new Date()));
+
+export const timestampToDatetimeString = (timestamp: Timestamp) =>
+  format(timestamp.toDate(), datetimeStringFormat);

tests/CommonTestOperations.ts

@@ -1,12 +1,21 @@
 import { expect, type Page } from "@playwright/test";
-import { format } from "date-fns";
+import { format, parse } from "date-fns";
+
+export const mockedClockDatetimeString = "2023-05-12T01:30";
+
+export const mockedClockDate = parse(
+  mockedClockDatetimeString,
+  "yyyy-MM-dd'T'HH:mm",
+  new Date()
+);
 
 export const fillPurchaseFormWithValidData = async (page: Page) => {
   await page.getByLabel("Amount").fill("10.77");
-  await page.getByLabel("Description").fill("cool thing");
+  await page.getByLabel("Description").fill("cool trip");
+  await page.locator("#category-input").press("Delete");
   await page.locator("#category-input").fill("Gas");
   await page.locator(".sv-item").first().click();
-  await page.getByLabel("Date").fill("2023-09-21");
+  await page.getByLabel("Date/Time").fill(mockedClockDatetimeString);
 };
 
 export const clickEditAtPurchaseIndex = async (page: Page, index: number) => {
@@ -26,12 +35,12 @@ export const clickDeletePurchaseAtIndex = async (page: Page, index: number) => {
 };
 
 export const expectFormToBeEmpty = async (page: Page) => {
-  const today = format(new Date(), "yyyy-MM-dd");
-
   await expect(await amountOnForm(page)).toBe("");
   await expect(await descriptionOnForm(page)).toBe("");
   await expect(await categoryOnForm(page)).toBe("");
-  await expect(await dateOnForm(page)).toBe(today);
+  await expect(page.getByTestId("datetime-input")).toHaveValue(
+    new RegExp(mockedClockDatetimeString)
+  );
 };
 
 export const purchasesOnPage = async (page: Page) => {
@@ -53,9 +62,6 @@ export const categoryOnForm = async (page: Page) => {
   }
 };
 
-export const dateOnForm = async (page: Page) =>
-  await page.getByTestId("date-input").inputValue();
-
 export const expectTheseAtPurchaseIndex = async (
   page: Page,
   values: string[],

tests/DatabaseTestUtil.ts

@@ -3,29 +3,30 @@
 import { Timestamp } from "firebase/firestore";
 import type { Purchase } from "../src/lib/DatabaseTypes";
 import { Database } from "../src/lib/Database";
-import { add } from "date-fns";
+import { add, sub } from "date-fns";
+import { mockedClockDate } from "./CommonTestOperations";
 
 const fakePurchases: Purchase[] = [
   {
     amount: 123.45,
     category: "Gas",
-    date: "2021-01-01",
-    description: "Item One",
-    entryTime: Timestamp.fromDate(new Date()),
+    purchaseDatetime: Timestamp.fromDate(sub(mockedClockDate, { minutes: 3 })),
+    description: "Morning Drive",
+    entryDatetime: Timestamp.fromDate(new Date()),
   },
   {
     amount: 456.12,
     category: "Restaurants",
-    date: "2021-01-02",
-    description: "Item Two",
-    entryTime: Timestamp.fromDate(add(new Date(), { seconds: 10 })),
+    purchaseDatetime: Timestamp.fromDate(sub(mockedClockDate, { minutes: 2 })),
+    description: "Lunch",
+    entryDatetime: Timestamp.fromDate(new Date()),
   },
   {
     amount: 100,
     category: "Date Night",
-    date: "2021-01-03",
-    description: "Item Three",
-    entryTime: Timestamp.fromDate(add(new Date(), { seconds: 20 })),
+    purchaseDatetime: Timestamp.fromDate(sub(mockedClockDate, { minutes: 1 })),
+    description: "Centro",
+    entryDatetime: Timestamp.fromDate(new Date()),
   },
 ];