From f5f90dab69ac210979363990d385dcc7f4814ede Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Date: Thu, 30 Mar 2023 16:00:48 +0530 Subject: [PATCH] fix : module and cycle invalid date fix (#605) * fix: module and cycle modal invalid date validation * fix: cycle and module sidebar invalid date --- apps/app/components/cycles/form.tsx | 46 +++++++++++----- apps/app/components/cycles/sidebar.tsx | 71 +++++++++++++++++-------- apps/app/components/modules/form.tsx | 51 ++++++++++++++++-- apps/app/components/modules/sidebar.tsx | 30 ++++++----- apps/app/helpers/date-time.helper.ts | 2 + 5 files changed, 148 insertions(+), 52 deletions(-) diff --git a/apps/app/components/cycles/form.tsx b/apps/app/components/cycles/form.tsx index 8c09f9934..9bff6f439 100644 --- a/apps/app/components/cycles/form.tsx +++ b/apps/app/components/cycles/form.tsx @@ -11,7 +11,7 @@ import useToast from "hooks/use-toast"; // ui import { CustomDatePicker, Input, PrimaryButton, SecondaryButton, TextArea } from "components/ui"; // helpers -import { getDateRangeStatus } from "helpers/date-time.helper"; +import { getDateRangeStatus, isDateRangeValid } from "helpers/date-time.helper"; // types import { ICycle } from "types"; @@ -141,12 +141,22 @@ export const CycleForm: React.FC = ({ handleFormSubmit, handleClose, stat value={value} onChange={(val) => { onChange(val); - val && watch("end_date") && cycleStatus != "current" - ? dateChecker({ - start_date: val, - end_date: watch("end_date"), - }) - : ""; + if (val && watch("end_date")) { + if (isDateRangeValid(val, `${watch("end_date")}`)) { + cycleStatus != "current" && + dateChecker({ + start_date: val, + end_date: watch("end_date"), + }); + } else { + setIsDateValid(false); + setToastAlert({ + type: "error", + title: "Error!", + message: "You have enter invalid date.", + }); + } + } }} error={errors.start_date ? true : false} /> @@ -169,12 +179,22 @@ export const CycleForm: React.FC = ({ handleFormSubmit, handleClose, stat value={value} onChange={(val) => { onChange(val); - val && watch("start_date") && cycleStatus != "current" - ? dateChecker({ - start_date: watch("start_date"), - end_date: val, - }) - : ""; + if (watch("start_date") && val) { + if (isDateRangeValid(`${watch("start_date")}`, val)) { + cycleStatus != "current" && + dateChecker({ + start_date: watch("start_date"), + end_date: val, + }); + } else { + setIsDateValid(false); + setToastAlert({ + type: "error", + title: "Error!", + message: "You have enter invalid date.", + }); + } + } }} error={errors.end_date ? true : false} /> diff --git a/apps/app/components/cycles/sidebar.tsx b/apps/app/components/cycles/sidebar.tsx index 981ea4666..3014f0dba 100644 --- a/apps/app/components/cycles/sidebar.tsx +++ b/apps/app/components/cycles/sidebar.tsx @@ -35,7 +35,7 @@ import { ExclamationIcon } from "components/icons"; // helpers import { capitalizeFirstLetter, copyTextToClipboard } from "helpers/string.helper"; import { groupBy } from "helpers/array.helper"; -import { renderDateFormat, renderShortDate } from "helpers/date-time.helper"; +import { isDateRangeValid, renderDateFormat, renderShortDate } from "helpers/date-time.helper"; // types import { ICycle, IIssue } from "types"; // fetch-keys @@ -55,8 +55,6 @@ export const CycleDetailsSidebar: React.FC = ({ isCompleted, }) => { const [cycleDeleteModal, setCycleDeleteModal] = useState(false); - const [startDateRange, setStartDateRange] = useState(new Date()); - const [endDateRange, setEndDateRange] = useState(null); const router = useRouter(); const { workspaceSlug, projectId, cycleId } = router.query; @@ -89,7 +87,7 @@ export const CycleDetailsSidebar: React.FC = ({ ...groupBy(issues ?? [], "state_detail.group"), }; - const { reset } = useForm({ + const { reset, watch } = useForm({ defaultValues, }); @@ -190,17 +188,32 @@ export const CycleDetailsSidebar: React.FC = ({ > { - submitChanges({ - start_date: renderDateFormat(date), - }); - setStartDateRange(date); + if (date && watch("end_date")) { + if ( + isDateRangeValid(renderDateFormat(date), `${watch("end_date")}`) + ) { + submitChanges({ + start_date: renderDateFormat(date), + }); + } else { + setToastAlert({ + type: "error", + title: "Error!", + message: "You have enter invalid date.", + }); + } + } }} selectsStart - startDate={startDateRange} - endDate={endDateRange} - maxDate={endDateRange} + startDate={new Date(`${watch("start_date")}`)} + endDate={new Date(`${watch("end_date")}`)} + maxDate={new Date(`${watch("end_date")}`)} shouldCloseOnSelect inline /> @@ -237,18 +250,34 @@ export const CycleDetailsSidebar: React.FC = ({ > { - submitChanges({ - end_date: renderDateFormat(date), - }); - setEndDateRange(date); + if (watch("start_date") && date) { + if ( + isDateRangeValid( + `${watch("start_date")}`, + renderDateFormat(date) + ) + ) { + submitChanges({ + end_date: renderDateFormat(date), + }); + } else { + setToastAlert({ + type: "error", + title: "Error!", + message: "You have enter invalid date.", + }); + } + } }} selectsEnd - startDate={startDateRange} - endDate={endDateRange} - // minDate={startDateRange} - + startDate={new Date(`${watch("start_date")}`)} + endDate={new Date(`${watch("end_date")}`)} + minDate={new Date(`${watch("start_date")}`)} + shouldCloseOnSelect inline /> diff --git a/apps/app/components/modules/form.tsx b/apps/app/components/modules/form.tsx index 3489d12af..aa646693b 100644 --- a/apps/app/components/modules/form.tsx +++ b/apps/app/components/modules/form.tsx @@ -1,11 +1,15 @@ -import { useEffect } from "react"; +import { useEffect, useState } from "react"; // react-hook-form import { Controller, useForm } from "react-hook-form"; +// hooks +import useToast from "hooks/use-toast"; // components import { ModuleLeadSelect, ModuleMembersSelect, ModuleStatusSelect } from "components/modules"; // ui import { CustomDatePicker, Input, PrimaryButton, SecondaryButton, TextArea } from "components/ui"; +// helper +import { isDateRangeValid } from "helpers/date-time.helper"; // types import { IModule } from "types"; @@ -25,10 +29,13 @@ const defaultValues: Partial = { }; export const ModuleForm: React.FC = ({ handleFormSubmit, handleClose, status, data }) => { + const [isDateValid, setIsDateValid] = useState(true); + const { setToastAlert } = useToast(); const { register, formState: { errors, isSubmitting }, handleSubmit, + watch, control, reset, } = useForm({ @@ -94,7 +101,25 @@ export const ModuleForm: React.FC = ({ handleFormSubmit, handleClose, sta control={control} name="start_date" render={({ field: { value, onChange } }) => ( - + { + onChange(val); + if (val && watch("target_date")) { + if (isDateRangeValid(val, `${watch("target_date")}`)) { + setIsDateValid(true); + } else { + setIsDateValid(false); + setToastAlert({ + type: "error", + title: "Error!", + message: "You have enter invalid date.", + }); + } + } + }} + /> )} /> @@ -106,7 +131,25 @@ export const ModuleForm: React.FC = ({ handleFormSubmit, handleClose, sta control={control} name="target_date" render={({ field: { value, onChange } }) => ( - + { + onChange(val); + if (watch("start_date") && val) { + if (isDateRangeValid(`${watch("start_date")}`, val)) { + setIsDateValid(true); + } else { + setIsDateValid(false); + setToastAlert({ + type: "error", + title: "Error!", + message: "You have enter invalid date.", + }); + } + } + }} + /> )} /> @@ -133,7 +176,7 @@ export const ModuleForm: React.FC = ({ handleFormSubmit, handleClose, sta
Cancel - + {status ? isSubmitting ? "Updating Module..." diff --git a/apps/app/components/modules/sidebar.tsx b/apps/app/components/modules/sidebar.tsx index 839030740..b70266587 100644 --- a/apps/app/components/modules/sidebar.tsx +++ b/apps/app/components/modules/sidebar.tsx @@ -32,7 +32,7 @@ import { CustomMenu, CustomSelect, Loader, ProgressBar } from "components/ui"; // icon import { ExclamationIcon } from "components/icons"; // helpers -import { renderDateFormat, renderShortDate } from "helpers/date-time.helper"; +import { isDateRangeValid, renderDateFormat, renderShortDate } from "helpers/date-time.helper"; import { capitalizeFirstLetter, copyTextToClipboard } from "helpers/string.helper"; import { groupBy } from "helpers/array.helper"; // types @@ -67,8 +67,6 @@ export const ModuleDetailsSidebar: React.FC = ({ }) => { const [moduleDeleteModal, setModuleDeleteModal] = useState(false); const [moduleLinkModal, setModuleLinkModal] = useState(false); - const [startDateRange, setStartDateRange] = useState(new Date()); - const [endDateRange, setEndDateRange] = useState(null); const router = useRouter(); const { workspaceSlug, projectId, moduleId } = router.query; @@ -257,17 +255,20 @@ export const ModuleDetailsSidebar: React.FC = ({ > { submitChanges({ start_date: renderDateFormat(date), }); - setStartDateRange(date); }} selectsStart - startDate={startDateRange} - endDate={endDateRange} - maxDate={endDateRange} + startDate={new Date(`${watch("start_date")}`)} + endDate={new Date(`${watch("target_date")}`)} + maxDate={new Date(`${watch("target_date")}`)} shouldCloseOnSelect inline /> @@ -303,18 +304,19 @@ export const ModuleDetailsSidebar: React.FC = ({ > { submitChanges({ target_date: renderDateFormat(date), }); - setEndDateRange(date); }} selectsEnd - startDate={startDateRange} - endDate={endDateRange} - // minDate={startDateRange} - + startDate={new Date(`${watch("start_date")}`)} + endDate={new Date(`${watch("target_date")}`)} + minDate={new Date(`${watch("start_date")}`)} + shouldCloseOnSelect inline /> diff --git a/apps/app/helpers/date-time.helper.ts b/apps/app/helpers/date-time.helper.ts index cb16cd071..820487d47 100644 --- a/apps/app/helpers/date-time.helper.ts +++ b/apps/app/helpers/date-time.helper.ts @@ -169,3 +169,5 @@ export const renderShortTime = (date: string | Date) => { return hours + ":" + minutes; }; + +export const isDateRangeValid = (startDate: string, endDate: string)=> new Date(startDate) < new Date(endDate); \ No newline at end of file