refactor: standardized date format throughout the platform (#1461)

2024-06-14 14:31:34 +00:00 · 2023-07-04 18:19:19 +05:30 · 2023-07-04 18:19:19 +05:30 · 4ede04d72f
commit 4ede04d72f
parent 5a6fd0efdb
14 changed files with 48 additions and 35 deletions
--- a/apps/app/components/core/feeds.tsx
+++ b/apps/app/components/core/feeds.tsx
@ -19,7 +19,7 @@ import {
 } from "@heroicons/react/24/outline";
 import { BlockedIcon, BlockerIcon, CyclesIcon, TagIcon, UserGroupIcon } from "components/icons";
 // helpers
-import { renderShortNumericDateFormat, timeAgo } from "helpers/date-time.helper";
+import { renderShortDateWithYearFormat, timeAgo } from "helpers/date-time.helper";
 import { addSpaceIfCamelCase } from "helpers/string.helper";
 // types
 import RemirrorRichTextEditor from "components/rich-text-editor";
@ -187,7 +187,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
            activity.new_value && activity.new_value !== ""
              ? activity.new_value
              : activity.old_value;
-          value = renderShortNumericDateFormat(date as string);
+          value = renderShortDateWithYearFormat(date as string);
        } else if (activity.field === "description") {
          value = "description";
        } else if (activity.field === "attachment") {
--- a/apps/app/components/cycles/sidebar.tsx
+++ b/apps/app/components/cycles/sidebar.tsx
@ -35,7 +35,7 @@ import { capitalizeFirstLetter, copyTextToClipboard } from "helpers/string.helpe
 import {
  isDateGreaterThanToday,
  renderDateFormat,
-  renderShortDate,
+  renderShortDateWithYearFormat,
 } from "helpers/date-time.helper";
 // types
 import { ICurrentUserResponse, ICycle } from "types";
@ -315,7 +315,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                        >
                          <CalendarDaysIcon className="h-3 w-3" />
                          <span>
-                            {renderShortDate(
+                            {renderShortDateWithYearFormat(
                              new Date(
                                `${watch("start_date") ? watch("start_date") : cycle?.start_date}`
                              ),
@ -366,7 +366,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                          <CalendarDaysIcon className="h-3 w-3" />

                          <span>
-                            {renderShortDate(
+                            {renderShortDateWithYearFormat(
                              new Date(
                                `${watch("end_date") ? watch("end_date") : cycle?.end_date}`
                              ),
--- a/apps/app/components/inbox/inbox-issue-card.tsx
+++ b/apps/app/components/inbox/inbox-issue-card.tsx
@ -14,7 +14,7 @@ import {
  XCircleIcon,
 } from "@heroicons/react/24/outline";
 // helpers
-import { renderShortNumericDateFormat } from "helpers/date-time.helper";
+import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 // types
 import type { IInboxIssue } from "types";
 // constants
@ -72,12 +72,12 @@ export const InboxIssueCard: React.FC<Props> = (props) => {
              </div>
            </Tooltip>
            <Tooltip
-              tooltipHeading="Created at"
-              tooltipContent={`${renderShortNumericDateFormat(issue.created_at ?? "")}`}
+              tooltipHeading="Created on"
+              tooltipContent={`${renderShortDateWithYearFormat(issue.created_at ?? "")}`}
            >
              <div className="flex items-center gap-1 rounded border border-brand-base shadow-sm text-xs px-2 py-[0.19rem] text-brand-secondary">
                <CalendarDaysIcon className="h-3.5 w-3.5" />
-                <span>{renderShortNumericDateFormat(issue.created_at ?? "")}</span>
+                <span>{renderShortDateWithYearFormat(issue.created_at ?? "")}</span>
              </div>
            </Tooltip>
          </div>
--- a/apps/app/components/inbox/inbox-main-content.tsx
+++ b/apps/app/components/inbox/inbox-main-content.tsx
@ -33,7 +33,7 @@ import {
  XCircleIcon,
 } from "@heroicons/react/24/outline";
 // helpers
-import { renderShortNumericDateFormat } from "helpers/date-time.helper";
+import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 // types
 import type { IInboxIssue, IIssue } from "types";
 // fetch-keys
@ -252,13 +252,17 @@ export const InboxMainContent: React.FC = () => {
                  {new Date(issueDetails.issue_inbox[0].snoozed_till ?? "") < new Date() ? (
                    <p>
                      This issue was snoozed till{" "}
-                      {renderShortNumericDateFormat(issueDetails.issue_inbox[0].snoozed_till ?? "")}
+                      {renderShortDateWithYearFormat(
+                        issueDetails.issue_inbox[0].snoozed_till ?? ""
+                      )}
                      .
                    </p>
                  ) : (
                    <p>
                      This issue has been snoozed till{" "}
-                      {renderShortNumericDateFormat(issueDetails.issue_inbox[0].snoozed_till ?? "")}
+                      {renderShortDateWithYearFormat(
+                        issueDetails.issue_inbox[0].snoozed_till ?? ""
+                      )}
                      .
                    </p>
                  )}
--- a/apps/app/components/issues/activity.tsx
+++ b/apps/app/components/issues/activity.tsx
@ -26,7 +26,7 @@ import {
 } from "@heroicons/react/24/outline";
 import { BlockedIcon, BlockerIcon, CyclesIcon, TagIcon, UserGroupIcon } from "components/icons";
 // helpers
-import { renderShortNumericDateFormat, timeAgo } from "helpers/date-time.helper";
+import { renderShortDateWithYearFormat, timeAgo } from "helpers/date-time.helper";
 import { addSpaceIfCamelCase } from "helpers/string.helper";
 // types
 import { ICurrentUserResponse, IIssueComment, IIssueLabels } from "types";
@ -299,7 +299,7 @@ export const IssueActivitySection: React.FC<Props> = ({ issueId, user }) => {
              activityItem.new_value && activityItem.new_value !== ""
                ? activityItem.new_value
                : activityItem.old_value;
-            value = renderShortNumericDateFormat(date as string);
+            value = renderShortDateWithYearFormat(date as string);
          } else if (activityItem.field === "description") {
            value = "description";
          } else if (activityItem.field === "attachment") {
--- a/apps/app/components/issues/select/date.tsx
+++ b/apps/app/components/issues/select/date.tsx
@ -5,7 +5,7 @@ import { CalendarDaysIcon, XMarkIcon } from "@heroicons/react/24/outline";
 // react-datepicker
 import DatePicker from "react-datepicker";
 // import "react-datepicker/dist/react-datepicker.css";
-import { renderDateFormat } from "helpers/date-time.helper";
+import { renderDateFormat, renderShortDateWithYearFormat } from "helpers/date-time.helper";

 type Props = {
  value: string | null;
@ -20,7 +20,7 @@ export const IssueDateSelect: React.FC<Props> = ({ value, onChange }) => (
          <span className="flex items-center justify-center gap-2 px-2 py-1 text-xs text-brand-secondary">
            {value ? (
              <>
-                <span className="text-brand-base">{value}</span>
+                <span className="text-brand-base">{renderShortDateWithYearFormat(value)}</span>
                <button onClick={() => onChange(null)}>
                  <XMarkIcon className="h-3 w-3" />
                </button>
--- a/apps/app/components/issues/view-select/due-date.tsx
+++ b/apps/app/components/issues/view-select/due-date.tsx
@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 // ui
 import { CustomDatePicker, Tooltip } from "components/ui";
 // helpers
-import { findHowManyDaysLeft } from "helpers/date-time.helper";
+import { findHowManyDaysLeft, renderShortDateWithYearFormat } from "helpers/date-time.helper";
 // services
 import trackEventServices from "services/track-event.service";
 // types
@ -32,7 +32,9 @@ export const ViewDueDateSelect: React.FC<Props> = ({
  return (
    <Tooltip
      tooltipHeading="Due Date"
-      tooltipContent={issue.target_date ?? "N/A"}
+      tooltipContent={
+        issue.target_date ? renderShortDateWithYearFormat(issue.target_date) ?? "N/A" : "N/A"
+      }
      position={tooltipPosition}
    >
      <div
--- a/apps/app/components/modules/sidebar.tsx
+++ b/apps/app/components/modules/sidebar.tsx
@ -34,7 +34,7 @@ import { CustomMenu, CustomSelect, Loader, ProgressBar } from "components/ui";
 import { ExclamationIcon } from "components/icons";
 import { LinkIcon } from "@heroicons/react/20/solid";
 // helpers
-import { renderDateFormat, renderShortDate } from "helpers/date-time.helper";
+import { renderDateFormat, renderShortDateWithYearFormat } from "helpers/date-time.helper";
 import { capitalizeFirstLetter, copyTextToClipboard } from "helpers/string.helper";
 // types
 import { ICurrentUserResponse, IIssue, IModule, ModuleLink } from "types";
@ -228,7 +228,10 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                        >
                          <CalendarDaysIcon className="h-3 w-3" />
                          <span>
-                            {renderShortDate(new Date(`${module.start_date}`), "Start date")}
+                            {renderShortDateWithYearFormat(
+                              new Date(`${module.start_date}`),
+                              "Start date"
+                            )}
                          </span>
                        </Popover.Button>

@ -279,7 +282,10 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                          <CalendarDaysIcon className="h-3 w-3 " />

                          <span>
-                            {renderShortDate(new Date(`${module?.target_date}`), "End date")}
+                            {renderShortDateWithYearFormat(
+                              new Date(`${module?.target_date}`),
+                              "End date"
+                            )}
                          </span>
                        </Popover.Button>

--- a/apps/app/components/project/single-project-card.tsx
+++ b/apps/app/components/project/single-project-card.tsx
@ -22,7 +22,7 @@ import {
  TrashIcon,
 } from "@heroicons/react/24/outline";
 // helpers
-import { renderShortNumericDateFormat } from "helpers/date-time.helper";
+import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 import { copyTextToClipboard, truncateText } from "helpers/string.helper";
 // types
 import type { IFavoriteProject, IProject } from "types";
@ -202,13 +202,13 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
            </Link>
            <div className="flex h-full items-end justify-between">
              <Tooltip
-                tooltipContent={`Created at ${renderShortNumericDateFormat(project.created_at)}`}
+                tooltipContent={`Created at ${renderShortDateWithYearFormat(project.created_at)}`}
                position="bottom"
                theme="dark"
              >
                <div className="flex cursor-default items-center gap-1.5 text-xs">
                  <CalendarDaysIcon className="h-4 w-4" />
-                  {renderShortNumericDateFormat(project.created_at)}
+                  {renderShortDateWithYearFormat(project.created_at)}
                </div>
              </Tooltip>
              {hasJoined ? (
--- a/apps/app/components/ui/date.tsx
+++ b/apps/app/components/ui/date.tsx
@ -5,7 +5,7 @@ import { CalendarDaysIcon, XMarkIcon } from "@heroicons/react/24/outline";
 // react-datepicker
 import DatePicker from "react-datepicker";
 // import "react-datepicker/dist/react-datepicker.css";
-import { renderDateFormat } from "helpers/date-time.helper";
+import { renderDateFormat, renderShortDateWithYearFormat } from "helpers/date-time.helper";

 type Props = {
  value: string | null;
@ -21,7 +21,7 @@ export const DateSelect: React.FC<Props> = ({ value, onChange, label }) => (
          <span className="flex items-center justify-center gap-2 px-2 py-1 text-xs text-brand-secondary">
            {value ? (
              <>
-                <span className="text-brand-base">{value}</span>
+                <span className="text-brand-base">{renderShortDateWithYearFormat(value)}</span>
                <button onClick={() => onChange(null)}>
                  <XMarkIcon className="h-3 w-3" />
                </button>
--- a/apps/app/components/ui/datepicker.tsx
+++ b/apps/app/components/ui/datepicker.tsx
@ -38,9 +38,9 @@ export const CustomDatePicker: React.FC<Props> = ({
    }}
    className={`${
      renderAs === "input"
-        ? "block px-3 py-2 text-sm focus:outline-none"
+        ? "block px-2 py-2 text-sm focus:outline-none"
        : renderAs === "button"
-        ? `px-3 py-1 text-xs shadow-sm ${
+        ? `px-2 py-1 text-xs shadow-sm ${
            disabled ? "" : "hover:bg-brand-surface-2"
          } duration-300 focus:border-brand-accent focus:outline-none focus:ring-1 focus:ring-brand-accent`
        : ""
@ -49,7 +49,7 @@ export const CustomDatePicker: React.FC<Props> = ({
    } ${
      noBorder ? "" : "border border-brand-base"
    } w-full rounded-md bg-transparent caret-transparent ${className}`}
-    dateFormat="dd-MM-yyyy"
+    dateFormat="MMM dd, yyyy"
    isClearable={isClearable}
    disabled={disabled}
  />
--- a/apps/app/components/views/single-view-item.tsx
+++ b/apps/app/components/views/single-view-item.tsx
@ -18,7 +18,7 @@ import { VIEWS_LIST } from "constants/fetch-keys";
 import useToast from "hooks/use-toast";
 // helpers
 import { truncateText } from "helpers/string.helper";
-import { renderShortDate, renderShortTime } from "helpers/date-time.helper";
+import { renderShortDateWithYearFormat, renderShortTime } from "helpers/date-time.helper";

 type Props = {
  view: IView;
@ -107,7 +107,7 @@ export const SingleViewItem: React.FC<Props> = ({ view, handleEditView, handleDe
                  <Tooltip
                    tooltipContent={`Last updated at ${renderShortTime(
                      view.updated_at
-                    )} ${renderShortDate(view.updated_at)}`}
+                    )} ${renderShortDateWithYearFormat(view.updated_at)}`}
                  >
                    <p className="text-sm text-brand-secondary">
                      {renderShortTime(view.updated_at)}
--- a/apps/app/components/workspace/activity-graph.tsx
+++ b/apps/app/components/workspace/activity-graph.tsx
@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from "react";
 // ui
 import { Tooltip } from "components/ui";
 // helpers
-import { renderDateFormat, renderShortNumericDateFormat } from "helpers/date-time.helper";
+import { renderDateFormat, renderShortDateWithYearFormat } from "helpers/date-time.helper";
 // types
 import { IUserActivity } from "types";
 // constants
@ -109,7 +109,7 @@ export const ActivityGraph: React.FC<Props> = ({ activities }) => {
                  key={`${date}-${index}`}
                  tooltipContent={`${
                    isActive ? isActive.activity_count : 0
-                  } activities on ${renderShortNumericDateFormat(date)}`}
+                  } activities on ${renderShortDateWithYearFormat(date)}`}
                  theme="dark"
                >
                  <div
--- a/apps/app/helpers/date-time.helper.ts
+++ b/apps/app/helpers/date-time.helper.ts
@ -114,7 +114,7 @@ export const getDateRangeStatus = (
  }
 };

-export const renderShortDateWithYearFormat = (date: string | Date) => {
+export const renderShortDateWithYearFormat = (date: string | Date, placeholder?: string) => {
  if (!date || date === "") return null;

  date = new Date(date);
@ -136,7 +136,8 @@ export const renderShortDateWithYearFormat = (date: string | Date) => {
  const day = date.getDate();
  const month = months[date.getMonth()];
  const year = date.getFullYear();
-  return isNaN(date.getTime()) ? "N/A" : ` ${month} ${day}, ${year}`;
+
+  return isNaN(date.getTime()) ? placeholder ?? "N/A" : ` ${month} ${day}, ${year}`;
 };

 export const renderShortDate = (date: string | Date, placeholder?: string) => {