fix-#77: changed the traditional form to react hook form (#407)

frontend/package.json

@@ -20,22 +20,22 @@
     ]
   },
   "dependencies": {
-    "@hookform/resolvers": "^3.3.4",
+    "@hookform/resolvers": "^3.5.0",
     "@tsparticles/react": "^3.0.0",
     "axios": "^1.6.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "lucide-react": "^0.292.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.51.2",
+    "react-hook-form": "^7.51.5",
     "react-router-dom": "^6.18.0",
     "react-tag-input": "^6.8.1",
     "react-toastify": "^9.1.3",
     "tailwind-merge": "^2.0.0",
     "tailwindcss-animate": "^1.0.7",
     "tsparticles": "^3.4.0",
-    "zod": "^3.22.4"
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.23.6",

frontend/src/lib/types.ts

@@ -28,6 +28,38 @@ export const signUpSchema = z
     message: 'Confirm Password do not match',
     path: ['confirmPassword'],
   });
+const isValidImageLink = (value: string) => {
+  const imageLinkRegex = /\.(jpg|jpeg|png|webp)$/i;
+  return imageLinkRegex.test(value);
+};
+export const addBlogSchema = z.object({
+  title: z.string().refine((value) => value.trim().split(/\s+/).length >= 3, {
+    message: 'Oops! Title needs more spice. Give it at least 3 words.',
+  }),
+  isFeaturedPost: z.boolean(),
+  description: z.string().refine((value) => value.trim().split(/\s+/).length >= 10, {
+    message: 'Oops! Description needs more detail. Give it at least 10 words',
+  }),
+  authorName: z
+    .string()
+    .min(3, {
+      message: "C'ome on! Your name cannot be less than 3 characters.",
+    })
+    .max(15, {
+      message: "Hey isn't it too big of a name, can you limit it to 15 characters",
+    }),
+  imageLink: z.string().refine((value) => isValidImageLink(value), {
+    message: 'Hmm... Image link should end with .jpg, .jpeg, .webp, or .png.',
+  }),
+  categories: z
+    .array(z.string())
+    .min(1, {
+      message: 'Easy there! Select at least one category.',
+    })
+    .max(3, {
+      message: 'Easy there! Not more than 3 categories.',
+    }),
+});
 
 export interface AuthData {
   _id: string;
@@ -38,3 +70,4 @@ export interface AuthData {
 
 export type TSignInSchema = z.infer<typeof signInSchema>;
 export type TSignUpSchema = z.infer<typeof signUpSchema>;
+export type TAddBlogScheme = z.infer<typeof addBlogSchema>;