From 563921d0cf0b327b28c1e65e5c6eee29c295e0fa Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal Date: Thu, 2 Feb 2023 18:33:46 +0530 Subject: [PATCH] refactor: datepicker code --- apps/app/components/cycles/modal.tsx | 3 +- apps/app/components/issues/modal.tsx | 1 - apps/app/components/modules/modal.tsx | 2 - apps/app/components/ui/datepicker.tsx | 13 ++----- apps/app/helpers/date-time.helper.ts | 4 +- .../projects/[projectId]/issues/[issueId].tsx | 38 +++++++++---------- 6 files changed, 26 insertions(+), 35 deletions(-) diff --git a/apps/app/components/cycles/modal.tsx b/apps/app/components/cycles/modal.tsx index 9a53a2949..76e1c5ad1 100644 --- a/apps/app/components/cycles/modal.tsx +++ b/apps/app/components/cycles/modal.tsx @@ -61,9 +61,8 @@ export const CycleModal: React.FC = (props) => { if (workspaceSlug && projectId) { const payload = { ...formValues, - start_date: formValues.start_date ? renderDateFormat(formValues.start_date) : null, - end_date: formValues.end_date ? renderDateFormat(formValues.end_date) : null, }; + if (initialData) { updateCycle(initialData.id, payload); } else { diff --git a/apps/app/components/issues/modal.tsx b/apps/app/components/issues/modal.tsx index 09ad6446b..cec62c17f 100644 --- a/apps/app/components/issues/modal.tsx +++ b/apps/app/components/issues/modal.tsx @@ -208,7 +208,6 @@ export const CreateUpdateIssueModal: React.FC = ({ const payload: Partial = { ...formData, - target_date: formData.target_date ? renderDateFormat(formData.target_date ?? "") : null, }; if (!data) await createIssue(payload); diff --git a/apps/app/components/modules/modal.tsx b/apps/app/components/modules/modal.tsx index 88206ab7c..22f9a7e49 100644 --- a/apps/app/components/modules/modal.tsx +++ b/apps/app/components/modules/modal.tsx @@ -111,8 +111,6 @@ export const CreateUpdateModuleModal: React.FC = ({ isOpen, setIsOpen, da const payload: Partial = { ...formData, - start_date: formData.start_date ? renderDateFormat(formData.start_date ?? "") : null, - target_date: formData.target_date ? renderDateFormat(formData.target_date ?? "") : null, }; if (!data) await createModule(payload); diff --git a/apps/app/components/ui/datepicker.tsx b/apps/app/components/ui/datepicker.tsx index 9a4494ee4..069543189 100644 --- a/apps/app/components/ui/datepicker.tsx +++ b/apps/app/components/ui/datepicker.tsx @@ -1,6 +1,8 @@ // react-datepicker import DatePicker from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css"; +// helpers +import { renderDateFormat } from "helpers/date-time.helper"; type Props = { renderAs?: "input" | "button"; @@ -30,16 +32,7 @@ export const CustomDatePicker: React.FC = ({ selected={value ? new Date(value) : null} onChange={(val) => { if (!val) onChange(null); - else { - const year = val.getFullYear(); - let month: number | string = val.getMonth() + 1; - let date: number | string = val.getDate(); - - if (date < 10) date = `0${date}`; - if (month < 10) month = `0${month}`; - - onChange(`${year}-${month}-${date}`); - } + else onChange(renderDateFormat(val)); }} className={`${className} ${ renderAs === "input" diff --git a/apps/app/helpers/date-time.helper.ts b/apps/app/helpers/date-time.helper.ts index e84a81390..fa490d5d9 100644 --- a/apps/app/helpers/date-time.helper.ts +++ b/apps/app/helpers/date-time.helper.ts @@ -1,4 +1,6 @@ -export const renderDateFormat = (date: string | Date) => { +export const renderDateFormat = (date: string | Date | null) => { + if (!date) return "N/A"; + var d = new Date(date), month = "" + (d.getMonth() + 1), day = "" + d.getDate(), diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx index 12e3e4c93..cbd3eef69 100644 --- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx +++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx @@ -108,25 +108,6 @@ const IssueDetailsPage: NextPage = (props) => { defaultValues, }); - useEffect(() => { - if (issueDetails) { - mutateIssueActivities(); - reset({ - ...issueDetails, - blockers_list: - issueDetails.blockers_list ?? - issueDetails.blocker_issues?.map((issue) => issue.blocker_issue_detail?.id), - blocked_list: - issueDetails.blocked_list ?? - issueDetails.blocked_issues?.map((issue) => issue.blocked_issue_detail?.id), - assignees_list: - issueDetails.assignees_list ?? issueDetails.assignee_details?.map((user) => user.id), - labels_list: issueDetails.labels_list ?? issueDetails.labels, - labels: issueDetails.labels_list ?? issueDetails.labels, - }); - } - }, [issueDetails, reset, mutateIssueActivities]); - const submitChanges = useCallback( (formData: Partial) => { if (!workspaceSlug || !projectId || !issueId) return; @@ -186,6 +167,25 @@ const IssueDetailsPage: NextPage = (props) => { }); }; + useEffect(() => { + if (issueDetails) { + mutateIssueActivities(); + reset({ + ...issueDetails, + blockers_list: + issueDetails.blockers_list ?? + issueDetails.blocker_issues?.map((issue) => issue.blocker_issue_detail?.id), + blocked_list: + issueDetails.blocked_list ?? + issueDetails.blocked_issues?.map((issue) => issue.blocked_issue_detail?.id), + assignees_list: + issueDetails.assignees_list ?? issueDetails.assignee_details?.map((user) => user.id), + labels_list: issueDetails.labels_list ?? issueDetails.labels, + labels: issueDetails.labels_list ?? issueDetails.labels, + }); + } + }, [issueDetails, reset, mutateIssueActivities]); + const isNotAllowed = props.isGuest || props.isViewer; return (