feat(device): modify temporary expiration date handling in device cre…

…ation
openSenseMap · Dec 18, 2024 · e2cf91c · e2cf91c
1 parent 7196e40
commit e2cf91c
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 22 deletions.
diff --git a/app/components/device/new/general-info.tsx b/app/components/device/new/general-info.tsx
@@ -1,3 +1,4 @@
+import React, { useState } from "react";
 import { useFormContext, useFieldArray } from "react-hook-form";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
@@ -22,7 +23,30 @@ export function GeneralInfoStep() {
   });
 
   const currentExposure = watch("exposure"); // Watch exposure value
-  const temporaryExpirationDate = watch("temporaryExpirationDate"); // Watch expiration date
+
+  // State for temporary expiration date
+  const [temporaryExpirationDate, setTemporaryExpirationDate] = useState<
+    string | null
+  >(watch("temporaryExpirationDate") || null);
+
+  const maxExpirationDate = new Date();
+  maxExpirationDate.setMonth(maxExpirationDate.getMonth() + 1);
+
+  const handleTemporaryChange = (checked: boolean) => {
+    if (checked) {
+      const newDate = maxExpirationDate.toISOString().split("T")[0];
+      setTemporaryExpirationDate(newDate); // Update local state
+      setValue("temporaryExpirationDate", newDate); // Update form value
+    } else {
+      setTemporaryExpirationDate(null); // Clear local state
+      setValue("temporaryExpirationDate", ""); // Clear form value
+    }
+  };
+
+  const handleExpirationDateChange = (date: string) => {
+    setTemporaryExpirationDate(date); // Update local state
+    setValue("temporaryExpirationDate", date); // Update form value
+  };
 
   const addTag = (event: React.FormEvent) => {
     event.preventDefault();
@@ -52,17 +76,6 @@ export function GeneralInfoStep() {
     },
   ];
 
-  const maxExpirationDate = new Date();
-  maxExpirationDate.setMonth(maxExpirationDate.getMonth() + 1);
-
-  const handleTemporaryChange = (checked: boolean) => {
-    if (checked) {
-      setValue("temporaryExpirationDate", maxExpirationDate);
-    } else {
-      setValue("temporaryExpirationDate", "");
-    }
-  };
-
   return (
     <div className="space-y-4 h-full flex flex-col justify-evenly p-2">
       <div>
@@ -100,7 +113,7 @@ export function GeneralInfoStep() {
           <div className="flex items-center space-x-2">
             <Checkbox
               id="isTemporary"
-              checked={temporaryExpirationDate}
+              checked={!!temporaryExpirationDate}
               onCheckedChange={handleTemporaryChange}
             />
             <Label htmlFor="isTemporary" className="text-base font-medium">
@@ -133,14 +146,8 @@ export function GeneralInfoStep() {
               <Input
                 type="date"
                 id="temporaryExpirationDate"
-                {...register("temporaryExpirationDate")}
-                value={
-                  temporaryExpirationDate
-                    ? new Date(temporaryExpirationDate)
-                        .toISOString()
-                        .split("T")[0]
-                    : ""
-                }
+                value={temporaryExpirationDate}
+                onChange={(e) => handleExpirationDateChange(e.target.value)}
                 min={new Date().toISOString().split("T")[0]}
                 max={maxExpirationDate.toISOString().split("T")[0]}
                 className="flex-grow p-2 border rounded-md"

diff --git a/app/components/device/new/new-device-stepper.tsx b/app/components/device/new/new-device-stepper.tsx
@@ -43,7 +43,7 @@ const generalInfoSchema = z.object({
     .transform((date) => (date ? new Date(date) : undefined)) // Transform string to Date
     .refine(
       (date) =>
-        !date || date <= new Date(Date.now() + 30 * 24 * 60 * 60 * 1000),
+        !date || date <= new Date(Date.now() + 31 * 24 * 60 * 60 * 1000),
       {
         message: "Temporary expiration date must be within 1 month from now",
       },