From a31b97baef5a11cd85bc4633056568b1a241fc01 Mon Sep 17 00:00:00 2001
From: sahil639 <44092199+sahil639@users.noreply.github.com>
Date: Sat, 25 Nov 2023 16:54:38 +0530
Subject: [PATCH 1/6] feat: React-hook-form addition

---
 components/form/Textarea.js                   |   8 +-
 package-lock.json                             |  27 ++-
 package.json                                  |   2 +
 pages/account/manage/milestone/[[...data]].js | 193 +++++++++++-------
 4 files changed, 152 insertions(+), 78 deletions(-)

diff --git a/components/form/Textarea.js b/components/form/Textarea.js
index 695d71fe2ff..d0542093a6b 100644
--- a/components/form/Textarea.js
+++ b/components/form/Textarea.js
@@ -1,10 +1,12 @@
+import { forwardRef } from "react";
 import Label from "./Label";
 
-export default function Textarea({ name, value, label, ...restProps }) {
+const Textarea = forwardRef(({ name, value, label, ...restProps },ref) => {
   return (
     <div>
       <Label htmlFor={name}>{label}</Label>
       <textarea
+      ref={ref}
         rows={4}
         name={name}
         id={name}
@@ -14,4 +16,6 @@ export default function Textarea({ name, value, label, ...restProps }) {
       />
     </div>
   );
-}
+})
+
+export default Textarea;
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index afee56d6a9d..a0f31e2643c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,12 +6,13 @@
   "packages": {
     "": {
       "name": "biodrop",
-      "version": "2.87.3",
+      "version": "2.90.1",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
         "@headlessui/react": "^1.7.17",
         "@heroicons/react": "^2.0.18",
+        "@hookform/resolvers": "^3.3.2",
         "@mdx-js/loader": "^3.0.0",
         "@mdx-js/react": "^3.0.0",
         "@next/mdx": "^14.0.1",
@@ -38,6 +39,7 @@
         "react": "^18.2.0",
         "react-children-utilities": "^2.9.0",
         "react-dom": "^18.2.0",
+        "react-hook-form": "^7.48.2",
         "react-icons": "^4.11.0",
         "react-leaflet": "^4.2.1",
         "react-markdown": "^9.0.0",
@@ -2665,6 +2667,14 @@
         "react": ">= 16"
       }
     },
+    "node_modules/@hookform/resolvers": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.3.2.tgz",
+      "integrity": "sha512-Tw+GGPnBp+5DOsSg4ek3LCPgkBOuOgS5DsDV7qsWNH9LZc433kgsWICjlsh2J9p04H2K66hsXPPb9qn9ILdUtA==",
+      "peerDependencies": {
+        "react-hook-form": "^7.0.0"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.13",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
@@ -20121,6 +20131,21 @@
       "integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
       "dev": true
     },
+    "node_modules/react-hook-form": {
+      "version": "7.48.2",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.48.2.tgz",
+      "integrity": "sha512-H0T2InFQb1hX7qKtDIZmvpU1Xfn/bdahWBN1fH19gSe4bBEqTfmlr7H3XWTaVtiK4/tpPaI1F3355GPMZYge+A==",
+      "engines": {
+        "node": ">=12.22.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18"
+      }
+    },
     "node_modules/react-icons": {
       "version": "4.11.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.11.0.tgz",
diff --git a/package.json b/package.json
index ccc0342618f..cffa141da7a 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
   "dependencies": {
     "@headlessui/react": "^1.7.17",
     "@heroicons/react": "^2.0.18",
+    "@hookform/resolvers": "^3.3.2",
     "@mdx-js/loader": "^3.0.0",
     "@mdx-js/react": "^3.0.0",
     "@next/mdx": "^14.0.1",
@@ -35,6 +36,7 @@
     "react": "^18.2.0",
     "react-children-utilities": "^2.9.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.48.2",
     "react-icons": "^4.11.0",
     "react-leaflet": "^4.2.1",
     "react-markdown": "^9.0.0",
diff --git a/pages/account/manage/milestone/[[...data]].js b/pages/account/manage/milestone/[[...data]].js
index a11e413af45..7c704a99f2d 100644
--- a/pages/account/manage/milestone/[[...data]].js
+++ b/pages/account/manage/milestone/[[...data]].js
@@ -1,7 +1,10 @@
 import Router from "next/router";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { authOptions } from "../../../api/auth/[...nextauth]";
 import { getServerSession } from "next-auth/next";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Controller, useForm } from "react-hook-form";
 
 import { clientEnv } from "@config/schemas/clientSchema";
 import logger from "@config/logger";
@@ -63,7 +66,6 @@ export default function ManageMilestone({ BASE_URL, milestone }) {
     message: "",
     additionalMessage: "",
   });
-  const [title, setTitle] = useState(milestone.title || "");
   const [description, setDescription] = useState(milestone.description || "");
   const [url, setUrl] = useState(milestone.url || "");
   const [icon, setIcon] = useState(milestone.icon || "");
@@ -73,46 +75,46 @@ export default function ManageMilestone({ BASE_URL, milestone }) {
     milestone.dateFormat || options[0].value,
   );
 
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-
+  const onSubmit = async (data) => {
+    console.log(data);
     let alert = "created";
-    let putMilestone = {
-      title,
-      description,
-      url,
-      icon,
-      date,
-      isGoal,
-      dateFormat,
-    };
-    let apiUrl = `${BASE_URL}/api/account/manage/milestone/`;
-    if (milestone._id) {
-      alert = "updated";
-      putMilestone = { ...putMilestone, _id: milestone._id };
-      apiUrl = `${BASE_URL}/api/account/manage/milestone/${milestone._id}`;
-    }
-    const res = await fetch(apiUrl, {
-      method: "PUT",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(putMilestone),
-    });
-    const update = await res.json();
+    // let putMilestone = {
+    //   title,
+    //   description,
+    //   url,
+    //   icon,
+    //   date,
+    //   isGoal,
+    //   dateFormat,
+    // };
+    // console.log(putMilestone);
+    // let apiUrl = `${BASE_URL}/api/account/manage/milestone/`;
+    // if (milestone._id) {
+    //   alert = "updated";
+    //   putMilestone = { ...putMilestone, _id: milestone._id };
+    //   apiUrl = `${BASE_URL}/api/account/manage/milestone/${milestone._id}`;
+    // }
+    // const res = await fetch(apiUrl, {
+    //   method: "PUT",
+    //   headers: {
+    //     "Content-Type": "application/json",
+    //   },
+    //   body: JSON.stringify(putMilestone),
+    // });
+    // const update = await res.json();
 
-    if (update.message) {
-      return setShowNotification({
-        show: true,
-        type: "error",
-        message: "Milestone update failed",
-        additionalMessage: `Please check the fields: ${Object.keys(
-          update.message,
-        ).join(", ")}`,
-      });
-    }
+    // if (update.message) {
+    //   return setShowNotification({
+    //     show: true,
+    //     type: "error",
+    //     message: "Milestone update failed",
+    //     additionalMessage: `Please check the fields: ${Object.keys(
+    //       update.message,
+    //     ).join(", ")}`,
+    //   });
+    // }
 
-    Router.push(`${BASE_URL}/account/manage/milestones?alert=${alert}`);
+    // Router.push(`${BASE_URL}/account/manage/milestones?alert=${alert}`);
   };
 
   const deleteItem = async () => {
@@ -139,12 +141,61 @@ export default function ManageMilestone({ BASE_URL, milestone }) {
     return Router.push(`${BASE_URL}/account/manage/milestones?alert=deleted`);
   };
 
+  const mileStoneClientSchema = z.object({
+    url: z.string().optional(),
+    date: z.string().optional(),
+    dateFormat: z.string().default("dd/mm/yyyy"),
+    isGoal: z.boolean().optional(),
+    title: z.string().min(2).max(256),
+    icon: z.string().min(2).max(32).optional(),
+    description: z.string().min(2).max(512),
+
+  })
+
+
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+    setValue,
+    getValues,
+    control,
+    watch
+  } = useForm({
+    resolver: zodResolver(mileStoneClientSchema),
+    defaultValues: useMemo(() => ({
+      title: milestone.title || "",
+      description: milestone.description || "",
+      url: milestone.url || "",
+      icon: milestone.icon || "",
+      date: milestone.date || "",
+      isGoal: milestone.isGoal || false,
+      dateFormat: milestone.dateFormat || options[0].value
+    }), [milestone])
+  })
+
+  const milestoneWatch = watch(['title', 'description', 'url', 'icon', 'date', 'isGoal', 'dateFormat']);
+
+  console.log(milestoneWatch);
+
   useEffect(() => {
-    const parse = Date.parse(date);
+    const parse = Date.parse(getValues("date"));
     if (!isNaN(parse)) {
-      setDate(new Date(parse).toISOString().split("T")[0]);
+      setValue("date", new Date(parse).toISOString().split("T")[0]);
     }
-  }, [date, milestone.date]);
+  }, [getValues("data"), milestone.date]);
+  console.log(errors);
+
+  const onError = (errors,e) => {
+
+    console.log(errors);
+    return setShowNotification({
+          show: true,
+          type: "error",
+          message: errors.message,
+        });
+  }
 
   return (
     <>
@@ -169,7 +220,8 @@ export default function ManageMilestone({ BASE_URL, milestone }) {
         <div className="relative mx-auto grid max-w-7xl grid-cols-1 gap-x-16 lg:grid-cols-2 lg:px-8 xl:gap-x-48">
           <form
             className="space-y-8 divide-y divide-primary-low-medium/30"
-            onSubmit={handleSubmit}
+            onSubmit={handleSubmit(onSubmit,onError)}
+            def
           >
             <div className="space-y-8 divide-y divide-primary-low-medium/30 sm:space-y-5">
               <div className="space-y-6 sm:space-y-5">
@@ -182,15 +234,13 @@ export default function ManageMilestone({ BASE_URL, milestone }) {
                 <div className="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-primary-low-medium/30 sm:pt-5">
                   <div className="mt-1 sm:col-span-2 sm:mt-0">
                     <Input
+                      {...register("title")
+                      }
                       name="title"
                       label="Milestone Title"
-                      onChange={(e) => setTitle(e.target.value)}
-                      value={title}
                       placeholder="Title of your Milestone"
-                      required
-                      minLength="2"
-                      maxLength="256"
                     />
+                    {errors.title && <p className=" text-red-500 ">{errors.title.message}</p>}
                     <p className="text-sm text-primary-low-medium">
                       For example: <i>GitHub Star</i>
                     </p>
@@ -198,58 +248,59 @@ export default function ManageMilestone({ BASE_URL, milestone }) {
 
                   <div className="mt-1 sm:col-span-2 sm:mt-0">
                     <Textarea
+                      {...register("description")
+                      }
                       name="description"
                       placeholder="Description of your Milestone"
-                      onChange={(e) => setDescription(e.target.value)}
-                      value={description}
-                      required
-                      minLength="2"
-                      maxLength="512"
                     />
+                    {errors.description && <p className=" text-red-500 ">{errors.description.message}</p>}
                     <p className="text-sm text-primary-low-medium">
                       Describe this Milestone
                     </p>
                   </div>
                   <div className="mt-1 sm:col-span-2 sm:mt-0">
                     <Input
-                      type="url"
+                      {...register("url")
+                      }
                       name="url"
                       label="URL"
-                      onChange={(e) => setUrl(e.target.value)}
-                      value={url}
                       placeholder="https://www.example.com"
-                      minLength="2"
-                      maxLength="256"
                     />
+                    {errors.url && <p className=" text-red-500 ">{errors.url.message}</p>}
                     <p className="text-sm text-primary-low-medium">
                       Link to more information (optional)
                     </p>
                   </div>
                   <div className="mt-1 sm:col-span-2 sm:mt-0">
                     <Input
+                      {...register("date")}
                       type="date"
                       name="date"
                       label="Date"
-                      onChange={(e) => setDate(e.target.value)}
-                      value={date}
-                      required
                       min="1970-01-01"
                     />
+                    {errors.date && <p className=" text-red-500 ">{errors.date.message}</p>}
                     <p className="text-sm text-primary-low-medium">
                       For example: <i>DD / MM / YYYY</i>
                     </p>
                     <Select
+                      {...register("dateFormat")
+                      }
                       name="layout"
                       label="Select format"
-                      value={dateFormat}
                       options={options}
-                      onChange={(e) => setdateFormat(e.target.value)}
                     />
                   </div>
                   <div className="mt-1 sm:col-span-2 sm:mt-0">
-                    <IconSearch
-                      handleSelectedIcon={setIcon}
-                      selectedIcon={icon}
+                    <Controller
+                      name="icon"
+                      control={control}
+                      render={({ field }) => (
+                        <IconSearch
+                          handleSelectedIcon={field.onChange}
+                          selectedIcon={field.value}
+                        />
+                      )}
                     />
                     <p className="text-sm text-primary-low-medium">
                       Search for available{" "}
@@ -283,15 +334,7 @@ export default function ManageMilestone({ BASE_URL, milestone }) {
           </form>
           <div>
             <UserMilestone
-              milestone={{
-                title,
-                description,
-                url,
-                icon,
-                date,
-                isGoal,
-                dateFormat,
-              }}
+              milestone={milestoneWatch}
               isGoal={isGoal}
             />
           </div>

From 798214d61e0ad77042a7b2ad5832816574a63171 Mon Sep 17 00:00:00 2001
From: Chinmay <51131670+ChinmayMhatre@users.noreply.github.com>
Date: Sat, 25 Nov 2023 17:23:13 +0530
Subject: [PATCH 2/6] fix: fix userMilestone component rendering

---
 pages/account/manage/milestone/[[...data]].js | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/pages/account/manage/milestone/[[...data]].js b/pages/account/manage/milestone/[[...data]].js
index 7c704a99f2d..800c42c5e87 100644
--- a/pages/account/manage/milestone/[[...data]].js
+++ b/pages/account/manage/milestone/[[...data]].js
@@ -152,8 +152,6 @@ export default function ManageMilestone({ BASE_URL, milestone }) {
 
   })
 
-
-
   const {
     register,
     handleSubmit,
@@ -188,7 +186,6 @@ export default function ManageMilestone({ BASE_URL, milestone }) {
   console.log(errors);
 
   const onError = (errors,e) => {
-
     console.log(errors);
     return setShowNotification({
           show: true,
@@ -333,8 +330,17 @@ export default function ManageMilestone({ BASE_URL, milestone }) {
             </div>
           </form>
           <div>
+
             <UserMilestone
-              milestone={milestoneWatch}
+              milestone={{
+                title: milestoneWatch[0] ,
+                description: milestoneWatch[1] ,
+                url: milestoneWatch[2] ,
+                icon: milestoneWatch[3] ,
+                date: milestoneWatch[4] ,
+                isGoal: milestoneWatch[5] || false,
+                dateFormat: milestoneWatch[6] || options[0].value
+              }}
               isGoal={isGoal}
             />
           </div>

From d94575eb0db05086156d391af02f865843fe9dbf Mon Sep 17 00:00:00 2001
From: Chinmay <51131670+ChinmayMhatre@users.noreply.github.com>
Date: Sat, 25 Nov 2023 20:22:29 +0530
Subject: [PATCH 3/6] fix: fix userMilestone list page

---
 components/user/UserMilestone.js              |  17 ++-
 components/user/UserMilestones.js             |   2 -
 pages/account/manage/milestone/[[...data]].js | 118 +++++++-----------
 3 files changed, 54 insertions(+), 83 deletions(-)

diff --git a/components/user/UserMilestone.js b/components/user/UserMilestone.js
index d00dd681f80..82440fa2bad 100644
--- a/components/user/UserMilestone.js
+++ b/components/user/UserMilestone.js
@@ -8,9 +8,8 @@ import Edit from "@components/account/manage/Edit";
 import Markdown from "@components/Markdown";
 import { shortenDate } from "@services/utils/dateFormat";
 
-export default function UserMilestone({ milestone, isGoal, manage }) {
+export default function UserMilestone({ milestone,  manage }) {
   const [date, setDate] = useState(milestone.date);
-
   useEffect(() => {
     if (milestone.date) {
       const formattedDate = shortenDate({
@@ -22,11 +21,10 @@ export default function UserMilestone({ milestone, isGoal, manage }) {
   }, [milestone.date, milestone.dateFormat]);
 
   const DisplayIcon = getIcon(milestone.icon);
-  const item = (milestone, isGoal) => {
-    const colors = isGoal
+  const item = () => {
+    const colors = milestone.isGoal
       ? "text-primary-medium/70 dark:text-primary-low-medium/[.83]"
       : "text-primary-medium dark:text-primary-low-medium";
-
     return (
       <div className="flex space-x-3 grow">
         {milestone.icon && (
@@ -38,7 +36,7 @@ export default function UserMilestone({ milestone, isGoal, manage }) {
           <div className="flex items-center justify-between">
             <h2
               className={classNames(
-                isGoal && "opacity-70",
+                milestone.isGoal && "opacity-70",
                 "text-sm font-medium",
               )}
             >
@@ -65,17 +63,18 @@ export default function UserMilestone({ milestone, isGoal, manage }) {
     );
   };
 
-  const edit = (milestone, isGoal) => (
+  const edit = () => (
     <Edit
       href={`/account/manage/milestone/${milestone._id}`}
       label={`${milestone.title} Milestone`}
     >
-      {item(milestone, isGoal)}
+      {item(milestone.isGoal)}
     </Edit>
   );
+
   return (
     <li className="flex flex-row gap-8 py-4 border-primary-low-medium">
-      {manage ? edit(milestone, isGoal) : item(milestone, isGoal)}
+      {manage ? edit() : item()}
     </li>
   );
 }
diff --git a/components/user/UserMilestones.js b/components/user/UserMilestones.js
index 28f835b6ad0..fc43b8395bc 100644
--- a/components/user/UserMilestones.js
+++ b/components/user/UserMilestones.js
@@ -17,7 +17,6 @@ export default function UserMilestones({ milestones, manage = false }) {
           historicMilestones.map((milestone, key) => (
             <UserMilestone
               milestone={milestone}
-              isGoal={false}
               key={key}
               manage={manage}
             />
@@ -34,7 +33,6 @@ export default function UserMilestones({ milestones, manage = false }) {
         {futureMilestones.map((goal, key) => (
           <UserMilestone
             milestone={goal}
-            isGoal={true}
             key={key}
             manage={manage}
           />
diff --git a/pages/account/manage/milestone/[[...data]].js b/pages/account/manage/milestone/[[...data]].js
index 800c42c5e87..22bfd93555b 100644
--- a/pages/account/manage/milestone/[[...data]].js
+++ b/pages/account/manage/milestone/[[...data]].js
@@ -66,55 +66,36 @@ export default function ManageMilestone({ BASE_URL, milestone }) {
     message: "",
     additionalMessage: "",
   });
-  const [description, setDescription] = useState(milestone.description || "");
-  const [url, setUrl] = useState(milestone.url || "");
-  const [icon, setIcon] = useState(milestone.icon || "");
-  const [date, setDate] = useState(milestone.date || "");
-  const [isGoal, setIsGoal] = useState(milestone.isGoal ? true : false);
-  const [dateFormat, setdateFormat] = useState(
-    milestone.dateFormat || options[0].value,
-  );
 
   const onSubmit = async (data) => {
-    console.log(data);
     let alert = "created";
-    // let putMilestone = {
-    //   title,
-    //   description,
-    //   url,
-    //   icon,
-    //   date,
-    //   isGoal,
-    //   dateFormat,
-    // };
-    // console.log(putMilestone);
-    // let apiUrl = `${BASE_URL}/api/account/manage/milestone/`;
-    // if (milestone._id) {
-    //   alert = "updated";
-    //   putMilestone = { ...putMilestone, _id: milestone._id };
-    //   apiUrl = `${BASE_URL}/api/account/manage/milestone/${milestone._id}`;
-    // }
-    // const res = await fetch(apiUrl, {
-    //   method: "PUT",
-    //   headers: {
-    //     "Content-Type": "application/json",
-    //   },
-    //   body: JSON.stringify(putMilestone),
-    // });
-    // const update = await res.json();
-
-    // if (update.message) {
-    //   return setShowNotification({
-    //     show: true,
-    //     type: "error",
-    //     message: "Milestone update failed",
-    //     additionalMessage: `Please check the fields: ${Object.keys(
-    //       update.message,
-    //     ).join(", ")}`,
-    //   });
-    // }
+    let apiUrl = `${BASE_URL}/api/account/manage/milestone/`;
+    let putMilestone = data;
+    if (milestone._id) {
+      alert = "updated";
+      putMilestone = { ...putMilestone, _id: milestone._id };
+      apiUrl = `${BASE_URL}/api/account/manage/milestone/${milestone._id}`;
+    }
+    const res = await fetch(apiUrl, {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(putMilestone),
+    });
+    const update = await res.json();
+    if (update.message) {
+      return setShowNotification({
+        show: true,
+        type: "error",
+        message: "Milestone update failed",
+        additionalMessage: `Please check the fields: ${Object.keys(
+          update.message,
+        ).join(", ")}`,
+      });
+    }
 
-    // Router.push(`${BASE_URL}/account/manage/milestones?alert=${alert}`);
+    Router.push(`${BASE_URL}/account/manage/milestones?alert=${alert}`);
   };
 
   const deleteItem = async () => {
@@ -155,7 +136,7 @@ export default function ManageMilestone({ BASE_URL, milestone }) {
   const {
     register,
     handleSubmit,
-    formState: { errors, isSubmitting },
+    formState: { errors },
     setValue,
     getValues,
     control,
@@ -175,24 +156,12 @@ export default function ManageMilestone({ BASE_URL, milestone }) {
 
   const milestoneWatch = watch(['title', 'description', 'url', 'icon', 'date', 'isGoal', 'dateFormat']);
 
-  console.log(milestoneWatch);
-
   useEffect(() => {
     const parse = Date.parse(getValues("date"));
     if (!isNaN(parse)) {
       setValue("date", new Date(parse).toISOString().split("T")[0]);
     }
   }, [getValues("data"), milestone.date]);
-  console.log(errors);
-
-  const onError = (errors,e) => {
-    console.log(errors);
-    return setShowNotification({
-          show: true,
-          type: "error",
-          message: errors.message,
-        });
-  }
 
   return (
     <>
@@ -200,10 +169,8 @@ export default function ManageMilestone({ BASE_URL, milestone }) {
         title="Manage Milestone"
         description={`Here you can manage your ${PROJECT_NAME} milestone`}
       />
-
       <Page>
         <Navigation />
-
         <Notification
           show={showNotification.show}
           type={showNotification.type}
@@ -217,7 +184,7 @@ export default function ManageMilestone({ BASE_URL, milestone }) {
         <div className="relative mx-auto grid max-w-7xl grid-cols-1 gap-x-16 lg:grid-cols-2 lg:px-8 xl:gap-x-48">
           <form
             className="space-y-8 divide-y divide-primary-low-medium/30"
-            onSubmit={handleSubmit(onSubmit,onError)}
+            onSubmit={handleSubmit(onSubmit)}
             def
           >
             <div className="space-y-8 divide-y divide-primary-low-medium/30 sm:space-y-5">
@@ -287,6 +254,7 @@ export default function ManageMilestone({ BASE_URL, milestone }) {
                       label="Select format"
                       options={options}
                     />
+                    {errors.dateFormat && <p className=" text-red-500 ">{errors.dateFormat.message}</p>}
                   </div>
                   <div className="mt-1 sm:col-span-2 sm:mt-0">
                     <Controller
@@ -299,6 +267,7 @@ export default function ManageMilestone({ BASE_URL, milestone }) {
                         />
                       )}
                     />
+                    {errors.icon && <p className=" text-red-500 ">{errors.icon.message}</p>}
                     <p className="text-sm text-primary-low-medium">
                       Search for available{" "}
                       <Link href="/icons" target="_blank">
@@ -307,11 +276,17 @@ export default function ManageMilestone({ BASE_URL, milestone }) {
                     </p>
                   </div>
                   <div className="mt-1 sm:col-span-2 sm:mt-0">
-                    <Toggle
-                      text1="Is this a future goal?"
-                      text2="Future Milestone"
-                      enabled={isGoal}
-                      setEnabled={setIsGoal}
+                    <Controller
+                      name="isGoal"
+                      control={control}
+                      render={({ field }) => (
+                        <Toggle
+                          text1="Is this a future goal?"
+                          text2="Future Milestone"
+                          enabled={field.value}
+                          setEnabled={field.onChange}
+                        />
+                      )}
                     />
                   </div>
                 </div>
@@ -333,15 +308,14 @@ export default function ManageMilestone({ BASE_URL, milestone }) {
 
             <UserMilestone
               milestone={{
-                title: milestoneWatch[0] ,
-                description: milestoneWatch[1] ,
-                url: milestoneWatch[2] ,
-                icon: milestoneWatch[3] ,
-                date: milestoneWatch[4] ,
+                title: milestoneWatch[0],
+                description: milestoneWatch[1],
+                url: milestoneWatch[2],
+                icon: milestoneWatch[3],
+                date: milestoneWatch[4],
                 isGoal: milestoneWatch[5] || false,
                 dateFormat: milestoneWatch[6] || options[0].value
               }}
-              isGoal={isGoal}
             />
           </div>
         </div>

From 4ca0455280cb829da3988d6e35685d7860e33948 Mon Sep 17 00:00:00 2001
From: Chinmay Mhatre <chinmaymhatre12@gmail.com>
Date: Sat, 2 Dec 2023 01:15:38 +0530
Subject: [PATCH 4/6] remove extra spaces

Co-authored-by: Eddie Jaoude <eddie@jaoudestudios.com>
---
 pages/account/manage/milestone/[[...data]].js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/account/manage/milestone/[[...data]].js b/pages/account/manage/milestone/[[...data]].js
index 22bfd93555b..22f05bc576a 100644
--- a/pages/account/manage/milestone/[[...data]].js
+++ b/pages/account/manage/milestone/[[...data]].js
@@ -217,7 +217,7 @@ export default function ManageMilestone({ BASE_URL, milestone }) {
                       name="description"
                       placeholder="Description of your Milestone"
                     />
-                    {errors.description && <p className=" text-red-500 ">{errors.description.message}</p>}
+                    {errors.description && <p className="text-red-500">{errors.description.message}</p>}
                     <p className="text-sm text-primary-low-medium">
                       Describe this Milestone
                     </p>

From 70b4140af2736fb3df603f75747e76bb302f10dd Mon Sep 17 00:00:00 2001
From: Chinmay Mhatre <chinmaymhatre12@gmail.com>
Date: Tue, 12 Dec 2023 17:24:49 +0530
Subject: [PATCH 5/6] Add text area display name

Co-authored-by: sital002 <93700622+sital002@users.noreply.github.com>
---
 components/form/Textarea.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/form/Textarea.js b/components/form/Textarea.js
index d0542093a6b..7a5c2475f51 100644
--- a/components/form/Textarea.js
+++ b/components/form/Textarea.js
@@ -17,5 +17,5 @@ const Textarea = forwardRef(({ name, value, label, ...restProps },ref) => {
     </div>
   );
 })
-
+Textarea.displayName="Textarea"
 export default Textarea;
\ No newline at end of file

From 1c58c34bdd57ceafc34e028e8bb41b3989f3da4a Mon Sep 17 00:00:00 2001
From: Chinmay Mhatre <chinmaymhatre12@gmail.com>
Date: Wed, 27 Dec 2023 21:59:08 +0530
Subject: [PATCH 6/6] Update components/form/Textarea.js

Co-authored-by: Eddie Jaoude <eddie@jaoudestudios.com>
---
 components/form/Textarea.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/components/form/Textarea.js b/components/form/Textarea.js
index 7a5c2475f51..6291c380d69 100644
--- a/components/form/Textarea.js
+++ b/components/form/Textarea.js
@@ -16,6 +16,8 @@ const Textarea = forwardRef(({ name, value, label, ...restProps },ref) => {
       />
     </div>
   );
-})
-Textarea.displayName="Textarea"
+});
+
+Textarea.displayName="Textarea";
+
 export default Textarea;
\ No newline at end of file