refactor: datepicker code

apps/app/components/cycles/modal.tsx

@@ -61,9 +61,8 @@ export const CycleModal: React.FC<CycleModalProps> = (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 {

apps/app/components/issues/modal.tsx

@@ -208,7 +208,6 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
 
     const payload: Partial<IIssue> = {
       ...formData,
-      target_date: formData.target_date ? renderDateFormat(formData.target_date ?? "") : null,
     };
 
     if (!data) await createIssue(payload);

apps/app/components/modules/modal.tsx

@@ -111,8 +111,6 @@ export const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, da
 
     const payload: Partial<IModule> = {
       ...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);

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<Props> = ({
     selected={value ? new Date(value) : null}
     onChange={(val) => {
       if (!val) onChange(null);
-      else {
+      else onChange(renderDateFormat(val));
-        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}`);
-      }
     }}
     className={`${className} ${
       renderAs === "input"

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(),

apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx

@@ -108,25 +108,6 @@ const IssueDetailsPage: NextPage<UserAuth> = (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<IIssue>) => {
       if (!workspaceSlug || !projectId || !issueId) return;
@@ -186,6 +167,25 @@ const IssueDetailsPage: NextPage<UserAuth> = (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 (