tag-#77: From validation

frontend/package.json

@@ -11,17 +11,20 @@
     "format": "prettier --write ."
   },
   "dependencies": {
+    "@hookform/resolvers": "^3.3.2",
     "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.49.2",
     "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"
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@types/node": "^20.9.0",

frontend/src/lib/blog.zod.ts

@@ -0,0 +1,31 @@
+import { z } from 'zod';
+
+// validate the image link
+const isValidImageLink = (value: string) => {
+  const imageLinkRegex = /\.(jpg|jpeg|png|webp)$/i;
+  return imageLinkRegex.test(value);
+};
+
+export const FormDataSchema = 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.',
+  }),
+  authorName: z
+    .string()
+    .refine((value) => value.length >= 3, {
+      message: "C'ome on! Your name cannot be less than 3 characters.",
+    })
+    .refine((value) => value.length <= 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()).refine((value) => value.length <= 3, {
+    message: 'Easy there! Select up to 3 categories.',
+  }),
+  description: z.string(),
+  isFeaturedPost: z.boolean(),
+});
+
+export type TFormData = z.infer<typeof FormDataSchema>;

frontend/src/pages/add-blog.tsx

@@ -1,5 +1,6 @@
+import { useForm } from 'react-hook-form';
 import axios from 'axios';
-import { ChangeEvent, FormEvent, useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
@@ -9,99 +10,66 @@ import ModalComponent from '@/components/modal';
 import CategoryPill from '@/components/category-pill';
 import { categories } from '@/utils/category-colors';
 
-type FormData = {
-  title: string;
-  authorName: string;
-  imageLink: string;
-  categories: string[];
-  description: string;
-  isFeaturedPost: boolean;
-};
-function AddBlog() {
-  const [selectedImage, setSelectedImage] = useState<string>('');
+import { zodResolver } from '@hookform/resolvers/zod';
 
-  const handleImageSelect = (imageUrl: string) => {
-    setSelectedImage(imageUrl);
-  };
+import { FormDataSchema, TFormData } from '@/lib/blog.zod';
 
+function AddBlog() {
+  const [selectedImage, setSelectedImage] = useState<string>('');
   const [modal, setmodal] = useState(false);
-  const [formData, setFormData] = useState<FormData>({
-    title: '',
-    authorName: '',
-    imageLink: '',
-    categories: [],
-    description: '',
-    isFeaturedPost: false,
+
+  const {
+    register,
+    handleSubmit,
+    getValues,
+    setValue,
+    formState: { errors, isValid },
+  } = useForm<TFormData>({
+    resolver: zodResolver(FormDataSchema),
   });
 
-  const handleInputChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-    const { name, value } = e.target;
-    setFormData({ ...formData, [name]: value });
+  const handleImageSelect = (imageUrl: string) => {
+    setSelectedImage(imageUrl);
+    setValue('imageLink', imageUrl);
   };
 
   const handleCategoryClick = (category: string) => {
-    if (formData.categories.includes(category)) {
-      setFormData({
-        ...formData,
-        categories: formData.categories.filter((cat) => cat !== category),
-      });
+    const currentCategories = getValues('categories') || [];
+    if (currentCategories.includes(category)) {
+      setValue(
+        'categories',
+        currentCategories.filter((cat: string) => cat !== category)
+      );
     } else {
-      setFormData({
-        ...formData,
-        categories: [...formData.categories, category],
-      });
+      setValue('categories', [...currentCategories, category]);
     }
   };
+
   const handleselector = () => {
-    setFormData({
-      ...formData,
-      imageLink: selectedImage,
-    });
+    setValue('imageLink', selectedImage);
     setmodal(false);
   };
-  const handleCheckboxChange = () => {
-    setFormData({ ...formData, isFeaturedPost: !formData.isFeaturedPost });
-  };
-  const validateFormData = () => {
-    if (
-      !formData.title ||
-      !formData.authorName ||
-      !formData.imageLink ||
-      !formData.description ||
-      formData.categories.length === 0
-    ) {
-      toast.error('All fields must be filled out.');
-      return false;
-    }
-    const imageLinkRegex = /\.(jpg|jpeg|png|webp)$/i;
-    if (!imageLinkRegex.test(formData.imageLink)) {
-      toast.error('Image URL must end with .jpg, .jpeg, .webp or .png');
-      return false;
-    }
-    if (formData.categories.length > 3) {
-      toast.error('Select up to three categories.');
-      return false;
-    }
 
-    return true;
-  };
-  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    if (validateFormData()) {
+  const formSubmit = async (formData: TFormData) => {
+    console.log('error', errors);
+
+    console.log('From adad', formData);
+
+    if (isValid) {
       try {
         const response = await axios.post(import.meta.env.VITE_API_PATH + '/api/posts/', formData);
-
         if (response.status === 200) {
           toast.success('Blog post successfully created!');
           navigate('/');
         } else {
           toast.error('Error: ' + response.data.message);
         }
-      } catch (err: any) {
-        toast.error('Error: ' + err.message);
+      } catch (error: any) {
+        toast.error('Error: ' + error.message);
       }
     }
   };
+
   const navigate = useNavigate();
 
   const [isDarkMode, setIsDarkMode] = useState(
@@ -118,7 +86,7 @@ function AddBlog() {
     mediaQuery.addListener(handleThemeChange);
 
     return () => {
-      mediaQuery.removeListener(handleThemeChange);
+      -mediaQuery.removeListener(handleThemeChange);
     };
   }, []);
 
@@ -143,18 +111,17 @@ function AddBlog() {
         </div>
       </div>
       <div className="flex justify-center ">
-        <form onSubmit={handleSubmit} className="md:w-5/6 lg:w-2/3">
+        <form onSubmit={handleSubmit(formSubmit)} className="md:w-5/6 lg:w-2/3">
           <div className="mb-2 flex items-center">
             <label className="flex items-center">
               <span className="px-2 text-base font-medium text-light-secondary dark:text-dark-secondary">
                 Is this a featured blog?
               </span>
               <input
+                {...register('isFeaturedPost')}
                 type="checkbox"
                 name="isFeaturedPost"
                 className="ml-2 h-5 w-5 rounded-full accent-purple-400 "
-                checked={formData.isFeaturedPost}
-                onChange={handleCheckboxChange}
               />
             </label>
           </div>
@@ -164,27 +131,26 @@ function AddBlog() {
               Blog title <Asterisk />
             </div>
             <input
+              {...register('title')}
               type="text"
               name="title"
               placeholder="Travel Bucket List for this Year"
               autoComplete="off"
               className="w-full rounded-lg bg-slate-200 p-3 placeholder:text-sm placeholder:text-light-tertiary dark:bg-dark-card dark:text-slate-50 dark:placeholder:text-dark-tertiary"
-              value={formData.title}
-              onChange={handleInputChange}
             />
+            {errors.title ? <p className="mt-2 text-red-500">{`${errors.title.message}`}</p> : null}
           </div>
 
           <div className="mb-1">
             <div className="px-2 py-1 font-medium text-light-secondary dark:text-dark-secondary">
               Blog content <Asterisk />
             </div>
             <textarea
+              {...register('description')}
               name="description"
               placeholder="Start writing here&hellip;"
               rows={5}
               className="w-full rounded-lg bg-slate-200 p-3 placeholder:text-sm placeholder:text-light-tertiary dark:bg-dark-card dark:text-slate-50 dark:placeholder:text-dark-tertiary"
-              value={formData.description}
-              onChange={handleInputChange}
             />
           </div>
 
@@ -193,13 +159,15 @@ function AddBlog() {
               Author name <Asterisk />
             </div>
             <input
+              {...register('authorName')}
               type="text"
               name="authorName"
               placeholder="Shree Sharma"
               className="w-full rounded-lg bg-slate-200 p-3 placeholder:text-sm placeholder:text-light-tertiary dark:bg-dark-card dark:text-slate-50 dark:placeholder:text-dark-tertiary"
-              value={formData.authorName}
-              onChange={handleInputChange}
             />
+            {errors.authorName ? (
+              <p className="mt-2 text-red-500">{`${errors.authorName.message}`}</p>
+            ) : null}
           </div>
 
           <div className="px-2 py-1 font-medium text-light-secondary dark:text-dark-secondary">
@@ -211,14 +179,13 @@ function AddBlog() {
           </div>
           <div className="mb-4 flex justify-between gap-2 md:gap-4">
             <input
+              {...register('imageLink')}
               type="url"
               id="imagelink"
               name="imageLink"
               placeholder="https://&hellip;"
               autoComplete="off"
               className="w-3/4 rounded-lg bg-slate-200 p-3 placeholder:text-sm placeholder:text-light-tertiary dark:bg-dark-card dark:text-slate-50 dark:placeholder:text-dark-tertiary lg:w-10/12"
-              value={formData.imageLink}
-              onChange={handleInputChange}
             />
             <button
               type="button"
@@ -230,20 +197,27 @@ function AddBlog() {
               Pick image
             </button>
           </div>
+          <div className="block">
+            {errors.imageLink ? (
+              <p className="mb-1 mt-2 text-red-500">{`${errors.imageLink.message}`}</p>
+            ) : null}
+          </div>
           <div className="mb-4 flex flex-col">
             <label className="px-2 pb-1 font-medium text-light-secondary dark:text-dark-secondary md:mr-4 md:w-fit">
               Categories <Asterisk />
             </label>
+
             <div className="flex flex-wrap gap-3 rounded-lg p-2 dark:bg-dark-card dark:p-3">
               {categories.map((category, index) => (
                 <span key={`${category}-${index}`} onClick={() => handleCategoryClick(category)}>
                   <CategoryPill
                     category={category}
-                    selected={formData.categories.includes(category)}
+                    selected={getValues('categories')?.includes(category)}
                   />
                 </span>
               ))}
             </div>
+            {errors.categories ? <p className="mt-2 text-red-500">Select up to 3 tags</p> : null}
           </div>
 
           <button