Add React hook form validations

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;

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>
   );
 }

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}
           />

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",