From ec7aa4f8424bbd8119c1fcbe2ff0b23963feef17 Mon Sep 17 00:00:00 2001 From: Tamir <1tamir198@gmail.com> Date: Sat, 23 Mar 2024 15:37:49 +0200 Subject: [PATCH 01/17] Start cahnge inputs toreact use form --- components/Common/Inputs/FormTextInput.tsx | 22 ++-- .../AddProjectmodal/AddProjectModal.tsx | 109 +++++++----------- .../Modals/AddProjectmodal/FileUploader.tsx | 11 +- .../AddProjectmodal/TermsAndConditions.tsx | 6 - package-lock.json | 16 +++ package.json | 1 + 6 files changed, 83 insertions(+), 82 deletions(-) diff --git a/components/Common/Inputs/FormTextInput.tsx b/components/Common/Inputs/FormTextInput.tsx index 1b7c5944..127aa9ee 100644 --- a/components/Common/Inputs/FormTextInput.tsx +++ b/components/Common/Inputs/FormTextInput.tsx @@ -1,30 +1,32 @@ import React from 'react'; +import { FieldErrors } from 'react-hook-form'; +import { UseFormRegister, FieldValues } from 'react-hook-form'; type FormTextInputProps = { placeholder: string; - value: string; - onChange: (e: React.ChangeEvent) => void; - error?: string; + errors: FieldErrors; + name: string; + register: UseFormRegister; }; export const FormTextInput: React.FC = ({ placeholder, - value, - onChange, - error, + errors, + name, + register, }) => { return (
- {error &&

{error}

} + {errors[name] &&

{'Error'}

}
); }; diff --git a/components/Common/Modals/AddProjectmodal/AddProjectModal.tsx b/components/Common/Modals/AddProjectmodal/AddProjectModal.tsx index f8cc161d..5a29cf7c 100644 --- a/components/Common/Modals/AddProjectmodal/AddProjectModal.tsx +++ b/components/Common/Modals/AddProjectmodal/AddProjectModal.tsx @@ -6,6 +6,7 @@ import { FileUploader } from './FileUploader'; import { ProjectDescription } from './ProjectDescription'; import { TermsAndConditions } from './TermsAndConditions'; import { MustIncludeMessage } from './MustIncludeMessage'; +import { useForm, SubmitHandler } from 'react-hook-form'; interface AddProjectModalProps { isOpen: boolean; @@ -42,63 +43,26 @@ const ModalContent = ({ closeModal }: ModalContentProps) => { email?: string; }; - const [projectName, setProjectName] = useState(''); - const [name, setName] = useState(''); - const [email, setEmail] = useState(''); - const [repoLink, setRepoLink] = useState(''); - const [projectIcon, setProjectIcon] = useState(''); - const [projectDescription, setProjectDescription] = useState(''); - const [errors, setErrors] = useState({}); - - const handleNameChange = (e: React.ChangeEvent) => { - setName(e.target.value); - }; - - const handleProjectNameChange = (e: React.ChangeEvent) => { - setProjectName(e.target.value); - }; - - const handleEmailChange = (e: React.ChangeEvent) => { - setEmail(e.target.value); - }; - - const handleRepoLinkChange = (e: React.ChangeEvent) => { - setRepoLink(e.target.value); - }; - - const handleProjectDescriptionChange = ( - e: React.ChangeEvent - ) => { - setProjectDescription(e.target.value); - }; + const onSubmit = data => console.log(data); + const { + register, + handleSubmit, + formState: { errors }, + } = useForm(); const handleFileChange = (file: File) => { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => { - setProjectIcon(reader.result as string); + // setProjectIcon(reader.result as string); }; }; - const handleSubmit = () => { - try { - schema.parse({ name, projectName, email }); - setErrors({}); - //TODO Add logic behind this later - } catch (error: any) { - if (error instanceof ZodError) { - const parsedErrors: { [key: string]: string } = {}; - - for (const { path, message } of error.errors) { - parsedErrors[path[0]] = message; - } - setErrors(parsedErrors); - } - } - }; - return ( -
+

בקשה להוספת פרויקט @@ -109,37 +73,52 @@ const ModalContent = ({ closeModal }: ModalContentProps) => {

+ + + - +
- - - -
+ /> */} + {/* */} + {/* */} + + + ); }; diff --git a/components/Common/Modals/AddProjectmodal/FileUploader.tsx b/components/Common/Modals/AddProjectmodal/FileUploader.tsx index a2f37601..a02b3ee2 100644 --- a/components/Common/Modals/AddProjectmodal/FileUploader.tsx +++ b/components/Common/Modals/AddProjectmodal/FileUploader.tsx @@ -1,11 +1,18 @@ import React from 'react'; import { UploadIcon } from './UploadIcon'; +import { UseFormRegister, FieldValues } from 'react-hook-form'; interface FileUploaderProps { onChange: (file: File) => void; + register: UseFormRegister; + name: string; } -export const FileUploader: React.FC = ({ onChange }) => { +export const FileUploader: React.FC = ({ + onChange, + register, + name, +}) => { const handleFileChange = (e: React.ChangeEvent) => { const file = e.target.files?.[0]; if (file) { @@ -19,8 +26,10 @@ export const FileUploader: React.FC = ({ onChange }) => {
); diff --git a/package-lock.json b/package-lock.json index 734eb1e6..8aeeabf7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ "postcss": "8.4.24", "react": "18.2.0", "react-dom": "18.2.0", + "react-hook-form": "^7.51.1", "react-tooltip": "^5.21.3", "sharp": "^0.33.2", "tailwind-merge": "^1.14.0", @@ -7697,6 +7698,21 @@ "react": "^18.2.0" } }, + "node_modules/react-hook-form": { + "version": "7.51.1", + "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.51.1.tgz", + "integrity": "sha512-ifnBjl+kW0ksINHd+8C/Gp6a4eZOdWyvRv0UBaByShwU8JbVx5hTcTWEcd5VdybvmPTATkVVXk9npXArHmo56w==", + "engines": { + "node": ">=12.22.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/react-hook-form" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17 || ^18" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/package.json b/package.json index 2acf245b..5df4e836 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "postcss": "8.4.24", "react": "18.2.0", "react-dom": "18.2.0", + "react-hook-form": "^7.51.1", "react-tooltip": "^5.21.3", "sharp": "^0.33.2", "tailwind-merge": "^1.14.0", From d3200719162754c13d17860807ba4b92aa0a384f Mon Sep 17 00:00:00 2001 From: Tamir <1tamir198@gmail.com> Date: Sat, 23 Mar 2024 15:51:38 +0200 Subject: [PATCH 02/17] Cleanup --- .../AddProjectmodal/AddProjectModal.tsx | 46 ++++++------------- .../Modals/AddProjectmodal/FileUploader.tsx | 10 ---- .../AddProjectmodal/ProjectDescription.tsx | 20 ++++---- .../AddProjectmodal/TermsAndConditions.tsx | 2 - 4 files changed, 24 insertions(+), 54 deletions(-) diff --git a/components/Common/Modals/AddProjectmodal/AddProjectModal.tsx b/components/Common/Modals/AddProjectmodal/AddProjectModal.tsx index 5a29cf7c..05595164 100644 --- a/components/Common/Modals/AddProjectmodal/AddProjectModal.tsx +++ b/components/Common/Modals/AddProjectmodal/AddProjectModal.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React from 'react'; import Modal from '../Modal'; import { z, ZodError } from 'zod'; import { FormTextInput } from '../../Inputs/FormTextInput'; @@ -6,7 +6,7 @@ import { FileUploader } from './FileUploader'; import { ProjectDescription } from './ProjectDescription'; import { TermsAndConditions } from './TermsAndConditions'; import { MustIncludeMessage } from './MustIncludeMessage'; -import { useForm, SubmitHandler } from 'react-hook-form'; +import { useForm } from 'react-hook-form'; interface AddProjectModalProps { isOpen: boolean; @@ -26,37 +26,19 @@ export const AddProjectModal = ({ ); }; -const schema = z.object({ - name: z.string().min(2), - projectName: z.string().min(4), - email: z.string().email(), -}); interface ModalContentProps { - closeModal: any; + closeModal: () => void; } const ModalContent = ({ closeModal }: ModalContentProps) => { - type FormErrors = { - name?: string; - projectName?: string; - email?: string; - }; - - const onSubmit = data => console.log(data); const { register, handleSubmit, formState: { errors }, } = useForm(); - const handleFileChange = (file: File) => { - const reader = new FileReader(); - reader.readAsDataURL(file); - reader.onload = () => { - // setProjectIcon(reader.result as string); - }; - }; + const onSubmit = data => console.log(data); return (
{ name={'projectName'} /> - + - {/* */} - {/* */} - {/* */} + + + +