Merge pull request #179 from SpaceyaTech/yup-to-react-hooks

replaced yup and @hookform/resolvers with react-hook-form
SpaceyaTech · Jun 11, 2024 · 8ec4d2c · 8ec4d2c
2 parents 9780573 + 5bb1cb6
commit 8ec4d2c
Show file tree

Hide file tree

Showing 7 changed files with 229 additions and 291 deletions.
diff --git a/package.json b/package.json
@@ -18,7 +18,6 @@
   "dependencies": {
     "@emailjs/browser": "^3.11.0",
     "@headlessui/react": "^1.7.15",
-    "@hookform/resolvers": "^3.3.2",
     "@hookstate/core": "^4.0.1",
     "@tanstack/react-query": "^5.22.2",
     "@tanstack/react-query-devtools": "^5.24.0",
@@ -40,8 +39,7 @@
     "react-share": "^5.1.0",
     "react-simple-wysiwyg": "^2.2.5",
     "tailwind-scrollbar-hide": "^1.1.7",
-    "yet-another-react-lightbox": "^3.15.6",
-    "yup": "^1.3.2"
+    "yet-another-react-lightbox": "^3.15.6"
   },
   "devDependencies": {
     "@types/node": "^20.14.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/APP/components/admin/GeneralInfo.jsx b/src/APP/components/admin/GeneralInfo.jsx
@@ -1,41 +1,30 @@
 import React, { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
-import * as yup from "yup";
-import { yupResolver } from "@hookform/resolvers/yup";
 
 function GeneralInfo({ theNext, setCollectedChapter }) {
-  const [ banner, setBanner ] = useState('');
+  const [banner, setBanner] = useState('');
 
   const handleImageChange = (event) => {
     const file = event.target.files[0];
     setBanner(file);
   };
 
-  const handleUploadImageClick = (e,id) => {
+  const handleUploadImageClick = (e, id) => {
     document.getElementById(id).click();
   };
 
-  const handleUploadImageKeyDown = (event,id) => {
+  const handleUploadImageKeyDown = (event, id) => {
     if (event.key === "Enter") {
-      handleUploadImageClick(event,id);
+      handleUploadImageClick(event, id);
     }
   };
 
-  const validationSchema = yup.object().shape({
-      country: yup.string().required("Country name is required."),
-      city: yup.string().required("City is required."),
-      name: yup.string().required("Chapter name is required."),
-      about: yup.string().required("About is required."),
-      banner: yup.mixed().required("Banner is required.")
-  });
-
   const { 
     register,
     control,
     handleSubmit,
     formState: { errors } } = useForm({
       mode: "onChange",
-      resolver: yupResolver(validationSchema),
     });
 
   const onSubmit = (data) => {
@@ -55,15 +44,15 @@ function GeneralInfo({ theNext, setCollectedChapter }) {
 
   return (
     <>
-    <div className=" w-3/4 mt-4  items-center">
+    <div className="w-3/4 mt-4 items-center">
       <form id="generalInfoForm" onSubmit={handleSubmit(onSubmit)}>
       <p className="tracking-wider text-lg font-normal text-[#323433]">
         General Info
       </p>
         <div className={`w-full mt-4 ${errors.country ? '' : 'h-10'}`}>
           <input
             id="country"
-            {...register("country")}
+            {...register("country", { required: "Country name is required." })}
             className="w-full h-12 px-4 py-2 border rounded-lg focus:outline-none focus:ring focus:border-blue-300"
             type="text"
             placeholder="Country"
@@ -73,7 +62,7 @@ function GeneralInfo({ theNext, setCollectedChapter }) {
         <div className={`w-full mt-4 ${errors.city ? '' : 'h-10'}`}>
           <input
             id="city"
-            {...register("city")}
+            {...register("city", { required: "City is required." })}
             className="w-full h-12 px-4 py-2 border rounded-lg focus:outline-none focus:ring focus:border-blue-300"
             type="text"
             placeholder="City"
@@ -83,7 +72,7 @@ function GeneralInfo({ theNext, setCollectedChapter }) {
         <div className={`w-full mt-4 ${errors.name ? '' : 'h-10'}`}>
           <input
             id="name"
-            {...register("name")}
+            {...register("name", { required: "Chapter name is required." })}
             className="w-full h-12 px-4 py-2 border rounded-lg focus:outline-none focus:ring focus:border-blue-300"
             type="text"
             placeholder="Chapter name"
@@ -93,7 +82,7 @@ function GeneralInfo({ theNext, setCollectedChapter }) {
         <div className="w-full mt-4">
           <input
             id="about"
-            {...register("about")}
+            {...register("about", { required: "About is required." })}
             className="w-full h-20 px-4 py-2 border rounded-lg focus:outline-none focus:ring focus:border-blue-300"
             type="text"
             placeholder="About Chapter"
@@ -102,8 +91,8 @@ function GeneralInfo({ theNext, setCollectedChapter }) {
         </div>
         <div
               className="w-full pl-4 py-2  mt-4 border-dashed border-2 border-gray-300  rounded-tl rounded-tr justify-start items-center inline-flex"
-              onClick={(e)=>handleUploadImageClick(e,'banner')}
-              onKeyDown={(e)=>handleUploadImageKeyDown((e,'banner'))}
+              onClick={(e) => handleUploadImageClick(e, 'banner')}
+              onKeyDown={(e) => handleUploadImageKeyDown(e, 'banner')}
               tabIndex="0"
               role="button"
             >
@@ -147,7 +136,7 @@ function GeneralInfo({ theNext, setCollectedChapter }) {
             { errors.banner && <span className="text-xs text-red-500">{errors.banner.message}</span>}
       </form>
     </div>
-    <div className=" w-3/4 mt-4 mb-14 items-center inline-flex justify-end gap-x-4">
+    <div className="w-3/4 mt-4 mb-14 items-center inline-flex justify-end gap-x-4">
     <button
       type="button"
       className="w-52 h-11 px-8 py-3 rounded-lg border border-zinc-500 text-zinc-500 text-[13px] font-medium leading-tight tracking-tight opacity-50 cursor-not-allowed"