From 559f79325da0f4169fa963c3caafb4975af373e3 Mon Sep 17 00:00:00 2001 From: ramo-dev Date: Tue, 4 Jun 2024 15:52:52 +0300 Subject: [PATCH 1/3] replaced yup and @hookform/resolvers with react-hook-form --- package.json | 4 +- src/APP/components/admin/GeneralInfo.jsx | 35 +-- src/APP/components/admin/Organizers.jsx | 225 +++++++----------- src/APP/components/admin/SocialMediaLinks.jsx | 25 +- src/APP/pages/admin/events/AddEventPage.jsx | 96 ++++---- .../pages/chapter/sections/WelcomeSection.jsx | 16 +- 6 files changed, 155 insertions(+), 246 deletions(-) diff --git a/package.json b/package.json index 86be2fcd..608709e3 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,6 @@ "@fortawesome/free-solid-svg-icons": "^6.4.0", "@fortawesome/react-fontawesome": "^0.2.0", "@headlessui/react": "^1.7.15", - "@hookform/resolvers": "^3.3.2", "@hookstate/core": "^4.0.1", "@material-tailwind/react": "^2.1.9", "@tanstack/react-query": "^5.22.2", @@ -42,8 +41,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/react": "^18.0.28", diff --git a/src/APP/components/admin/GeneralInfo.jsx b/src/APP/components/admin/GeneralInfo.jsx index 01f8eb6c..b8ea9c22 100644 --- 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,7 +44,7 @@ function GeneralInfo({ theNext, setCollectedChapter }) { return ( <> -
+

General Info @@ -63,7 +52,7 @@ function GeneralInfo({ theNext, setCollectedChapter }) {

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 && {errors.banner.message}}
-
+
+
+

Organizers

+ + {fields.map((organizer, index) => ( +
+

{`Organizer ${index + 1}`} +

-
- - {errors.organizers ? ( - {errors.organizers[index]?.name?.message || ''} - ) : ('')} - -
-
- - { errors.organizers ? ( - {errors.organizers[index]?.role?.message || ''} - ) : ('')} -
-
handleUploadImageKeyDown((e,`organizerImage${index}`))} - tabIndex="0" - role="button" - onClick={() => { - const fileInput = document.getElementById(`organizers.${index}.image`); - fileInput.click(); - }} - > - ( - <> - { - field.onChange(e); - handleImageChange(e, index); - }} /> -
-
-
- Upload Organizer’s Image -
-
- {fileNames && fileNames[`organizer${index}`] ? ( -
-

{fileNames[`organizer${index}`]}

-
- ) : ( -
-
- PNG, JPG, JFIF +
+ + {errors.organizers && ( + {errors.organizers[index]?.name?.message || ''} + )} +
+
+ + {errors.organizers && ( + {errors.organizers[index]?.role?.message || ''} + )} +
+
document.getElementById(`organizers.${index}.image`).click()}> + ( + <> + { + field.onChange(e); + handleImageChange(e, index); + }} + /> +
+
+
Upload Organizer’s Image
+ {fileNames && fileNames[`organizer${index}`] ? ( +
+

{fileNames[`organizer${index}`]}

+
+ ) : ( +
+
PNG, JPG, JFIF
+
+ )}
- )} -
- - )} - /> -
- { errors.organizers ? ( + + )} + /> +
+ {errors.organizers && ( {errors.organizers[index]?.image?.message || ''} - ) : ('')} + )} +
+ ))} +
+
- ))} - - {/* add organisers button */} -
- -
- -
-
- - -
- + +
+
+ + +
+ ); } diff --git a/src/APP/components/admin/SocialMediaLinks.jsx b/src/APP/components/admin/SocialMediaLinks.jsx index 4f2f80a2..ddc77c13 100644 --- a/src/APP/components/admin/SocialMediaLinks.jsx +++ b/src/APP/components/admin/SocialMediaLinks.jsx @@ -1,20 +1,9 @@ import React from "react"; import { useForm } from "react-hook-form"; -import * as yup from "yup"; -import { yupResolver } from "@hookform/resolvers/yup"; function SocialMediaLinks({ thePrevious, theNext, setCollectedChapter }) { - const validationSchema = yup.object().shape({ - website: yup.string().url("Enter a valid url.").required("Website link required."), - facebook: yup.string().url("Enter a valid url.").required("Facebook link Required."), - twitter: yup.string().url("Enter a valid url.").required("Twitter link Required."), - linkedin: yup.string().url("Enter a valid url.").required("Linkedin link Required."), - instagram: yup.string().url("Enter a valid url.").required("Instagram link Required."), - }); - const { register, handleSubmit, formState: { errors } } = useForm({ mode: "onChange", - resolver: yupResolver(validationSchema), }); const onSubmit = (data) => { @@ -27,7 +16,7 @@ function SocialMediaLinks({ thePrevious, theNext, setCollectedChapter }) { return ( <> -
+

Social Media Links @@ -35,7 +24,7 @@ function SocialMediaLinks({ thePrevious, theNext, setCollectedChapter }) {

-
+
- {statusEventsCategories === "error" && (
{errors.category_name && ( @@ -276,9 +246,11 @@ function AddEventPage() { placeholder="Event Category" className="mt-1 px-3 py-3 bg-white border shadow-sm border-[#656767] placeholder-[#7E8180] focus:outline-none focus:border-[#CCFFF3] focus:ring-[#009975] block w-full rounded-md sm:text-sm focus:ring-1" {...register("category", { - onChange: (event) => - setSelectedEventCategory(event.target.value), + required: "Event category is required.", })} + onChange={(event) => + setSelectedEventCategory(event.target.value) + } > {eventsCategories.map((eventsCategory) => (