fix: create key toggle issue (#2711)

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/new/client.tsx

@@ -32,128 +32,16 @@ import { Textarea } from "@/components/ui/textarea";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { addMinutes, format } from "date-fns";
 import { AlertCircle } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
-import { z } from "zod";
+import type { z } from "zod";
+import { formSchema } from "./validation";
+
 export const dynamic = "force-dynamic";
-const getDatePlusTwoMinutes = () => {
-  const now = new Date();
-  const futureDate = new Date(now.getTime() + 2 * 60000);
-  return futureDate.toISOString().slice(0, -8);
-};
-const formSchema = z.object({
-  bytes: z.coerce
-    .number({
-      errorMap: (issue, { defaultError }) => ({
-        message:
-          issue.code === "invalid_type"
-            ? "Amount must be a number and greater than 0"
-            : defaultError,
-      }),
-    })
-    .default(16),
-  prefix: z
-    .string()
-    .trim()
-    .max(8, { message: "Please limit the prefix to under 8 characters." })
-    .optional(),
-  ownerId: z.string().trim().optional(),
-  name: z.string().trim().optional(),
-  metaEnabled: z.boolean().default(false),
-  meta: z
-    .string()
-    .refine(
-      (s) => {
-        try {
-          JSON.parse(s);
-          return true;
-        } catch {
-          return false;
-        }
-      },
-      {
-        message: "Must be valid json",
-      },
-    )
-    .optional(),
-  limitEnabled: z.boolean().default(false),
-  limit: z
-    .object({
-      remaining: z.coerce
-        .number({
-          errorMap: (issue, { defaultError }) => ({
-            message:
-              issue.code === "invalid_type"
-                ? "Remaining amount must be greater than 0"
-                : defaultError,
-          }),
-        })
-        .int()
-        .positive({ message: "Please enter a positive number" }),
-      refill: z
-        .object({
-          interval: z.enum(["daily", "monthly"]).default("monthly"),
-          amount: z.coerce
-            .number({
-              errorMap: (issue, { defaultError }) => ({
-                message:
-                  issue.code === "invalid_type"
-                    ? "Refill amount must be greater than 0 and a integer"
-                    : defaultError,
-              }),
-            })
-            .int()
-            .min(1)
-            .positive(),
-          refillDay: z.coerce
-            .number({
-              errorMap: (issue, { defaultError }) => ({
-                message:
-                  issue.code === "invalid_type"
-                    ? "Refill day must be an integer between 1 and 31"
-                    : defaultError,
-              }),
-            })
-            .int()
-            .min(1)
-            .max(31)
-            .optional(),
-        })
-        .optional(),
-    })
-    .optional(),
-  expireEnabled: z.boolean().default(false),
-  expires: z.coerce
-    .date()
-    .min(new Date(new Date().getTime() + 2 * 60000))
-    .optional(),
-  ratelimitEnabled: z.boolean().default(false),
-  ratelimit: z
-    .object({
-      async: z.boolean().default(false),
-      duration: z.coerce
-        .number({
-          errorMap: (issue, { defaultError }) => ({
-            message:
-              issue.code === "invalid_type" ? "Duration must be greater than 0" : defaultError,
-          }),
-        })
-        .positive({ message: "Refill interval must be greater than 0" }),
-      limit: z.coerce
-        .number({
-          errorMap: (issue, { defaultError }) => ({
-            message:
-              issue.code === "invalid_type" ? "Refill limit must be greater than 0" : defaultError,
-          }),
-        })
-        .positive({ message: "Limit must be greater than 0" }),
-    })
-    .optional(),
-  environment: z.string().optional(),
-});
 
 type Props = {
   apiId: string;
@@ -162,7 +50,7 @@ type Props = {
   defaultPrefix: string | null;
 };
 
-export const CreateKey: React.FC<Props> = ({ apiId, keyAuthId, defaultBytes, defaultPrefix }) => {
+export const CreateKey = ({ apiId, keyAuthId, defaultBytes, defaultPrefix }: Props) => {
   const router = useRouter();
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: async (data, context, options) => {
@@ -171,6 +59,8 @@ export const CreateKey: React.FC<Props> = ({ apiId, keyAuthId, defaultBytes, def
     mode: "all",
     shouldFocusError: true,
     delayError: 100,
+    // Should required to unregister form elements when they are not rendered.
+    shouldUnregister: true,
     defaultValues: {
       prefix: defaultPrefix || undefined,
       bytes: defaultBytes || 16,
@@ -881,3 +771,5 @@ export const CreateKey: React.FC<Props> = ({ apiId, keyAuthId, defaultBytes, def
     </>
   );
 };
+
+const getDatePlusTwoMinutes = () => format(addMinutes(new Date(), 2), "yyyy-MM-dd'T'HH:mm");

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/new/validation.ts

@@ -0,0 +1,112 @@
+import { z } from "zod";
+
+export const formSchema = z.object({
+  bytes: z.coerce
+    .number({
+      errorMap: (issue, { defaultError }) => ({
+        message:
+          issue.code === "invalid_type"
+            ? "Amount must be a number and greater than 0"
+            : defaultError,
+      }),
+    })
+    .default(16),
+  prefix: z
+    .string()
+    .trim()
+    .max(8, { message: "Please limit the prefix to under 8 characters." })
+    .optional(),
+  ownerId: z.string().trim().optional(),
+  name: z.string().trim().optional(),
+  metaEnabled: z.boolean().default(false),
+  meta: z
+    .string()
+    .refine(
+      (s) => {
+        try {
+          JSON.parse(s);
+          return true;
+        } catch {
+          return false;
+        }
+      },
+      {
+        message: "Must be valid json",
+      },
+    )
+    .optional(),
+  limitEnabled: z.boolean().default(false),
+  limit: z
+    .object({
+      remaining: z.coerce
+        .number({
+          errorMap: (issue, { defaultError }) => ({
+            message:
+              issue.code === "invalid_type"
+                ? "Remaining amount must be greater than 0"
+                : defaultError,
+          }),
+        })
+        .int()
+        .positive({ message: "Please enter a positive number" }),
+      refill: z
+        .object({
+          interval: z.enum(["daily", "monthly"]).default("monthly"),
+          amount: z.coerce
+            .number({
+              errorMap: (issue, { defaultError }) => ({
+                message:
+                  issue.code === "invalid_type"
+                    ? "Refill amount must be greater than 0 and a integer"
+                    : defaultError,
+              }),
+            })
+            .int()
+            .min(1)
+            .positive(),
+          refillDay: z.coerce
+            .number({
+              errorMap: (issue, { defaultError }) => ({
+                message:
+                  issue.code === "invalid_type"
+                    ? "Refill day must be an integer between 1 and 31"
+                    : defaultError,
+              }),
+            })
+            .int()
+            .min(1)
+            .max(31)
+            .optional(),
+        })
+        .optional(),
+    })
+    .optional(),
+  expireEnabled: z.boolean().default(false),
+  expires: z.coerce
+    .date()
+    .min(new Date(new Date().getTime() + 2 * 60000))
+    .optional(),
+  ratelimitEnabled: z.boolean().default(false),
+  ratelimit: z
+    .object({
+      async: z.boolean().default(false),
+      duration: z.coerce
+        .number({
+          errorMap: (issue, { defaultError }) => ({
+            message:
+              issue.code === "invalid_type" ? "Duration must be greater than 0" : defaultError,
+          }),
+        })
+        .positive({ message: "Refill interval must be greater than 0" }),
+      limit: z.coerce
+        .number({
+          errorMap: (issue, { defaultError }) => ({
+            message:
+              issue.code === "invalid_type" ? "Refill limit must be greater than 0" : defaultError,
+          }),
+        })
+        .positive({ message: "Limit must be greater than 0" }),
+    })
+    .optional(),
+  environment: z.string().optional(),
+});