From 60a35e6af1788b9ca18d408f2ad4ad6e6a0094e8 Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com> Date: Tue, 31 Jan 2023 18:10:50 +0530 Subject: [PATCH] fix: form validations (#213) --- .../components/issues/description-form.tsx | 35 ++++++++++++++++--- apps/app/components/issues/form.tsx | 2 +- .../project/create-project-modal.tsx | 7 ++-- .../cycles/create-update-cycle-modal.tsx | 4 +++ .../state/create-update-state-inline.tsx | 35 ++++++++++++------- .../create-update-module-modal/index.tsx | 4 +++ apps/app/components/ui/datepicker.tsx | 2 +- 7 files changed, 68 insertions(+), 21 deletions(-) diff --git a/apps/app/components/issues/description-form.tsx b/apps/app/components/issues/description-form.tsx index d3f5433cc..9882eee36 100644 --- a/apps/app/components/issues/description-form.tsx +++ b/apps/app/components/issues/description-form.tsx @@ -18,6 +18,7 @@ const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor }); // types import { IIssue } from "types"; +import useToast from "hooks/use-toast"; export interface IssueDescriptionFormValues { name: string; @@ -31,7 +32,16 @@ export interface IssueDetailsProps { } export const IssueDescriptionForm: FC = ({ issue, handleFormSubmit }) => { - const { handleSubmit, watch, setValue, reset } = useForm({ + const { setToastAlert } = useToast(); + + const { + handleSubmit, + watch, + setValue, + reset, + formState: { errors }, + setError, + } = useForm({ defaultValues: { name: "", description: "", @@ -41,13 +51,31 @@ export const IssueDescriptionForm: FC = ({ issue, handleFormS const handleDescriptionFormSubmit = useCallback( (formData: Partial) => { + if (!formData.name || formData.name === "") { + setToastAlert({ + type: "error", + title: "Error in saving!", + message: "Title is required.", + }); + return; + } + + if (formData.name.length > 255) { + setToastAlert({ + type: "error", + title: "Error in saving!", + message: "Title cannot have more than 255 characters.", + }); + return; + } + handleFormSubmit({ name: formData.name ?? "", description: formData.description, description_html: formData.description_html, }); }, - [handleFormSubmit] + [handleFormSubmit, setToastAlert] ); const debounceHandler = useMemo( @@ -83,9 +111,8 @@ export const IssueDescriptionForm: FC = ({ issue, handleFormS }} mode="transparent" className="text-xl font-medium" - required={true} /> - + {errors.name ? errors.name.message : null} = ({ required: "Title is required", maxLength: { value: 255, - message: "Name should be less than 255 characters", + message: "Title should be less than 255 characters", }, }} /> diff --git a/apps/app/components/project/create-project-modal.tsx b/apps/app/components/project/create-project-modal.tsx index 37905ea50..db91e43ef 100644 --- a/apps/app/components/project/create-project-modal.tsx +++ b/apps/app/components/project/create-project-modal.tsx @@ -93,9 +93,8 @@ export const CreateProjectModal: React.FC = (props) => { const projectIdentifier = watch("identifier") ?? ""; useEffect(() => { - if (projectName && isChangeIdentifierRequired) { + if (projectName && isChangeIdentifierRequired) setValue("identifier", projectName.replace(/ /g, "").toUpperCase().substring(0, 3)); - } }, [projectName, projectIdentifier, setValue, isChangeIdentifierRequired]); useEffect(() => () => setIsChangeIdentifierRequired(true), [isOpen]); @@ -215,6 +214,10 @@ export const CreateProjectModal: React.FC = (props) => { register={register} validations={{ required: "Name is required", + maxLength: { + value: 255, + message: "Name should be less than 255 characters", + }, }} /> diff --git a/apps/app/components/project/cycles/create-update-cycle-modal.tsx b/apps/app/components/project/cycles/create-update-cycle-modal.tsx index dc336f6c9..ef0a75cf5 100644 --- a/apps/app/components/project/cycles/create-update-cycle-modal.tsx +++ b/apps/app/components/project/cycles/create-update-cycle-modal.tsx @@ -162,6 +162,10 @@ const CreateUpdateCycleModal: React.FC = ({ isOpen, setIsOpen, data, proj register={register} validations={{ required: "Name is required", + maxLength: { + value: 255, + message: "Name should be less than 255 characters", + }, }} /> diff --git a/apps/app/components/project/issues/BoardView/state/create-update-state-inline.tsx b/apps/app/components/project/issues/BoardView/state/create-update-state-inline.tsx index 87ba04d8c..dcc5a2fcf 100644 --- a/apps/app/components/project/issues/BoardView/state/create-update-state-inline.tsx +++ b/apps/app/components/project/issues/BoardView/state/create-update-state-inline.tsx @@ -13,7 +13,7 @@ import stateService from "services/state.service"; // hooks import useToast from "hooks/use-toast"; // ui -import { Button, Input, Select } from "components/ui"; +import { Button, CustomSelect, Input, Select } from "components/ui"; // types import type { IState } from "types"; // fetch-keys @@ -183,18 +183,27 @@ export const CreateUpdateStateInline: React.FC = ({ autoComplete="off" /> {data && ( - = ({ Cancel ); diff --git a/apps/app/components/project/modules/create-update-module-modal/index.tsx b/apps/app/components/project/modules/create-update-module-modal/index.tsx index 1ec1147e5..b0ed3d561 100644 --- a/apps/app/components/project/modules/create-update-module-modal/index.tsx +++ b/apps/app/components/project/modules/create-update-module-modal/index.tsx @@ -178,6 +178,10 @@ const CreateUpdateModuleModal: React.FC = ({ isOpen, setIsOpen, data, pro register={register} validations={{ required: "Name is required", + maxLength: { + value: 255, + message: "Name should be less than 255 characters", + }, }} /> diff --git a/apps/app/components/ui/datepicker.tsx b/apps/app/components/ui/datepicker.tsx index 028f9ddbc..03a10b023 100644 --- a/apps/app/components/ui/datepicker.tsx +++ b/apps/app/components/ui/datepicker.tsx @@ -32,7 +32,7 @@ export const CustomDatePicker: React.FC = ({ renderAs === "input" ? "block bg-transparent text-sm focus:outline-none rounded-md border border-gray-300 px-3 py-2 w-full cursor-pointer" : renderAs === "button" - ? "w-full cursor-pointer rounded-md border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500" + ? "w-full rounded-md border px-2 py-1 text-xs shadow-sm hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 duration-300 cursor-pointer" : "" } ${error ? "border-red-500 bg-red-200" : ""} bg-transparent caret-transparent`} isClearable={isClearable}