🐻 Store date in utc in database

src/app/waves/create/createWaveAction.ts

@@ -7,6 +7,7 @@ import { urls } from "@/constants/urls";
 import { insertWave } from "@/drizzle/queries/waves";
 
 import { userHasRole, UserPermission } from "@/config/userPermissions";
+import { getUTCStartOfDate } from "@/lib/dates";
 
 import { WaveData } from "./stepsProvider";
 
@@ -20,10 +21,10 @@ export async function createWaveAction(data: WaveData) {
     {
       name: data.name,
       summary: data.summary,
-      openStartDate: data.openStartDate,
-      denoisingStartDate: data.denoisingStartDate,
-      assesmentStartDate: data.assesmentStartDate,
-      closeDate: data.closeDate,
+      openStartDate: getUTCStartOfDate(data.openStartDate),
+      denoisingStartDate: getUTCStartOfDate(data.denoisingStartDate),
+      assesmentStartDate: getUTCStartOfDate(data.assesmentStartDate),
+      closeDate: getUTCStartOfDate(data.closeDate),
     },
     data.categories,
   );

src/app/waves/create/steps/timeline.tsx

@@ -8,6 +8,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 
 import { cn } from "@/lib/cn";
+import { formatDate, formatTime, getUTCStartOfDate } from "@/lib/dates";
 import { Button } from "@/components/ui/button";
 import { Form, FormFooter } from "@/components/ui/form";
 import { ArrowIcon } from "@/components/icons/arrowIcon";
@@ -76,6 +77,12 @@ export function Timeline({ className }: TimelineProps) {
               stage="close"
             />
           </div>
+          <div className="-mt-4 text-center text-xs opacity-60">
+            {`Date set here will be stored in UTC timezone:
+            ${formatDate(new Date())} is 
+            ${formatTime(getUTCStartOfDate(new Date()))} 
+            (${getUTCStartOfDate(new Date()).toISOString()})`}
+          </div>
 
           <FormFooter>
             <Button

src/components/ui/wavesTimelinePreview/timelinePreview.tsx

@@ -28,7 +28,7 @@ export const TimelinePreview = ({ wave, className }: TimelinePreviewProps) => {
           } ${formatTime(nextStageDate)}`}
         </Badge>
       )}
-      <ul className="flex w-full rounded-3xl  ">
+      <ul className="flex w-full rounded-3xl">
         <TimelineStage
           name="open"
           currentStage={waveStage}

src/lib/dates.ts

@@ -25,6 +25,12 @@ export function getStartOfDate(date: Date) {
   return new Date(date.getFullYear(), date.getMonth(), date.getDate());
 }
 
+export function getUTCStartOfDate(date: Date) {
+  const utcDate = new Date(date);
+  utcDate.setUTCHours(0, 0, 0, 0);
+  return utcDate;
+}
+
 export function addDays(date: Date, days: number) {
   const newDate = new Date(date);
   newDate.setDate(newDate.getDate() + days);

tests/unit/app/waves/create/createWaveAction.test.ts

@@ -11,13 +11,16 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 import { createWaveAction } from "@/app/waves/create/createWaveAction";
 import { type WaveData } from "@/app/waves/create/stepsProvider";
 
+const inputDate = new Date("2024-05-15 15:30:00");
+const expectedDate = new Date("2024-05-15T00:00:00.000Z");
+
 const WAVE_DATA: WaveData = {
   name: "Wave",
   summary: "Summary",
-  openStartDate: new Date(),
-  denoisingStartDate: new Date(),
-  assesmentStartDate: new Date(),
-  closeDate: new Date(),
+  openStartDate: inputDate,
+  denoisingStartDate: inputDate,
+  assesmentStartDate: inputDate,
+  closeDate: inputDate,
   categories: [
     {
       color: "blue",
@@ -91,10 +94,10 @@ describe("app/waves/create/createWaveAction", () => {
       expect(waves[0]).toMatchObject({
         name: WAVE_DATA.name,
         summary: WAVE_DATA.summary,
-        openStartDate: WAVE_DATA.openStartDate,
-        denoisingStartDate: WAVE_DATA.denoisingStartDate,
-        assesmentStartDate: WAVE_DATA.assesmentStartDate,
-        closeDate: WAVE_DATA.closeDate,
+        openStartDate: expectedDate,
+        denoisingStartDate: expectedDate,
+        assesmentStartDate: expectedDate,
+        closeDate: expectedDate,
       });
 
       const categories = await db.query.Category.findMany();

tests/unit/lib/dates/getUTCStartOfDate.test.ts

@@ -0,0 +1,21 @@
+import { describe, expect, it } from "vitest";
+
+import { getUTCStartOfDate } from "@/lib/dates";
+
+const testCases = [
+  "2023-05-15T12:00:00-07:00",
+  "2023-05-15T12:00:00+05:30",
+  "2023-05-15T12:00:00Z",
+  "2023-05-15T23:59:59+05:30",
+  "2023-05-15T00:00:01-07:00",
+];
+const expected = "2023-05-15T00:00:00.000Z";
+
+describe("lib/dates/getUTCStarOfDate", () => {
+  for (const testCase of testCases) {
+    it(testCase, () => {
+      const utcDate = getUTCStartOfDate(new Date(testCase));
+      expect(utcDate).toStrictEqual(new Date(expected));
+    });
+  }
+});