refactor(web): replace datetime inputs with date range picker for assignment dates

Author: fvcci

apps/nextjs/src/app/teacher/classroom/[id]/assignment/[assignmentId]/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import type { ColDef } from "ag-grid-community";
+import type { DateRange } from "react-day-picker";
 import { use, useState } from "react";
 import Link from "next/link";
 import { useMutation, useQuery } from "convex/react";
@@ -34,17 +35,15 @@ import { Spinner } from "@package/ui/spinner";
 
 import { getSubmissionDownload } from "~/app/app/actions";
 import { AppDataGrid } from "~/components/app-data-grid";
+import {
+  DatePickerWithRange,
+  defaultDateRange,
+} from "~/components/date-picker-with-range";
 import { Editor } from "~/components/editor";
 import { Authenticated, AuthLoading, Unauthenticated } from "~/lib/auth";
 import { triggerDownload } from "~/lib/download";
 import { StarterCodeCard } from "./starter-code-card";
 
-function formatDateForInput(timestamp: number) {
-  const date = new Date(timestamp);
-  const offset = date.getTimezoneOffset() * 60_000;
-  return new Date(date.getTime() - offset).toISOString().slice(0, 16);
-}
-
 function AssignmentContent({
   classroomId,
   assignmentId,
@@ -71,8 +70,7 @@ function AssignmentContent({
   interface AssignmentDraft {
     name: NonNullable<UpdateAssignmentArgs["name"]>;
     description: NonNullable<UpdateAssignmentArgs["description"]>;
-    releaseDate: string;
-    dueDate: string;
+    dateRange: DateRange;
   }
 
   const [isEditing, setIsEditing] = useState(false);
@@ -95,8 +93,10 @@ function AssignmentContent({
     setDraft({
       name: assignment.name,
       description: assignment.description ?? "",
-      releaseDate: formatDateForInput(assignment.releaseDate),
-      dueDate: formatDateForInput(assignment.dueDate),
+      dateRange: {
+        from: new Date(assignment.releaseDate),
+        to: new Date(assignment.dueDate),
+      },
     });
     setIsEditing(true);
   };
@@ -120,8 +120,11 @@ function AssignmentContent({
     setIsSavingAssignment(true);
 
     try {
-      const parsedReleaseDate = Date.parse(draft.releaseDate);
-      const parsedDueDate = Date.parse(draft.dueDate);
+      if (!draft.dateRange.from || !draft.dateRange.to) {
+        throw new Error("Please select a date range");
+      }
+      const parsedReleaseDate = draft.dateRange.from.getTime();
+      const parsedDueDate = draft.dateRange.to.getTime();
 
       if (Number.isNaN(parsedReleaseDate) || Number.isNaN(parsedDueDate)) {
         throw new Error("Invalid date values");
@@ -391,30 +394,11 @@ function AssignmentContent({
                       }
                     />
                   </div>
-                  <div className="space-y-2">
-                    <Label htmlFor="assignment-release-date">
-                      Release Date
-                    </Label>
-                    <Input
-                      id="assignment-release-date"
-                      type="datetime-local"
-                      value={draft?.releaseDate ?? ""}
-                      onChange={(event) =>
-                        updateDraft({ releaseDate: event.target.value })
-                      }
-                    />
-                  </div>
-                  <div className="space-y-2">
-                    <Label htmlFor="assignment-due-date">Due Date</Label>
-                    <Input
-                      id="assignment-due-date"
-                      type="datetime-local"
-                      value={draft?.dueDate ?? ""}
-                      onChange={(event) =>
-                        updateDraft({ dueDate: event.target.value })
-                      }
-                    />
-                  </div>
+                  <DatePickerWithRange
+                    date={draft?.dateRange ?? defaultDateRange()}
+                    onDateChange={(dateRange) => updateDraft({ dateRange })}
+                    size="narrow"
+                  />
                   <div className="flex gap-2">
                     <Button
                       className="flex-1"
@@ -450,25 +434,25 @@ function AssignmentContent({
                     </div>
                     <div>
                       <p className="text-muted-foreground text-xs uppercase">
-                        Due Date
+                        Release Date
                       </p>
                       <p className="font-medium">
-                        {new Date(assignment.dueDate).toLocaleString()}
+                        {new Date(assignment.releaseDate).toLocaleString()}
                       </p>
                     </div>
                     <div>
                       <p className="text-muted-foreground text-xs uppercase">
-                        Release Date
+                        Due Date
                       </p>
                       <p className="font-medium">
-                        {new Date(assignment.releaseDate).toLocaleString()}
+                        {new Date(assignment.dueDate).toLocaleString()}
                       </p>
                     </div>
                     <div>
                       <p className="text-muted-foreground text-xs uppercase">
                         Created
                       </p>
-                      <p className="text-sm">
+                      <p className="font-medium">
                         {new Date(assignment._creationTime).toLocaleString()}
                       </p>
                     </div>

apps/nextjs/src/components/date-picker-with-range.tsx

@@ -2,39 +2,47 @@
 
 import type { DateRange } from "react-day-picker";
 
+import { cn } from "@package/ui";
 import { Calendar } from "@package/ui/calendar";
 import { Input } from "@package/ui/input";
 import { Label } from "@package/ui/label";
 
+type DatePickerSize = "wide" | "narrow";
+
 export function DatePickerWithRange({
   className,
   date,
   onDateChange,
   required,
+  size = "wide",
 }: {
   className?: string;
   date: DateRange;
   onDateChange: (dateRange: DateRange) => void;
   required?: boolean;
+  size?: DatePickerSize;
 }) {
+  const numberOfMonths = size === "narrow" ? 1 : 2;
+  const gridCols = size === "narrow" ? "grid-cols-1" : "md:grid-cols-2";
+
   return (
-    <div className={className}>
+    <div className={cn("space-y-4", className)}>
       <Label aria-label="availability-period">Availability Period</Label>
       <Calendar
-        className="w-full"
+        className="w-full p-0"
         mode="range"
         defaultMonth={date.from}
         selected={date}
         onSelect={(newDateRange: DateRange | undefined) =>
           onDateChange(updateDateRange(date, newDateRange))
         }
-        numberOfMonths={2}
+        numberOfMonths={numberOfMonths}
         showOutsideDays={false}
         required={required}
       />
-      <div className="grid gap-4 md:grid-cols-2">
+      <div className={cn("grid gap-4", gridCols)}>
         <div className="space-y-2">
-          <Label htmlFor="release-time">Start Time</Label>
+          <Label htmlFor="release-time">Release Time</Label>
           <Input
             id="release-time"
             type="time"
@@ -51,7 +59,7 @@ export function DatePickerWithRange({
           />
         </div>
         <div className="space-y-2">
-          <Label htmlFor="due-time">End Time</Label>
+          <Label htmlFor="due-time">Due Time</Label>
           <Input
             id="due-time"
             type="time"