thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

chore: remove unnecessary date helper functions

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-12-07 17:33:42 +05:30
parent 0e055666e7
commit 61ab9f55ee
38 changed files with 124 additions and 304 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/components/common/product-updates-modal.tsx
View File

@ -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<Props> = ({ isOpen, setIsOpen }) => {
<span className="flex items-center rounded-full border border-custom-border-200 bg-custom-background-90 px-3 py-1.5 text-xs">
{item.tag_name}
</span>
<span>{renderLongDateFormat(item.published_at)}</span>
<span>{renderFormattedDate(item.published_at)}</span>
{index === 0 && (
<span className="flex items-center rounded-full border border-custom-border-200 bg-custom-primary px-3 py-1.5 text-xs text-white">
New

10
web/components/core/activity.tsx
View File

@ -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{" "}
<span className="font-medium text-custom-text-100">
{renderShortDateWithYearFormat(activity.new_value)}
</span>
<span className="font-medium text-custom-text-100">{renderFormattedDate(activity.new_value)}</span>
{showIssue && (
<>
{" "}
@ -656,9 +654,7 @@ const activityDetails: {
return (
<>
set the due date to{" "}
<span className="font-medium text-custom-text-100">
{renderShortDateWithYearFormat(activity.new_value)}
</span>
<span className="font-medium text-custom-text-100">{renderFormattedDate(activity.new_value)}</span>
{showIssue && (
<>
{" "}

11
web/components/core/filters/date-filter-modal.tsx
View File

@ -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<Props> = ({ 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<Props> = ({ title, handleClose, isOpen, o
{watch("filterType") === "range" && (
<h6 className="text-xs flex items-center gap-1">
<span className="text-custom-text-200">After:</span>
<span>{renderShortDateWithYearFormat(watch("date1"))}</span>
<span>{renderFormattedDate(watch("date1"))}</span>
<span className="text-custom-text-200 ml-1">Before:</span>
{!isInvalid && <span>{renderShortDateWithYearFormat(watch("date2"))}</span>}
{!isInvalid && <span>{renderFormattedDate(watch("date2"))}</span>}
</h6>
)}
<div className="flex justify-end gap-4">

6
web/components/core/sidebar/progress-chart.tsx
View File

@ -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<Props> = ({ 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;

6
web/components/cycles/active-cycle-details.tsx
View File

@ -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<IActiveCycleDetails> = observer((props
<div className="flex items-center justify-start gap-5 text-custom-text-200">
<div className="flex items-start gap-1">
<CalendarDays className="h-4 w-4" />
<span>{renderShortDateWithYearFormat(startDate)}</span>
<span>{renderFormattedDate(startDate)}</span>
</div>
<ArrowRight className="h-4 w-4 text-custom-text-200" />
<div className="flex items-start gap-1">
<Target className="h-4 w-4" />
<span>{renderShortDateWithYearFormat(endDate)}</span>
<span>{renderFormattedDate(endDate)}</span>
</div>
</div>

18
web/components/cycles/sidebar.tsx
View File

@ -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<Props> = 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<Props> = 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<Props> = 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<Props> = 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",

4
web/components/exporter/single-export.tsx
View File

@ -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<Props> = ({ service, refreshing }) => {
</span>
</h4>
<div className="mt-2 flex items-center gap-2 text-xs text-custom-text-200">
<span>{renderShortDateWithYearFormat(service.created_at)}</span>|
<span>{renderFormattedDate(service.created_at)}</span>|
<span>Exported by {service?.initiated_by_detail?.display_name}</span>
</div>
</div>

6
web/components/gantt-chart/blocks/blocks-display.tsx
View File

@ -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,
});
};

9
web/components/inbox/issue-card.tsx
View File

@ -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> = (props) => {
<Tooltip tooltipHeading="Priority" tooltipContent={`${issue.priority ?? "None"}`}>
<PriorityIcon priority={issue.priority ?? null} className="h-3.5 w-3.5" />
</Tooltip>
<Tooltip
tooltipHeading="Created on"
tooltipContent={`${renderShortDateWithYearFormat(issue.created_at ?? "")}`}
>
<Tooltip tooltipHeading="Created on" tooltipContent={`${renderFormattedDate(issue.created_at ?? "")}`}>
<div className="flex items-center gap-1 rounded border border-custom-border-200 shadow-sm text-xs px-2 py-[0.19rem] text-custom-text-200">
<CalendarDays size={12} strokeWidth={1.5} />
<span>{renderShortDateWithYearFormat(issue.created_at ?? "")}</span>
<span>{renderFormattedDate(issue.created_at ?? "")}</span>
</div>
</Tooltip>
</div>

8
web/components/inbox/main-content.tsx
View File

@ -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<IInboxIssue> = {
@ -195,13 +196,12 @@ export const InboxMainContent: React.FC = observer(() => {
<Clock size={18} strokeWidth={2} />
{new Date(issueDetails.issue_inbox[0].snoozed_till ?? "") < new Date() ? (
<p>
This issue was snoozed till{" "}
{renderShortDateWithYearFormat(issueDetails.issue_inbox[0].snoozed_till ?? "")}.
This issue was snoozed till {renderFormattedDate(issueDetails.issue_inbox[0].snoozed_till ?? "")}.
</p>
) : (
<p>
This issue has been snoozed till{" "}
{renderShortDateWithYearFormat(issueDetails.issue_inbox[0].snoozed_till ?? "")}.
{renderFormattedDate(issueDetails.issue_inbox[0].snoozed_till ?? "")}.
</p>
)}
</>

4
web/components/integration/single-import.tsx
View File

@ -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<Props> = ({ service, refreshing, handleDelet
</span>
</h4>
<div className="mt-2 flex items-center gap-2 text-xs text-custom-text-200">
<span>{renderShortDateWithYearFormat(service.created_at)}</span>|
<span>{renderFormattedDate(service.created_at)}</span>|
<span>Imported by {service.initiated_by_detail.display_name}</span>
</div>
</div>

4
web/components/issues/activity.tsx
View File

@ -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<Props> = ({
)}{" "}
{message}{" "}
<Tooltip
tooltipContent={`${renderLongDateFormat(activityItem.created_at)}, ${render24HourFormatTime(
tooltipContent={`${renderFormattedDate(activityItem.created_at)}, ${render24HourFormatTime(
activityItem.created_at
)}`}
>

4
web/components/issues/attachment/attachments.tsx
View File

@ -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 = () => {
<Tooltip
tooltipContent={`${
people?.find((person) => person.member.id === file.updated_by)?.member.display_name ?? ""
} uploaded on ${renderLongDateFormat(file.updated_at)}`}
} uploaded on ${renderFormattedDate(file.updated_at)}`}
>
<span>
<AlertCircle className="h-3 w-3" />

5
web/components/issues/issue-layouts/calendar/day-tile.tsx
View File

@ -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;

4
web/components/issues/issue-layouts/filters/applied-filters/date.tsx
View File

@ -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<Props> = observer((props) => {
if (dateParts.length === 2) {
const [date, time] = dateParts;
dateLabel = `${capitalizeFirstLetter(time)} ${renderLongDateFormat(date)}`;
dateLabel = `${capitalizeFirstLetter(time)} ${renderFormattedDate(date)}`;
}
}

6
web/components/issues/issue-layouts/gantt/quick-add-issue-form.tsx
View File

@ -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<Props> = 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 {

4
web/components/issues/issue-layouts/properties/date.tsx
View File

@ -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<IIssuePropertyDate> = observer((props)
selected={value ? new Date(value) : new Date()}
onChange={(val: any) => {
if (onChange && val) {
onChange(renderDateFormat(val));
onChange(renderFormattedPayloadDate(val));
close();
}
}}

4
web/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx
View File

@ -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<Props> = ({ issue, expandedIss
return (
<>
<div className="flex items-center justify-center text-xs h-full w-full">
{renderLongDetailDateFormat(issue.created_at)}
{renderFormattedDate(issue.created_at)}
</div>
{isExpanded &&

4
web/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx
View File

@ -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> = (props) => {
return (
<>
<div className="flex items-center justify-center text-xs h-full w-full">
{renderLongDetailDateFormat(issue.updated_at)}
{renderFormattedDate(issue.updated_at)}
</div>
{isExpanded &&

4
web/components/issues/issue-peek-overview/activity/card.tsx
View File

@ -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<IssueActivityCard> = (props) => {
)}{" "}
{message}{" "}
<Tooltip
tooltipContent={`${renderLongDateFormat(activityItem.created_at)}, ${render24HourFormatTime(
tooltipContent={`${renderFormattedDate(activityItem.created_at)}, ${render24HourFormatTime(
activityItem.created_at
)}`}
>

7
web/components/issues/select/date.tsx
View File

@ -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<Props> = ({ label, maxDate, minDate, onChange,
{value ? (
<>
<CalendarDays className="h-3 w-3 flex-shrink-0" />
<span>{renderShortDateWithYearFormat(value)}</span>
<span>{renderFormattedDate(value)}</span>
<button onClick={() => onChange(null)}>
<X className="h-3 w-3 flex-shrink-0" />
</button>
@ -69,7 +68,7 @@ export const IssueDateSelect: FC<Props> = ({ label, maxDate, minDate, onChange,
selected={value ? new Date(value) : null}
onChange={(val) => {
if (!val) onChange("");
else onChange(renderDateFormat(val));
else onChange(renderFormattedPayloadDate(val));
close();
}}

4
web/components/issues/view-select/due-date.tsx
View File

@ -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<Props> = ({
return (
<Tooltip
tooltipHeading="Due date"
tooltipContent={issue.target_date ? renderShortDateWithYearFormat(issue.target_date) ?? "N/A" : "N/A"}
tooltipContent={issue.target_date ? renderFormattedDate(issue.target_date) ?? "N/A" : "N/A"}
position={tooltipPosition}
>
<div

4
web/components/issues/view-select/start-date.tsx
View File

@ -3,7 +3,7 @@ import { CustomDatePicker } from "components/ui";
import { Tooltip } from "@plane/ui";
import { CalendarDays } from "lucide-react";
// helpers
import { renderShortDate, renderShortDateWithYearFormat, renderShortMonthDate } from "helpers/date-time.helper";
import { renderShortDate, renderFormattedDate, renderShortMonthDate } from "helpers/date-time.helper";
// types
import { IIssue } from "types";
@ -37,7 +37,7 @@ export const ViewStartDateSelect: React.FC<Props> = ({
return (
<Tooltip
tooltipHeading="Start date"
tooltipContent={issue.start_date ? renderShortDateWithYearFormat(issue.start_date) ?? "N/A" : "N/A"}
tooltipContent={issue.start_date ? renderFormattedDate(issue.start_date) ?? "N/A" : "N/A"}
position={tooltipPosition}
>
<div className={`group flex-shrink-0 max-w-[6.5rem] ${className}`}>

10
web/components/modules/sidebar.tsx
View File

@ -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<Props> = 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<Props> = 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",

7
web/components/notifications/notification-card.tsx
View File

@ -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<NotificationCardProps> = (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<NotificationCardProps> = (props) => {
markSnoozeNotification(notification.id, item.value).then(() => {
setToastAlert({
title: `Notification snoozed till ${renderLongDateFormat(item.value)}`,
title: `Notification snoozed till ${renderFormattedDate(item.value)}`,
type: "success",
});
});

4
web/components/profile/sidebar.tsx
View File

@ -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",

28
web/components/project/form.tsx
View File

@ -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<IProjectDetailsForm> = (props) => {
export const ProjectDetailsForm: FC<IProjectDetailsForm> = 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<IProjectDetailsForm> = (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<IProjectDetailsForm> = (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<IProjectDetailsForm> = (props) => {
{isSubmitting ? "Updating Project..." : "Update Project"}
</Button>
<span className="text-sm text-custom-sidebar-text-400 italic">
Created on {renderShortDateWithYearFormat(project?.created_at)}
Created on {renderFormattedDate(project?.created_at)}
</span>
</>
</div>
</div>
</form>
);
};
});

7
web/components/ui/date.tsx
View File

@ -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<Props> = ({ value, onChange, label, minDate, m
{value ? (
<>
<CalendarDays className="h-3 w-3 flex-shrink-0" />
<span>{renderShortDateWithYearFormat(value)}</span>
<span>{renderFormattedDate(value)}</span>
<button onClick={() => onChange(null)}>
<X className="h-3 w-3" />
</button>
@ -52,7 +51,7 @@ export const DateSelect: React.FC<Props> = ({ 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();
}}

4
web/components/ui/datepicker.tsx
View File

@ -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<Props> = ({
selected={value ? new Date(value) : null}
onChange={(val) => {
if (!val) onChange(null);
else onChange(renderDateFormat(val));
else onChange(renderFormattedPayloadDate(val));
}}
onCalendarOpen={handleOnOpen}
onCalendarClose={handleOnClose}

4
web/components/ui/product-updates-modal.tsx
View File

@ -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<Props> = ({ isOpen, setIsOpen }) => {
<span className="flex items-center rounded-full border border-custom-border-200 bg-custom-background-90 px-3 py-1.5 text-xs">
{item.tag_name}
</span>
<span>{renderLongDateFormat(item.published_at)}</span>
<span>{renderFormattedDate(item.published_at)}</span>
{index === 0 && (
<span className="flex items-center rounded-full border border-custom-border-200 bg-custom-primary px-3 py-1.5 text-xs text-white">
New

4
web/components/ui/range-datepicker.tsx
View File

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

6
web/components/web-hooks/utils.ts
View File

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

10
web/components/workspace/activity-graph.tsx
View File

@ -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<Props> = ({ 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<Props> = ({ activities }) => {
return (
<Tooltip
key={`${date}-${index}`}
tooltipContent={`${
isActive ? isActive.activity_count : 0
} activities on ${renderShortDateWithYearFormat(date)}`}
tooltipContent={`${isActive ? isActive.activity_count : 0} activities on ${renderFormattedDate(
date
)}`}
>
<div
className={`${date === "" ? "pointer-events-none opacity-0" : ""} h-4 w-4 rounded ${

6
web/components/workspace/issues-list.tsx
View File

@ -5,7 +5,7 @@ import Link from "next/link";
import { AlertTriangle } from "lucide-react";
import { LayersIcon, Loader } from "@plane/ui";
// helpers
import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
import { renderFormattedDate } from "helpers/date-time.helper";
import { truncateText } from "helpers/string.helper";
// types
import { IIssueLite } from "types";
@ -66,9 +66,7 @@ export const IssuesList: React.FC<Props> = ({ issues, type }) => {
{dateDifference} {dateDifference > 1 ? "days" : "day"}
</h5>
<h5 className="col-span-2">{truncateText(issue.name, 30)}</h5>
<h5 className="cursor-default">
{renderShortDateWithYearFormat(new Date(date?.toString() ?? ""))}
</h5>
<h5 className="cursor-default">{renderFormattedDate(new Date(date?.toString() ?? ""))}</h5>
</div>
</span>
</Link>

176
web/helpers/date-time.helper.ts
View File

@ -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<Date> => {
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

14
web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
View File

@ -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<IPage>({
const { handleSubmit, setValue, watch, getValues, control } = useForm<IPage>({
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(() => {
<Controller
name="description_html"
control={control}
render={({ field: { value, onChange } }) => (
render={({ field: { onChange } }) => (
<DocumentEditorWithRef
isSubmitting={isSubmitting}
documentDetails={{

4
web/store/issues/project-issues/base-issue.store.ts
View File

@ -10,7 +10,7 @@ import { IIssueResponse } from "../types";
// constants
import { ISSUE_PRIORITIES, ISSUE_STATE_GROUPS } from "constants/issue";
// helpers
import { renderDateFormat } from "helpers/date-time.helper";
import { renderFormattedPayloadDate } from "helpers/date-time.helper";
export interface IIssueBaseStore {
groupedIssues(
@ -201,7 +201,7 @@ export class IssueBaseStore implements IIssueBaseStore {
if (Array.isArray(value)) {
if (value.length) return value;
else return ["None"];
} else if (isDate) return [renderDateFormat(value) || "None"];
} else if (isDate) return [renderFormattedPayloadDate(value ?? "") || "None"];
else return [value || "None"];
}
}

4
web/store/page.store.ts
View File

@ -6,7 +6,7 @@ import isThisWeek from "date-fns/isThisWeek";
import { ProjectService } from "services/project";
import { PageService } from "services/page.service";
// helpers
import { renderDateFormat } from "helpers/date-time.helper";
import { renderFormattedPayloadDate } from "helpers/date-time.helper";
// types
import { RootStore } from "./root";
import { IPage, IRecentPages } from "types";
@ -329,7 +329,7 @@ export class PageStore implements IPageStore {
...this.archivedPages,
[projectId]: [
...this.archivedPages[projectId],
{ ...archivedPage, archived_at: renderDateFormat(new Date()) },
{ ...archivedPage, archived_at: renderFormattedPayloadDate(new Date()) },
],
};
});