refactor(web): extract DatePickerWithRange component from assignment form

fvcci · fvcci · commit 2bb4ec4b61d7 · 2026-03-24T21:39:17.000-04:00
diff --git a/apps/nextjs/src/app/teacher/classroom/[id]/assignment/new/page.tsx b/apps/nextjs/src/app/teacher/classroom/[id]/assignment/new/page.tsx
@@ -12,7 +12,6 @@ import { toast } from "sonner";
 import type { Id } from "@package/backend/convex/_generated/dataModel";
 import { api } from "@package/backend/convex/_generated/api";
 import { Button } from "@package/ui/button";
-import { Calendar } from "@package/ui/calendar";
 import {
   Card,
   CardContent,
@@ -25,6 +24,10 @@ import { Label } from "@package/ui/label";
 import { Spinner } from "@package/ui/spinner";
 
 import type { StarterCodeUploaderHandle } from "~/components/starter-code-uploader";
+import {
+  DatePickerWithRange,
+  defaultDateRange,
+} from "~/components/date-picker-with-range";
 import { Editor } from "~/components/editor";
 import { StarterCodeUploader } from "~/components/starter-code-uploader";
 import { Authenticated, AuthLoading, Unauthenticated } from "~/lib/auth";
@@ -127,63 +130,12 @@ function NewAssignmentForm({ classroomId }: { classroomId: Id<"classrooms"> }) {
                 placeholder="Week 3 - Sorting Algorithms"
               />
             </div>
-            <Label htmlFor="availability-period">Availability Period</Label>
-            <Calendar
-              className="w-full"
-              mode="range"
-              defaultMonth={dateRange.from}
-              selected={dateRange}
-              onSelect={(newDateRange) =>
-                setDateRange(updateDateRange(dateRange, newDateRange))
-              }
-              numberOfMonths={2}
-              showOutsideDays={false}
+            <DatePickerWithRange
+              className="space-y-4"
+              date={dateRange}
+              onDateChange={setDateRange}
               required
             />
-            <div className="grid gap-4 md:grid-cols-2">
-              <div className="space-y-2">
-                <Label htmlFor="release-time">
-                  Availability Start Time / Release Time
-                </Label>
-                <Input
-                  id="release-time"
-                  type="time"
-                  required
-                  // can't figure out a proper way to colour this. Colouring the text
-                  // and background don't work, so we'll settle with inverting the colour
-                  className="[&::-webkit-calendar-picker-indicator]:invert"
-                  value={formatTime(dateRange.from)}
-                  onChange={(event) =>
-                    setDateRange(
-                      updateDateRangeTime(
-                        dateRange,
-                        "from",
-                        event.target.value,
-                      ),
-                    )
-                  }
-                />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="due-time">
-                  Availability End Time / Due Time
-                </Label>
-                <Input
-                  id="due-time"
-                  type="time"
-                  required
-                  // can't figure out a proper way to colour this. Colouring the text
-                  // and background don't work, so we'll settle with inverting the colour
-                  className="[&::-webkit-calendar-picker-indicator]:invert"
-                  value={formatTime(dateRange.to)}
-                  onChange={(event) =>
-                    setDateRange(
-                      updateDateRangeTime(dateRange, "to", event.target.value),
-                    )
-                  }
-                />
-              </div>
-            </div>
             <div className="space-y-2">
               <Label htmlFor="assignment-description">Description</Label>
               <Editor
@@ -254,53 +206,3 @@ export default function NewAssignmentPage({
     </main>
   );
 }
-
-function formatTime(date: Date | undefined) {
-  if (!date) return "";
-  return `${date.getHours().toString().padStart(2, "0")}:${date.getMinutes().toString().padStart(2, "0")}`;
-}
-
-function defaultDateRange() {
-  const from = new Date();
-  const to = new Date(from);
-  to.setHours(23, 59, 59, 999);
-  return { from, to };
-}
-
-function updateDateRange(
-  dateRange: DateRange,
-  newDateRange?: DateRange,
-): DateRange {
-  const newFrom = newDateRange?.from;
-  newFrom?.setHours(
-    dateRange.from?.getHours() ?? 0,
-    dateRange.from?.getMinutes(),
-  );
-  const newTo = newDateRange?.to;
-  if (dateRange.to) {
-    const hours = dateRange.to.getHours();
-    const minutes = dateRange.to.getMinutes();
-    newTo?.setHours(hours, minutes, 59, 999);
-  }
-  return { from: newFrom, to: newTo };
-}
-
-function updateDateRangeTime(
-  dateRange: DateRange | undefined,
-  field: "from" | "to",
-  time: string,
-) {
-  if (!dateRange) return defaultDateRange();
-  const currentDate = dateRange[field];
-  if (!currentDate) return dateRange;
-  const [hours, minutes] = time.split(":").map(Number) as [number, number];
-  const newDate = new Date(currentDate);
-  newDate.setHours(
-    hours,
-    minutes,
-    field === "to" ? 59 : 0,
-    field === "to" ? 999 : 0,
-  );
-  console.log(newDate);
-  return { ...dateRange, [field]: newDate };
-}
diff --git a/apps/nextjs/src/components/date-picker-with-range.test.tsx b/apps/nextjs/src/components/date-picker-with-range.test.tsx
@@ -0,0 +1,258 @@
+import type { DateRange } from "react-day-picker";
+import { describe, expect, it } from "vitest";
+
+import {
+  defaultDateRange,
+  formatTime,
+  updateDateRange,
+  updateDateRangeTime,
+} from "./date-picker-with-range";
+
+describe("DatePickerWithRange", () => {
+  describe("defaultDateRange", () => {
+    it("should return a DateRange with from and to dates", () => {
+      const result = defaultDateRange();
+
+      expect(result.from).toBeInstanceOf(Date);
+      expect(result.to).toBeInstanceOf(Date);
+    });
+
+    it("should set 'to' date to 7 days after 'from' date", () => {
+      const result = defaultDateRange();
+
+      const fromDateOnly = new Date(result.from);
+      fromDateOnly.setHours(0, 0, 0, 0);
+      const toDateOnly = new Date(result.to);
+      toDateOnly.setHours(0, 0, 0, 0);
+
+      const fromMs = fromDateOnly.getTime();
+      const toMs = toDateOnly.getTime();
+      const sevenDaysMs = 7 * 24 * 60 * 60 * 1000;
+
+      expect(toMs - fromMs).toBe(sevenDaysMs);
+    });
+
+    it("should set 'to' time to 23:59:59.999", () => {
+      const result = defaultDateRange();
+
+      expect(result.to.getHours()).toBe(23);
+      expect(result.to.getMinutes()).toBe(59);
+      expect(result.to.getSeconds()).toBe(59);
+      expect(result.to.getMilliseconds()).toBe(999);
+    });
+  });
+
+  describe("formatTime", () => {
+    it("should return empty string for undefined", () => {
+      expect(formatTime(undefined)).toBe("");
+    });
+
+    it("should return formatted time with leading zeros", () => {
+      const date = new Date();
+      date.setHours(9, 5, 0, 0);
+
+      expect(formatTime(date)).toBe("09:05");
+    });
+
+    it("should handle double-digit hours and minutes", () => {
+      const date = new Date();
+      date.setHours(14, 30, 0, 0);
+
+      expect(formatTime(date)).toBe("14:30");
+    });
+
+    it("should handle zero values", () => {
+      const date = new Date();
+      date.setHours(0, 0, 0, 0);
+
+      expect(formatTime(date)).toBe("00:00");
+    });
+  });
+
+  describe("updateDateRangeTime", () => {
+    it("should return defaultDateRange when dateRange is undefined", () => {
+      const result = updateDateRangeTime(undefined, "from", "10:30");
+
+      expect(result.from).toBeInstanceOf(Date);
+      expect(result.to).toBeInstanceOf(Date);
+    });
+
+    it("should update the 'from' time", () => {
+      const dateRange: DateRange = {
+        from: new Date(2024, 0, 1, 8, 0),
+        to: new Date(2024, 0, 8, 23, 59),
+      };
+
+      const result = updateDateRangeTime(dateRange, "from", "14:30");
+
+      expect(result.from?.getHours()).toBe(14);
+      expect(result.from?.getMinutes()).toBe(30);
+    });
+
+    it("should update the 'to' time and set seconds/milliseconds for end of day", () => {
+      const dateRange: DateRange = {
+        from: new Date(2024, 0, 1, 8, 0),
+        to: new Date(2024, 0, 8, 23, 59),
+      };
+
+      const result = updateDateRangeTime(dateRange, "to", "23:45");
+
+      expect(result.to?.getHours()).toBe(23);
+      expect(result.to?.getMinutes()).toBe(45);
+      expect(result.to?.getSeconds()).toBe(59);
+      expect(result.to?.getMilliseconds()).toBe(999);
+    });
+
+    it("should preserve the date portion", () => {
+      const dateRange: DateRange = {
+        from: new Date(2024, 5, 15, 8, 0),
+        to: new Date(2024, 5, 22, 23, 59),
+      };
+
+      const result = updateDateRangeTime(dateRange, "from", "12:00");
+
+      expect(result.from?.getFullYear()).toBe(2024);
+      expect(result.from?.getMonth()).toBe(5);
+      expect(result.from?.getDate()).toBe(15);
+    });
+
+    it("should return original dateRange when field date is undefined", () => {
+      const dateRange: DateRange = {
+        from: undefined,
+        to: new Date(2024, 0, 8, 23, 59),
+      };
+
+      const result = updateDateRangeTime(dateRange, "from", "10:00");
+
+      expect(result.from).toBeUndefined();
+      expect(result.to).toBe(dateRange.to);
+    });
+  });
+
+  describe("updateDateRange", () => {
+    it("should return empty DateRange when newDateRange is undefined", () => {
+      const dateRange: DateRange = {
+        from: new Date(2024, 0, 1, 8, 0),
+        to: new Date(2024, 0, 8, 23, 59),
+      };
+
+      const result = updateDateRange(dateRange, undefined);
+
+      expect(result.from).toBe(dateRange.from);
+      expect(result.to).toBe(dateRange.to);
+    });
+
+    it("should preserve time from original dateRange 'from'", () => {
+      const dateRange: DateRange = {
+        from: new Date(2024, 0, 1, 10, 30),
+        to: new Date(2024, 0, 8, 23, 59),
+      };
+
+      const newDateRange: DateRange = {
+        from: new Date(2024, 1, 15),
+        to: new Date(2024, 1, 20),
+      };
+
+      const result = updateDateRange(dateRange, newDateRange);
+
+      expect(result.from?.getHours()).toBe(10);
+      expect(result.from?.getMinutes()).toBe(30);
+      expect(result.from?.getDate()).toBe(15);
+      expect(result.from?.getMonth()).toBe(1);
+    });
+
+    it("should preserve time from original dateRange 'to'", () => {
+      const dateRange: DateRange = {
+        from: new Date(2024, 0, 1, 8, 0),
+        to: new Date(2024, 0, 8, 14, 45),
+      };
+
+      const newDateRange: DateRange = {
+        from: new Date(2024, 1, 15),
+        to: new Date(2024, 1, 20),
+      };
+
+      const result = updateDateRange(dateRange, newDateRange);
+
+      expect(result.to?.getHours()).toBe(14);
+      expect(result.to?.getMinutes()).toBe(45);
+      expect(result.to?.getSeconds()).toBe(59);
+      expect(result.to?.getMilliseconds()).toBe(999);
+      expect(result.to?.getDate()).toBe(20);
+      expect(result.to?.getMonth()).toBe(1);
+    });
+
+    it("should use default hours when original dateRange has no time", () => {
+      const dateRange: DateRange = {
+        from: new Date(2024, 0, 1),
+        to: new Date(2024, 0, 8),
+      };
+
+      const newDateRange: DateRange = {
+        from: new Date(2024, 1, 15),
+        to: new Date(2024, 1, 20),
+      };
+
+      const result = updateDateRange(dateRange, newDateRange);
+
+      expect(result.from?.getHours()).toBe(0);
+      expect(result.from?.getMinutes()).toBe(0);
+    });
+
+    it("should preserve year from new dateRange", () => {
+      const dateRange: DateRange = {
+        from: new Date(2024, 0, 1, 8, 0),
+        to: new Date(2024, 0, 8, 23, 59),
+      };
+
+      const newDateRange: DateRange = {
+        from: new Date(2025, 5, 15),
+        to: new Date(2025, 5, 20),
+      };
+
+      const result = updateDateRange(dateRange, newDateRange);
+
+      expect(result.from?.getFullYear()).toBe(2025);
+      expect(result.to?.getFullYear()).toBe(2025);
+    });
+
+    it("should handle newDateRange with only 'from' set", () => {
+      const dateRange: DateRange = {
+        from: new Date(2024, 0, 1, 8, 0),
+        to: new Date(2024, 0, 8, 23, 59),
+      };
+
+      const newDateRange: DateRange = {
+        from: new Date(2024, 1, 15),
+        to: undefined,
+      };
+
+      const result = updateDateRange(dateRange, newDateRange);
+
+      expect(result.from?.getDate()).toBe(15);
+      expect(result.from?.getMonth()).toBe(1);
+      expect(result.to).toBeUndefined();
+    });
+
+    it("should return original dateRange when both have same dates but preserve time", () => {
+      const dateRange: DateRange = {
+        from: new Date(2024, 0, 1, 10, 30),
+        to: new Date(2024, 0, 8, 14, 45),
+      };
+
+      const newDateRange: DateRange = {
+        from: new Date(2024, 0, 1),
+        to: new Date(2024, 0, 8),
+      };
+
+      const result = updateDateRange(dateRange, newDateRange);
+
+      expect(result.from?.getHours()).toBe(10);
+      expect(result.from?.getMinutes()).toBe(30);
+      expect(result.to?.getHours()).toBe(14);
+      expect(result.to?.getMinutes()).toBe(45);
+      expect(result.to?.getSeconds()).toBe(59);
+      expect(result.to?.getMilliseconds()).toBe(999);
+    });
+  });
+});
diff --git a/apps/nextjs/src/components/date-picker-with-range.tsx b/apps/nextjs/src/components/date-picker-with-range.tsx
