Requested changes

frontend/package-lock.json

@@ -47,7 +47,6 @@
         "axios": "^0.27.2",
         "axios-auth-refresh": "^3.3.6",
         "base64-loader": "^1.0.0",
-        "chrono": "^1.0.5",
         "classnames": "^2.3.1",
         "cookies": "^0.8.0",
         "cva": "npm:class-variance-authority@^0.4.0",
@@ -18257,11 +18256,6 @@
         "node": ">=6.0"
       }
     },
-    "node_modules/chrono": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/chrono/-/chrono-1.0.5.tgz",
-      "integrity": "sha512-gjmpLxZa8iRaQXpV/sEV3ZkDuvwg0FqM1YrhaxdybN/DQJyfs1fG6UkJXkkOKLk/Hb712hsVV5EGR8f8A5sBdA=="
-    },
     "node_modules/ci-info": {
       "version": "3.8.0",
       "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.8.0.tgz",
@@ -44325,11 +44319,6 @@
       "integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==",
       "dev": true
     },
-    "chrono": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/chrono/-/chrono-1.0.5.tgz",
-      "integrity": "sha512-gjmpLxZa8iRaQXpV/sEV3ZkDuvwg0FqM1YrhaxdybN/DQJyfs1fG6UkJXkkOKLk/Hb712hsVV5EGR8f8A5sBdA=="
-    },
     "ci-info": {
       "version": "3.8.0",
       "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.8.0.tgz",

frontend/package.json

@@ -55,7 +55,6 @@
     "axios": "^0.27.2",
     "axios-auth-refresh": "^3.3.6",
     "base64-loader": "^1.0.0",
-    "chrono": "^1.0.5",
     "classnames": "^2.3.1",
     "cookies": "^0.8.0",
     "cva": "npm:class-variance-authority@^0.4.0",

frontend/src/views/SecretMainPage/components/SecretListView/CreateReminderForm.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 import { faClock } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -25,18 +25,17 @@ interface ReminderFormProps {
 export const CreateReminderForm = ({ isOpen, onOpenChange }: ReminderFormProps) => {
   const {
     register,
-    watch,
+    control,
     reset,
     setValue,
     handleSubmit,
-    formState: { errors, isSubmitting }
+    formState: { isSubmitting }
   } = useForm<TReminderFormSchema>({
     resolver: zodResolver(ReminderFormSchema)
   });
 
-  const daysWatch = watch("days");
-
   const handleFormSubmit = async (data: TReminderFormSchema) => {
+    console.log(data);
     onOpenChange(false, data);
   };
 
@@ -62,21 +61,34 @@ export const CreateReminderForm = ({ isOpen, onOpenChange }: ReminderFormProps)
         <form onSubmit={handleSubmit(handleFormSubmit)}>
           <div className="space-y-2">
             <div>
-              <FormControl
+              <Controller
-                className="mb-0"
+                control={control}
-                label="How many days between"
+                name="days"
-                isError={Boolean(errors?.days)}
+                render={({ field, fieldState }) => (
-                errorText={errors?.days?.message || ""}
+                  <>
-              >
+                    <FormControl
-                <Input
+                      className="mb-0"
-                  onChange={(el) => setValue("days", parseInt(el.target.value, 10))}
+                      label="How many days between"
-                  type="number"
+                      isError={Boolean(fieldState.error)}
-                  placeholder="31"
+                      errorText={fieldState.error?.message || ""}
-                />
+                    >
-              </FormControl>
+                      <Input
-              <div className={twMerge("mt-2 ml-1 text-xs", daysWatch ? "opacity-60" : "opacity-0")}>
+                        onChange={(el) => setValue("days", parseInt(el.target.value, 10))}
-                Every {daysWatch > 1 ? `${daysWatch} days` : "day"}
+                        type="number"
-              </div>
+                        placeholder="31"
+                      />
+                    </FormControl>
+                    <div
+                      className={twMerge(
+                        "mt-2 ml-1 text-xs",
+                        field.value ? "opacity-60" : "opacity-0"
+                      )}
+                    >
+                      Every {field.value > 1 ? `${field.value} days` : "day"}
+                    </div>
+                  </>
+                )}
+              />
             </div>
 
             <FormControl label="Note" className="mb-0">