diff --git a/web/components/common/product-updates-modal.tsx b/web/components/common/product-updates-modal.tsx index b09a44db0..ada4e9735 100644 --- a/web/components/common/product-updates-modal.tsx +++ b/web/components/common/product-updates-modal.tsx @@ -12,7 +12,7 @@ import { Loader } from "@plane/ui"; // icons import { X } from "lucide-react"; // helpers -import { renderLongDateFormat } from "helpers/date-time.helper"; +import { renderFormattedDate } from "helpers/date-time.helper"; type Props = { isOpen: boolean; @@ -69,7 +69,7 @@ export const ProductUpdatesModal: React.FC = ({ isOpen, setIsOpen }) => { {item.tag_name} - {renderLongDateFormat(item.published_at)} + {renderFormattedDate(item.published_at)} {index === 0 && ( New diff --git a/web/components/core/activity.tsx b/web/components/core/activity.tsx index ae253ac64..832ce6901 100644 --- a/web/components/core/activity.tsx +++ b/web/components/core/activity.tsx @@ -23,7 +23,7 @@ import { UsersIcon, } from "lucide-react"; // helpers -import { renderShortDateWithYearFormat } from "helpers/date-time.helper"; +import { renderFormattedDate } from "helpers/date-time.helper"; import { capitalizeFirstLetter } from "helpers/string.helper"; // types import { IIssueActivity } from "types"; @@ -607,9 +607,7 @@ const activityDetails: { return ( <> set the start date to{" "} - - {renderShortDateWithYearFormat(activity.new_value)} - + {renderFormattedDate(activity.new_value)} {showIssue && ( <> {" "} @@ -656,9 +654,7 @@ const activityDetails: { return ( <> set the due date to{" "} - - {renderShortDateWithYearFormat(activity.new_value)} - + {renderFormattedDate(activity.new_value)} {showIssue && ( <> {" "} diff --git a/web/components/core/filters/date-filter-modal.tsx b/web/components/core/filters/date-filter-modal.tsx index cd5f7a722..96200924a 100644 --- a/web/components/core/filters/date-filter-modal.tsx +++ b/web/components/core/filters/date-filter-modal.tsx @@ -10,7 +10,7 @@ import { Button } from "@plane/ui"; // icons import { X } from "lucide-react"; // helpers -import { renderDateFormat, renderShortDateWithYearFormat } from "helpers/date-time.helper"; +import { renderFormattedDate, renderFormattedPayloadDate } from "helpers/date-time.helper"; type Props = { title: string; @@ -39,8 +39,9 @@ export const DateFilterModal: React.FC = ({ title, handleClose, isOpen, o const handleFormSubmit = (formData: TFormValues) => { const { filterType, date1, date2 } = formData; - if (filterType === "range") onSelect([`${renderDateFormat(date1)};after`, `${renderDateFormat(date2)};before`]); - else onSelect([`${renderDateFormat(date1)};${filterType}`]); + if (filterType === "range") + onSelect([`${renderFormattedPayloadDate(date1)};after`, `${renderFormattedPayloadDate(date2)};before`]); + else onSelect([`${renderFormattedPayloadDate(date1)};${filterType}`]); handleClose(); }; @@ -121,9 +122,9 @@ export const DateFilterModal: React.FC = ({ title, handleClose, isOpen, o {watch("filterType") === "range" && (
After: - {renderShortDateWithYearFormat(watch("date1"))} + {renderFormattedDate(watch("date1"))} Before: - {!isInvalid && {renderShortDateWithYearFormat(watch("date2"))}} + {!isInvalid && {renderFormattedDate(watch("date2"))}}
)}
diff --git a/web/components/core/sidebar/progress-chart.tsx b/web/components/core/sidebar/progress-chart.tsx index 8108b87af..f2347352d 100644 --- a/web/components/core/sidebar/progress-chart.tsx +++ b/web/components/core/sidebar/progress-chart.tsx @@ -1,9 +1,9 @@ import React from "react"; - +import { eachDayOfInterval } from "date-fns"; // ui import { LineGraph } from "components/ui"; // helpers -import { getDatesInRange, renderShortNumericDateFormat } from "helpers/date-time.helper"; +import { renderShortNumericDateFormat } from "helpers/date-time.helper"; //types import { TCompletionChartDistribution } from "types"; @@ -47,7 +47,7 @@ const ProgressChart: React.FC = ({ distribution, startDate, endDate, tota })); const generateXAxisTickValues = () => { - const dates = getDatesInRange(startDate, endDate); + const dates = eachDayOfInterval({ start: new Date(startDate), end: new Date(endDate) }); const maxDates = 4; const totalDates = dates.length; diff --git a/web/components/cycles/active-cycle-details.tsx b/web/components/cycles/active-cycle-details.tsx index 7c536f09a..0efd686a2 100644 --- a/web/components/cycles/active-cycle-details.tsx +++ b/web/components/cycles/active-cycle-details.tsx @@ -28,7 +28,7 @@ import { ViewIssueLabel } from "components/issues"; // icons import { AlarmClock, AlertTriangle, ArrowRight, CalendarDays, Star, Target } from "lucide-react"; // helpers -import { getDateRangeStatus, renderShortDateWithYearFormat, findHowManyDaysLeft } from "helpers/date-time.helper"; +import { getDateRangeStatus, findHowManyDaysLeft, renderFormattedDate } from "helpers/date-time.helper"; import { truncateText } from "helpers/string.helper"; // types import { ICycle } from "types"; @@ -267,12 +267,12 @@ export const ActiveCycleDetails: React.FC = observer((props
- {renderShortDateWithYearFormat(startDate)} + {renderFormattedDate(startDate)}
- {renderShortDateWithYearFormat(endDate)} + {renderFormattedDate(endDate)}
diff --git a/web/components/cycles/sidebar.tsx b/web/components/cycles/sidebar.tsx index 2074422f9..0cb7b0e42 100644 --- a/web/components/cycles/sidebar.tsx +++ b/web/components/cycles/sidebar.tsx @@ -24,7 +24,7 @@ import { findHowManyDaysLeft, getDateRangeStatus, isDateGreaterThanToday, - renderDateFormat, + renderFormattedPayloadDate, renderShortDate, renderShortMonthDate, } from "helpers/date-time.helper"; @@ -128,8 +128,8 @@ export const CycleDetailsSidebar: React.FC = observer((props) => { if (isDateValidForExistingCycle) { submitChanges({ - start_date: renderDateFormat(`${watch("start_date")}`), - end_date: renderDateFormat(`${watch("end_date")}`), + start_date: renderFormattedPayloadDate(`${watch("start_date")}`), + end_date: renderFormattedPayloadDate(`${watch("end_date")}`), }); setToastAlert({ type: "success", @@ -155,8 +155,8 @@ export const CycleDetailsSidebar: React.FC = observer((props) => { if (isDateValid) { submitChanges({ - start_date: renderDateFormat(`${watch("start_date")}`), - end_date: renderDateFormat(`${watch("end_date")}`), + start_date: renderFormattedPayloadDate(`${watch("start_date")}`), + end_date: renderFormattedPayloadDate(`${watch("end_date")}`), }); setToastAlert({ type: "success", @@ -196,8 +196,8 @@ export const CycleDetailsSidebar: React.FC = observer((props) => { if (isDateValidForExistingCycle) { submitChanges({ - start_date: renderDateFormat(`${watch("start_date")}`), - end_date: renderDateFormat(`${watch("end_date")}`), + start_date: renderFormattedPayloadDate(`${watch("start_date")}`), + end_date: renderFormattedPayloadDate(`${watch("end_date")}`), }); setToastAlert({ type: "success", @@ -223,8 +223,8 @@ export const CycleDetailsSidebar: React.FC = observer((props) => { if (isDateValid) { submitChanges({ - start_date: renderDateFormat(`${watch("start_date")}`), - end_date: renderDateFormat(`${watch("end_date")}`), + start_date: renderFormattedPayloadDate(`${watch("start_date")}`), + end_date: renderFormattedPayloadDate(`${watch("end_date")}`), }); setToastAlert({ type: "success", diff --git a/web/components/exporter/single-export.tsx b/web/components/exporter/single-export.tsx index d8e05ac26..a02708644 100644 --- a/web/components/exporter/single-export.tsx +++ b/web/components/exporter/single-export.tsx @@ -2,7 +2,7 @@ import { useState, FC } from "react"; // ui import { Button } from "@plane/ui"; // helpers -import { renderShortDateWithYearFormat } from "helpers/date-time.helper"; +import { renderFormattedDate } from "helpers/date-time.helper"; // types import { IExportData } from "types"; @@ -50,7 +50,7 @@ export const SingleExport: FC = ({ service, refreshing }) => {
- {renderShortDateWithYearFormat(service.created_at)}| + {renderFormattedDate(service.created_at)}| Exported by {service?.initiated_by_detail?.display_name}
diff --git a/web/components/gantt-chart/blocks/blocks-display.tsx b/web/components/gantt-chart/blocks/blocks-display.tsx index 586b0d5cc..b908aae45 100644 --- a/web/components/gantt-chart/blocks/blocks-display.tsx +++ b/web/components/gantt-chart/blocks/blocks-display.tsx @@ -4,7 +4,7 @@ import { FC } from "react"; import { useChart } from "../hooks"; // helpers import { ChartDraggable } from "../helpers/draggable"; -import { renderDateFormat } from "helpers/date-time.helper"; +import { renderFormattedPayloadDate } from "helpers/date-time.helper"; // types import { IBlockUpdateData, IGanttBlock } from "../types"; @@ -60,8 +60,8 @@ export const GanttChartBlocks: FC<{ // call the block update handler with the updated dates blockUpdateHandler(block.data, { - start_date: renderDateFormat(updatedStartDate), - target_date: renderDateFormat(updatedTargetDate), + start_date: renderFormattedPayloadDate(updatedStartDate) ?? undefined, + target_date: renderFormattedPayloadDate(updatedTargetDate) ?? undefined, }); }; diff --git a/web/components/inbox/issue-card.tsx b/web/components/inbox/issue-card.tsx index 24f267506..f4a444524 100644 --- a/web/components/inbox/issue-card.tsx +++ b/web/components/inbox/issue-card.tsx @@ -6,7 +6,7 @@ import { Tooltip, PriorityIcon } from "@plane/ui"; // icons import { AlertTriangle, CalendarDays, CheckCircle2, Clock, Copy, XCircle } from "lucide-react"; // helpers -import { renderShortDateWithYearFormat } from "helpers/date-time.helper"; +import { renderFormattedDate } from "helpers/date-time.helper"; // types import { IInboxIssue } from "types"; // constants @@ -43,13 +43,10 @@ export const InboxIssueCard: React.FC = (props) => { - +
- {renderShortDateWithYearFormat(issue.created_at ?? "")} + {renderFormattedDate(issue.created_at ?? "")}
diff --git a/web/components/inbox/main-content.tsx b/web/components/inbox/main-content.tsx index e3b9aaca5..b216da2b7 100644 --- a/web/components/inbox/main-content.tsx +++ b/web/components/inbox/main-content.tsx @@ -13,9 +13,10 @@ import { InboxIssueActivity } from "components/inbox"; // ui import { Loader, StateGroupIcon } from "@plane/ui"; // helpers -import { renderShortDateWithYearFormat } from "helpers/date-time.helper"; +import { renderFormattedDate } from "helpers/date-time.helper"; // types import { IInboxIssue, IIssue } from "types"; +// constants import { EUserWorkspaceRoles } from "constants/workspace"; const defaultValues: Partial = { @@ -195,13 +196,12 @@ export const InboxMainContent: React.FC = observer(() => { {new Date(issueDetails.issue_inbox[0].snoozed_till ?? "") < new Date() ? (

- This issue was snoozed till{" "} - {renderShortDateWithYearFormat(issueDetails.issue_inbox[0].snoozed_till ?? "")}. + This issue was snoozed till {renderFormattedDate(issueDetails.issue_inbox[0].snoozed_till ?? "")}.

) : (

This issue has been snoozed till{" "} - {renderShortDateWithYearFormat(issueDetails.issue_inbox[0].snoozed_till ?? "")}. + {renderFormattedDate(issueDetails.issue_inbox[0].snoozed_till ?? "")}.

)} diff --git a/web/components/integration/single-import.tsx b/web/components/integration/single-import.tsx index f084e652d..b136cd640 100644 --- a/web/components/integration/single-import.tsx +++ b/web/components/integration/single-import.tsx @@ -3,7 +3,7 @@ import { CustomMenu } from "@plane/ui"; // icons import { Trash2 } from "lucide-react"; // helpers -import { renderShortDateWithYearFormat } from "helpers/date-time.helper"; +import { renderFormattedDate } from "helpers/date-time.helper"; // types import { IImporterService } from "types"; // constants @@ -39,7 +39,7 @@ export const SingleImport: React.FC = ({ service, refreshing, handleDelet
- {renderShortDateWithYearFormat(service.created_at)}| + {renderFormattedDate(service.created_at)}| Imported by {service.initiated_by_detail.display_name}
diff --git a/web/components/issues/activity.tsx b/web/components/issues/activity.tsx index dff64ba41..1a31f31d4 100644 --- a/web/components/issues/activity.tsx +++ b/web/components/issues/activity.tsx @@ -9,7 +9,7 @@ import { CommentCard } from "components/issues/comment"; // ui import { Loader, Tooltip } from "@plane/ui"; // helpers -import { render24HourFormatTime, renderLongDateFormat, timeAgo } from "helpers/date-time.helper"; +import { render24HourFormatTime, renderFormattedDate, timeAgo } from "helpers/date-time.helper"; // types import { IIssueActivity, IIssueComment } from "types"; import { History } from "lucide-react"; @@ -114,7 +114,7 @@ export const IssueActivitySection: React.FC = ({ )}{" "} {message}{" "} diff --git a/web/components/issues/attachment/attachments.tsx b/web/components/issues/attachment/attachments.tsx index 86cafd7a9..23e580a19 100644 --- a/web/components/issues/attachment/attachments.tsx +++ b/web/components/issues/attachment/attachments.tsx @@ -15,7 +15,7 @@ import { ProjectMemberService } from "services/project"; import { ISSUE_ATTACHMENTS, PROJECT_MEMBERS } from "constants/fetch-keys"; // helper import { truncateText } from "helpers/string.helper"; -import { renderLongDateFormat } from "helpers/date-time.helper"; +import { renderFormattedDate } from "helpers/date-time.helper"; import { convertBytesToSize, getFileExtension, getFileName } from "helpers/attachment.helper"; // type import { IIssueAttachment } from "types"; @@ -70,7 +70,7 @@ export const IssueAttachments = () => { person.member.id === file.updated_by)?.member.display_name ?? "" - } uploaded on ${renderLongDateFormat(file.updated_at)}`} + } uploaded on ${renderFormattedDate(file.updated_at)}`} > diff --git a/web/components/issues/issue-layouts/calendar/day-tile.tsx b/web/components/issues/issue-layouts/calendar/day-tile.tsx index 0bcf2d305..2ab996453 100644 --- a/web/components/issues/issue-layouts/calendar/day-tile.tsx +++ b/web/components/issues/issue-layouts/calendar/day-tile.tsx @@ -7,10 +7,11 @@ import { useMobxStore } from "lib/mobx/store-provider"; import { CalendarIssueBlocks, ICalendarDate, CalendarQuickAddIssueForm } from "components/issues"; // helpers import { renderDateFormat } from "helpers/date-time.helper"; -// constants -import { MONTHS_LIST } from "constants/calendar"; +// types import { IIssue } from "types"; import { IGroupedIssues, IIssueResponse } from "store/issues/types"; +// constants +import { MONTHS_LIST } from "constants/calendar"; type Props = { date: ICalendarDate; diff --git a/web/components/issues/issue-layouts/filters/applied-filters/date.tsx b/web/components/issues/issue-layouts/filters/applied-filters/date.tsx index cf3525838..39864c772 100644 --- a/web/components/issues/issue-layouts/filters/applied-filters/date.tsx +++ b/web/components/issues/issue-layouts/filters/applied-filters/date.tsx @@ -3,7 +3,7 @@ import { observer } from "mobx-react-lite"; // icons import { X } from "lucide-react"; // helpers -import { renderLongDateFormat } from "helpers/date-time.helper"; +import { renderFormattedDate } from "helpers/date-time.helper"; import { capitalizeFirstLetter } from "helpers/string.helper"; // constants import { DATE_FILTER_OPTIONS } from "constants/filters"; @@ -28,7 +28,7 @@ export const AppliedDateFilters: React.FC = observer((props) => { if (dateParts.length === 2) { const [date, time] = dateParts; - dateLabel = `${capitalizeFirstLetter(time)} ${renderLongDateFormat(date)}`; + dateLabel = `${capitalizeFirstLetter(time)} ${renderFormattedDate(date)}`; } } diff --git a/web/components/issues/issue-layouts/gantt/quick-add-issue-form.tsx b/web/components/issues/issue-layouts/gantt/quick-add-issue-form.tsx index 4e75804d8..16d601378 100644 --- a/web/components/issues/issue-layouts/gantt/quick-add-issue-form.tsx +++ b/web/components/issues/issue-layouts/gantt/quick-add-issue-form.tsx @@ -11,7 +11,7 @@ import useKeypress from "hooks/use-keypress"; import useProjectDetails from "hooks/use-project-details"; import useOutsideClickDetector from "hooks/use-outside-click-detector"; // helpers -import { renderDateFormat } from "helpers/date-time.helper"; +import { renderFormattedPayloadDate } from "helpers/date-time.helper"; // types import { IIssue } from "types"; // helpers @@ -116,8 +116,8 @@ export const GanttInlineCreateIssueForm: React.FC = observer((props) => { const payload = createIssuePayload(workspaceDetail!, projectDetails!, { ...(prePopulatedData ?? {}), ...formData, - start_date: renderDateFormat(new Date()), - target_date: renderDateFormat(new Date(new Date().getTime() + 24 * 60 * 60 * 1000)), + start_date: renderFormattedPayloadDate(new Date()), + target_date: renderFormattedPayloadDate(new Date(new Date().getTime() + 24 * 60 * 60 * 1000)), }); try { diff --git a/web/components/issues/issue-layouts/properties/date.tsx b/web/components/issues/issue-layouts/properties/date.tsx index 98fd09726..e22e88c12 100644 --- a/web/components/issues/issue-layouts/properties/date.tsx +++ b/web/components/issues/issue-layouts/properties/date.tsx @@ -12,7 +12,7 @@ import { Tooltip } from "@plane/ui"; // hooks import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown"; // helpers -import { renderDateFormat } from "helpers/date-time.helper"; +import { renderFormattedPayloadDate } from "helpers/date-time.helper"; export interface IIssuePropertyDate { value: any; @@ -79,7 +79,7 @@ export const IssuePropertyDate: React.FC = observer((props) selected={value ? new Date(value) : new Date()} onChange={(val: any) => { if (onChange && val) { - onChange(renderDateFormat(val)); + onChange(renderFormattedPayloadDate(val)); close(); } }} diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx index 644af7bc1..95de054a8 100644 --- a/web/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx +++ b/web/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx @@ -3,7 +3,7 @@ import React from "react"; // hooks import useSubIssue from "hooks/use-sub-issue"; // helpers -import { renderLongDetailDateFormat } from "helpers/date-time.helper"; +import { renderFormattedDate } from "helpers/date-time.helper"; // types import { IIssue } from "types"; @@ -20,7 +20,7 @@ export const SpreadsheetCreatedOnColumn: React.FC = ({ issue, expandedIss return ( <>
- {renderLongDetailDateFormat(issue.created_at)} + {renderFormattedDate(issue.created_at)}
{isExpanded && diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx index 3f44828c9..24a59df67 100644 --- a/web/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx +++ b/web/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx @@ -3,7 +3,7 @@ import React from "react"; // hooks import useSubIssue from "hooks/use-sub-issue"; // helpers -import { renderLongDetailDateFormat } from "helpers/date-time.helper"; +import { renderFormattedDate } from "helpers/date-time.helper"; // types import { IIssue } from "types"; @@ -22,7 +22,7 @@ export const SpreadsheetUpdatedOnColumn: React.FC = (props) => { return ( <>
- {renderLongDetailDateFormat(issue.updated_at)} + {renderFormattedDate(issue.updated_at)}
{isExpanded && diff --git a/web/components/issues/issue-peek-overview/activity/card.tsx b/web/components/issues/issue-peek-overview/activity/card.tsx index c677a6402..4a734ab3a 100644 --- a/web/components/issues/issue-peek-overview/activity/card.tsx +++ b/web/components/issues/issue-peek-overview/activity/card.tsx @@ -7,7 +7,7 @@ import { Tooltip } from "@plane/ui"; import { ActivityIcon, ActivityMessage } from "components/core"; import { IssueCommentCard } from "./comment-card"; // helpers -import { render24HourFormatTime, renderLongDateFormat, timeAgo } from "helpers/date-time.helper"; +import { render24HourFormatTime, renderFormattedDate, timeAgo } from "helpers/date-time.helper"; interface IssueActivityCard { workspaceSlug: string; @@ -102,7 +102,7 @@ export const IssueActivityCard: FC = (props) => { )}{" "} {message}{" "} diff --git a/web/components/issues/select/date.tsx b/web/components/issues/select/date.tsx index 08c413402..9e0035843 100644 --- a/web/components/issues/select/date.tsx +++ b/web/components/issues/select/date.tsx @@ -4,8 +4,7 @@ import { Popover, Transition } from "@headlessui/react"; import { CalendarDays, X } from "lucide-react"; // react-datepicker import DatePicker from "react-datepicker"; -// import "react-datepicker/dist/react-datepicker.css"; -import { renderDateFormat, renderShortDateWithYearFormat } from "helpers/date-time.helper"; +import { renderFormattedDate, renderFormattedPayloadDate } from "helpers/date-time.helper"; type Props = { label: string; @@ -35,7 +34,7 @@ export const IssueDateSelect: FC = ({ label, maxDate, minDate, onChange, {value ? ( <> - {renderShortDateWithYearFormat(value)} + {renderFormattedDate(value)} @@ -69,7 +68,7 @@ export const IssueDateSelect: FC = ({ label, maxDate, minDate, onChange, selected={value ? new Date(value) : null} onChange={(val) => { if (!val) onChange(""); - else onChange(renderDateFormat(val)); + else onChange(renderFormattedPayloadDate(val)); close(); }} diff --git a/web/components/issues/view-select/due-date.tsx b/web/components/issues/view-select/due-date.tsx index 216279dad..795848140 100644 --- a/web/components/issues/view-select/due-date.tsx +++ b/web/components/issues/view-select/due-date.tsx @@ -6,7 +6,7 @@ import { CalendarDays } from "lucide-react"; import { findHowManyDaysLeft, renderShortDate, - renderShortDateWithYearFormat, + renderFormattedDate, renderShortMonthDate, } from "helpers/date-time.helper"; // types @@ -43,7 +43,7 @@ export const ViewDueDateSelect: React.FC = ({ return (
= ({ return (
diff --git a/web/components/modules/sidebar.tsx b/web/components/modules/sidebar.tsx index b2685ca2c..9b9090e48 100644 --- a/web/components/modules/sidebar.tsx +++ b/web/components/modules/sidebar.tsx @@ -19,7 +19,7 @@ import { AlertCircle, ChevronDown, ChevronRight, Info, LinkIcon, MoveRight, Plus // helpers import { isDateGreaterThanToday, - renderDateFormat, + renderFormattedPayloadDate, renderShortDate, renderShortMonthDate, } from "helpers/date-time.helper"; @@ -175,8 +175,8 @@ export const ModuleDetailsSidebar: React.FC = observer((props) => { } submitChanges({ - start_date: renderDateFormat(`${watch("start_date")}`), - target_date: renderDateFormat(`${watch("target_date")}`), + start_date: renderFormattedPayloadDate(`${watch("start_date")}`), + target_date: renderFormattedPayloadDate(`${watch("target_date")}`), }); setToastAlert({ type: "success", @@ -200,8 +200,8 @@ export const ModuleDetailsSidebar: React.FC = observer((props) => { } submitChanges({ - start_date: renderDateFormat(`${watch("start_date")}`), - target_date: renderDateFormat(`${watch("target_date")}`), + start_date: renderFormattedPayloadDate(`${watch("start_date")}`), + target_date: renderFormattedPayloadDate(`${watch("target_date")}`), }); setToastAlert({ type: "success", diff --git a/web/components/notifications/notification-card.tsx b/web/components/notifications/notification-card.tsx index 774d9a6d8..a76885a07 100644 --- a/web/components/notifications/notification-card.tsx +++ b/web/components/notifications/notification-card.tsx @@ -13,9 +13,8 @@ import { replaceUnderscoreIfSnakeCase, truncateText, stripAndTruncateHTML } from import { formatDateDistance, render12HourFormatTime, - renderLongDateFormat, renderShortDate, - renderShortDateWithYearFormat, + renderFormattedDate, } from "helpers/date-time.helper"; // type import type { IUserNotification } from "types"; @@ -112,7 +111,7 @@ export const NotificationCard: React.FC = (props) => { {notification.data.issue_activity.field !== "None" ? ( notification.data.issue_activity.field !== "comment" ? ( notification.data.issue_activity.field === "target_date" ? ( - renderShortDateWithYearFormat(notification.data.issue_activity.new_value) + renderFormattedDate(notification.data.issue_activity.new_value) ) : notification.data.issue_activity.field === "attachment" ? ( "the issue" ) : notification.data.issue_activity.field === "description" ? ( @@ -233,7 +232,7 @@ export const NotificationCard: React.FC = (props) => { markSnoozeNotification(notification.id, item.value).then(() => { setToastAlert({ - title: `Notification snoozed till ${renderLongDateFormat(item.value)}`, + title: `Notification snoozed till ${renderFormattedDate(item.value)}`, type: "success", }); }); diff --git a/web/components/profile/sidebar.tsx b/web/components/profile/sidebar.tsx index 14a863857..0dbb0441a 100644 --- a/web/components/profile/sidebar.tsx +++ b/web/components/profile/sidebar.tsx @@ -14,7 +14,7 @@ import { Loader, Tooltip } from "@plane/ui"; // icons import { ChevronDown, Pencil } from "lucide-react"; // helpers -import { renderLongDetailDateFormat } from "helpers/date-time.helper"; +import { renderFormattedDate } from "helpers/date-time.helper"; import { renderEmoji } from "helpers/emoji.helper"; // fetch-keys import { USER_PROFILE_PROJECT_SEGREGATION } from "constants/fetch-keys"; @@ -48,7 +48,7 @@ export const ProfileSidebar = () => { const userDetails = [ { label: "Joined on", - value: renderLongDetailDateFormat(userProjectsData?.user_data.date_joined ?? ""), + value: renderFormattedDate(userProjectsData?.user_data.date_joined ?? ""), }, { label: "Timezone", diff --git a/web/components/project/form.tsx b/web/components/project/form.tsx index beca1daaf..d6288dc2a 100644 --- a/web/components/project/form.tsx +++ b/web/components/project/form.tsx @@ -1,5 +1,8 @@ import { FC } from "react"; import { Controller, useForm } from "react-hook-form"; +import { observer } from "mobx-react-lite"; +// mobx store +import { useMobxStore } from "lib/mobx/store-provider"; // components import EmojiIconPicker from "components/emoji-icon-picker"; import { ImagePickerPopover } from "components/core"; @@ -8,14 +11,13 @@ import { Button, CustomSelect, Input, TextArea } from "@plane/ui"; import { IProject, IWorkspace } from "types"; // helpers import { renderEmoji } from "helpers/emoji.helper"; -import { renderShortDateWithYearFormat } from "helpers/date-time.helper"; +import { renderFormattedDate } from "helpers/date-time.helper"; // constants import { NETWORK_CHOICES } from "constants/project"; // services import { ProjectService } from "services/project"; // hooks import useToast from "hooks/use-toast"; -import { useMobxStore } from "lib/mobx/store-provider"; export interface IProjectDetailsForm { project: IProject; @@ -25,10 +27,14 @@ export interface IProjectDetailsForm { const projectService = new ProjectService(); -export const ProjectDetailsForm: FC = (props) => { +export const ProjectDetailsForm: FC = observer((props) => { const { project, workspaceSlug, isAdmin } = props; // store - const { project: projectStore, trackEvent: { postHogEventTracker }, workspace: { currentWorkspace } } = useMobxStore(); + const { + project: projectStore, + trackEvent: { postHogEventTracker }, + workspace: { currentWorkspace }, + } = useMobxStore(); // toast const { setToastAlert } = useToast(); // form data @@ -63,12 +69,12 @@ export const ProjectDetailsForm: FC = (props) => { .updateProject(workspaceSlug.toString(), project.id, payload) .then((res) => { postHogEventTracker( - 'PROJECT_UPDATED', + "PROJECT_UPDATED", { ...res, state: "SUCCESS" }, { isGrouping: true, groupType: "Workspace_metrics", - gorupId: res.workspace + gorupId: res.workspace, } ); setToastAlert({ @@ -79,14 +85,14 @@ export const ProjectDetailsForm: FC = (props) => { }) .catch((error) => { postHogEventTracker( - 'PROJECT_UPDATED', + "PROJECT_UPDATED", { - state: "FAILED" + state: "FAILED", }, { isGrouping: true, groupType: "Workspace_metrics", - gorupId: currentWorkspace?.id! + gorupId: currentWorkspace?.id!, } ); setToastAlert({ @@ -295,11 +301,11 @@ export const ProjectDetailsForm: FC = (props) => { {isSubmitting ? "Updating Project..." : "Update Project"} - Created on {renderShortDateWithYearFormat(project?.created_at)} + Created on {renderFormattedDate(project?.created_at)}
); -}; +}); diff --git a/web/components/ui/date.tsx b/web/components/ui/date.tsx index acc8eb1ea..0eecb0474 100644 --- a/web/components/ui/date.tsx +++ b/web/components/ui/date.tsx @@ -5,8 +5,7 @@ import { Popover, Transition } from "@headlessui/react"; import DatePicker from "react-datepicker"; // icons import { CalendarDays, X } from "lucide-react"; -// import "react-datepicker/dist/react-datepicker.css"; -import { renderDateFormat, renderShortDateWithYearFormat } from "helpers/date-time.helper"; +import { renderFormattedDate, renderFormattedPayloadDate } from "helpers/date-time.helper"; type Props = { value: string | null; @@ -25,7 +24,7 @@ export const DateSelect: React.FC = ({ value, onChange, label, minDate, m {value ? ( <> - {renderShortDateWithYearFormat(value)} + {renderFormattedDate(value)} @@ -52,7 +51,7 @@ export const DateSelect: React.FC = ({ value, onChange, label, minDate, m selected={value ? new Date(value) : null} onChange={(val) => { if (!val) onChange(""); - else onChange(renderDateFormat(val)); + else onChange(renderFormattedPayloadDate(val)); if (closeOnSelect) close(); }} diff --git a/web/components/ui/datepicker.tsx b/web/components/ui/datepicker.tsx index 3e3c08296..c157ecb6b 100644 --- a/web/components/ui/datepicker.tsx +++ b/web/components/ui/datepicker.tsx @@ -2,7 +2,7 @@ import DatePicker from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css"; // helpers -import { renderDateFormat } from "helpers/date-time.helper"; +import { renderFormattedPayloadDate } from "helpers/date-time.helper"; type Props = { renderAs?: "input" | "button"; @@ -45,7 +45,7 @@ export const CustomDatePicker: React.FC = ({ selected={value ? new Date(value) : null} onChange={(val) => { if (!val) onChange(null); - else onChange(renderDateFormat(val)); + else onChange(renderFormattedPayloadDate(val)); }} onCalendarOpen={handleOnOpen} onCalendarClose={handleOnClose} diff --git a/web/components/ui/product-updates-modal.tsx b/web/components/ui/product-updates-modal.tsx index 4cd2bfc56..f7ca59800 100644 --- a/web/components/ui/product-updates-modal.tsx +++ b/web/components/ui/product-updates-modal.tsx @@ -12,7 +12,7 @@ import { Loader } from "@plane/ui"; // icons import { X } from "lucide-react"; // helpers -import { renderLongDateFormat } from "helpers/date-time.helper"; +import { renderFormattedDate } from "helpers/date-time.helper"; type Props = { isOpen: boolean; @@ -68,7 +68,7 @@ export const ProductUpdatesModal: React.FC = ({ isOpen, setIsOpen }) => { {item.tag_name} - {renderLongDateFormat(item.published_at)} + {renderFormattedDate(item.published_at)} {index === 0 && ( New diff --git a/web/components/ui/range-datepicker.tsx b/web/components/ui/range-datepicker.tsx index 1ad3e45b1..f6174f692 100644 --- a/web/components/ui/range-datepicker.tsx +++ b/web/components/ui/range-datepicker.tsx @@ -2,7 +2,7 @@ import DatePicker from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css"; // helpers -import { renderDateFormat } from "helpers/date-time.helper"; +import { renderFormattedPayloadDate } from "helpers/date-time.helper"; type Props = { renderAs?: "input" | "button"; @@ -38,7 +38,7 @@ export const CustomRangeDatePicker: React.FC = ({ selected={value ? new Date(value) : null} onChange={(val) => { if (!val) onChange(null); - else onChange(renderDateFormat(val)); + else onChange(renderFormattedPayloadDate(val)); }} className={`${ renderAs === "input" diff --git a/web/components/web-hooks/utils.ts b/web/components/web-hooks/utils.ts index 04c6e650d..8f2a6929c 100644 --- a/web/components/web-hooks/utils.ts +++ b/web/components/web-hooks/utils.ts @@ -1,4 +1,4 @@ -import { renderDateFormat } from "helpers/date-time.helper"; +import { renderFormattedPayloadDate } from "helpers/date-time.helper"; import { IWebhook, IWorkspace } from "types"; export const getCurrentHookAsCSV = ( @@ -8,8 +8,8 @@ export const getCurrentHookAsCSV = ( ) => ({ id: webhook?.id || "", url: webhook?.url || "", - created_at: renderDateFormat(webhook?.created_at), - updated_at: renderDateFormat(webhook?.updated_at), + created_at: renderFormattedPayloadDate(webhook?.created_at ?? ""), + updated_at: renderFormattedPayloadDate(webhook?.updated_at ?? ""), is_active: webhook?.is_active?.toString() || "", secret_key: secretKey || "", project: webhook?.project?.toString() || "", diff --git a/web/components/workspace/activity-graph.tsx b/web/components/workspace/activity-graph.tsx index 6036d0c69..bd0bc1f0f 100644 --- a/web/components/workspace/activity-graph.tsx +++ b/web/components/workspace/activity-graph.tsx @@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from "react"; // ui import { Tooltip } from "@plane/ui"; // helpers -import { renderDateFormat, renderShortDateWithYearFormat } from "helpers/date-time.helper"; +import { renderFormattedDate, renderFormattedPayloadDate } from "helpers/date-time.helper"; // types import { IUserActivity } from "types"; // constants @@ -35,7 +35,7 @@ export const ActivityGraph: React.FC = ({ activities }) => { const date = new Date(year, month, 1); while (date.getMonth() === month && date < new Date()) { - dates.push(renderDateFormat(new Date(date))); + dates.push(renderFormattedPayloadDate(new Date(date)) || ""); date.setDate(date.getDate() + 1); } @@ -100,9 +100,9 @@ export const ActivityGraph: React.FC = ({ activities }) => { return (
= ({ issues, type }) => { {dateDifference} {dateDifference > 1 ? "days" : "day"}
{truncateText(issue.name, 30)}
-
- {renderShortDateWithYearFormat(new Date(date?.toString() ?? ""))} -
+
{renderFormattedDate(new Date(date?.toString() ?? ""))}
 diff --git a/web/helpers/date-time.helper.ts b/web/helpers/date-time.helper.ts index fa346d5aa..d28fb705e 100644 --- a/web/helpers/date-time.helper.ts +++ b/web/helpers/date-time.helper.ts @@ -1,10 +1,5 @@ import { format } from "date-fns"; -export const addDays = ({ date, days }: { date: Date; days: number }): Date => { - date.setDate(date.getDate() + days); - return date; -}; - export const renderDateFormat = (date: string | Date | null | undefined, dayFirst: boolean = false) => { if (!date) return "N/A"; @@ -25,13 +20,6 @@ export const renderShortNumericDateFormat = (date: string | Date) => month: "short", }); -export const renderLongDetailDateFormat = (date: string | Date) => - new Date(date).toLocaleDateString("en-UK", { - day: "numeric", - month: "long", - year: "numeric", - }); - export const findHowManyDaysLeft = (date: string | Date) => { const today = new Date(); const eventDate = new Date(date); @@ -39,21 +27,6 @@ export const findHowManyDaysLeft = (date: string | Date) => { return Math.ceil(timeDiff / (1000 * 3600 * 24)); }; -export const getDatesInRange = (startDate: string | Date, endDate: string | Date) => { - startDate = new Date(startDate); - endDate = new Date(endDate); - - const date = new Date(startDate.getTime()); - const dates = []; - - while (date <= endDate) { - dates.push(new Date(date)); - date.setDate(date.getDate() + 1); - } - - return dates; -}; - export const timeAgo = (time: any) => { switch (typeof time) { case "number": @@ -137,39 +110,6 @@ export const formatDateDistance = (date: string | Date) => { } }; -export const formatLongDateDistance = (date: string | Date) => { - const today = new Date(); - const eventDate = new Date(date); - const timeDiff = Math.abs(eventDate.getTime() - today.getTime()); - const days = Math.ceil(timeDiff / (1000 * 3600 * 24)); - - if (days < 1) { - const hours = Math.ceil(timeDiff / (1000 * 3600)); - if (hours < 1) { - const minutes = Math.ceil(timeDiff / (1000 * 60)); - if (minutes < 1) { - return "Just now"; - } else { - return `${minutes} minutes`; - } - } else { - return `${hours} hours`; - } - } else if (days < 7) { - if (days === 1) return `${days} day`; - return `${days} days`; - } else if (days < 30) { - if (Math.floor(days / 7) === 1) return `${Math.floor(days / 7)} week`; - return `${Math.floor(days / 7)} weeks`; - } else if (days < 365) { - if (Math.floor(days / 30) === 1) return `${Math.floor(days / 30)} month`; - return `${Math.floor(days / 30)} months`; - } else { - if (Math.floor(days / 365) === 1) return `${Math.floor(days / 365)} year`; - return `${Math.floor(days / 365)} years`; - } -}; - export const getDateRangeStatus = (startDate: string | null | undefined, endDate: string | null | undefined) => { if (!startDate || !endDate) return "draft"; @@ -182,19 +122,6 @@ export const getDateRangeStatus = (startDate: string | null | undefined, endDate else return "completed"; }; -export const renderShortDateWithYearFormat = (date: string | Date, placeholder?: string) => { - if (!date || date === "") return null; - - date = new Date(date); - - const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; - const day = date.getDate(); - const month = months[date.getMonth()]; - const year = date.getFullYear(); - - return isNaN(date.getTime()) ? placeholder ?? "N/A" : ` ${month} ${day}, ${year}`; -}; - export const renderShortDate = (date: string | Date, placeholder?: string) => { if (!date || date === "") return null; @@ -260,107 +187,6 @@ export const isDateGreaterThanToday = (dateStr: string) => { return date > today; }; -export const renderLongDateFormat = (dateString: string | Date) => { - const date = new Date(dateString); - const day = date.getDate(); - const year = date.getFullYear(); - const monthNames = [ - "January", - "February", - "March", - "April", - "May", - "June", - "July", - "August", - "September", - "October", - "November", - "December", - ]; - const monthIndex = date.getMonth(); - const monthName = monthNames[monthIndex]; - const suffixes = ["st", "nd", "rd", "th"]; - let suffix = ""; - if (day === 1 || day === 21 || day === 31) { - suffix = suffixes[0]; - } else if (day === 2 || day === 22) { - suffix = suffixes[1]; - } else if (day === 3 || day === 23) { - suffix = suffixes[2]; - } else { - suffix = suffixes[3]; - } - return `${day}${suffix} ${monthName} ${year}`; -}; - -/** - * - * @returns {Array} Array of time objects with label and value as keys - */ - -export const getTimestampAfterCurrentTime = (): Array<{ - label: string; - value: Date; -}> => { - const current = new Date(); - const time = []; - for (let i = 0; i < 24; i++) { - const newTime = new Date(current.getTime() + i * 60 * 60 * 1000); - time.push({ - label: newTime.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), - value: newTime, - }); - } - return time; -}; - -/** - * @returns {Array} Array of date objects with label and value as keys - * @description Returns an array of date objects starting from current date to 7 days after - */ - -export const getDatesAfterCurrentDate = (): Array<{ - label: string; - value: Date; -}> => { - const current = new Date(); - const date = []; - for (let i = 0; i < 7; i++) { - const newDate = new Date(Math.round(current.getTime() / (30 * 60 * 1000)) * 30 * 60 * 1000); - date.push({ - label: newDate.toLocaleDateString([], { - day: "numeric", - month: "long", - year: "numeric", - }), - value: newDate, - }); - } - return date; -}; - -/** - * @returns {boolean} true if date is valid - * @description Returns true if date is valid - * @param {string} date - * @example checkIfStringIsDate("2021-01-01") // true - * @example checkIfStringIsDate("2021-01-32") // false - */ - -export const checkIfStringIsDate = (date: string): boolean => new Date(date).toString() !== "Invalid Date"; - -// return an array of dates starting from 12:00 to 23:30 with 30 minutes interval as dates -export const getDatesWith30MinutesInterval = (): Array => { - const dates = []; - const current = new Date(); - for (let i = 0; i < 24; i++) { - const newDate = new Date(current.getTime() + i * 60 * 60 * 1000); - dates.push(newDate); - } - return dates; -}; - export const getAllTimeIn30MinutesInterval = (): Array<{ label: string; value: string; @@ -416,8 +242,6 @@ export const findTotalDaysInRange = (startDate: Date | string, endDate: Date | s return diffInDays; }; -export const getUserTimeZoneFromWindow = () => Intl.DateTimeFormat().resolvedOptions().timeZone; - /** * @returns {number} week number of date * @description Returns week number of date diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx index bfa806210..5b3457d3d 100644 --- a/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx +++ b/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx @@ -20,7 +20,7 @@ import { Spinner } from "@plane/ui"; // assets import emptyPage from "public/empty-state/page.svg"; // helpers -import { renderDateFormat } from "helpers/date-time.helper"; +import { renderFormattedPayloadDate } from "helpers/date-time.helper"; // types import { NextPageWithLayout } from "types/app"; import { IPage, IIssue } from "types"; @@ -59,7 +59,7 @@ const PageDetailsPage: NextPageWithLayout = observer(() => { const { user } = useUser(); - const { handleSubmit, reset, setValue, watch, getValues, control } = useForm({ + const { handleSubmit, setValue, watch, getValues, control } = useForm({ defaultValues: { name: "", description_html: "" }, }); @@ -112,7 +112,7 @@ const PageDetailsPage: NextPageWithLayout = observer(() => { return issue as IIssue; }; - const issueWidgetClickAction = (issueId: string, issueTitle: string) => { + const issueWidgetClickAction = (issueId: string) => { const url = new URL(router.asPath, window.location.origin); const params = new URLSearchParams(url.search); @@ -156,7 +156,7 @@ const PageDetailsPage: NextPageWithLayout = observer(() => { if (pageDetails?.description_html) { setLocalIssueDescription({ id: pageId as string, description_html: pageDetails.description_html }); } - }, [pageDetails?.description_html]); + }, [pageDetails?.description_html, pageId]); function createObjectFromArray(keys: string[], options: any): any { return keys.reduce((obj, key) => { @@ -176,7 +176,7 @@ const PageDetailsPage: NextPageWithLayout = observer(() => { const commonSwrOptions: MutatorOptions = { revalidate: true, populateCache: false, - rollbackOnError: (e) => { + rollbackOnError: () => { onErrorAction(); return true; }, @@ -255,7 +255,7 @@ const PageDetailsPage: NextPageWithLayout = observer(() => { mutatePageDetailsHelper( pageService.archivePage(workspaceSlug.toString(), projectId.toString(), pageId.toString()), { - archived_at: renderDateFormat(new Date()), + archived_at: renderFormattedPayloadDate(new Date()), }, ["description_html"], () => @@ -407,7 +407,7 @@ const PageDetailsPage: NextPageWithLayout = observer(() => { ( + render={({ field: { onChange } }) => (