plane/apps/app/helpers/date-time.helper.ts
Dakshesh Jain 53e443d816
feat: notifications (#1566)
* feat: added new issue subscriber table

* dev: notification model

* feat: added CRUD operation for issue subscriber

* Revert "feat: added CRUD operation for issue subscriber"

This reverts commit b22e062576.

* feat: added CRUD operation for issue subscriber

* dev: notification models and operations

* dev: remove delete endpoint response data

* dev: notification endpoints and fix bg worker for saving notifications

* feat: added list and unsubscribe function in issue subscriber

* dev: filter by snoozed and response update for list and permissions

* dev: update issue notifications

* dev: notification  segregation

* dev: update notifications

* dev: notification filtering

* dev: add issue name in notifications

* dev: notification new endpoints

* fix: pushing local settings

* feat: notification workflow setup and made basic UI

* style: improved UX with toast alerts and other interactions

refactor: changed classnames according to new theme structure, changed all icons to material icons

* feat: showing un-read notification count

* feat: not showing 'subscribe' button on issue created by user & assigned to user

not showing 'Create by you' for view & guest of the workspace

* fix: 'read' -> 'unread' heading, my issue wrong filter

* feat: made snooze dropdown & modal

feat: switched to calendar

* fix: minor ui fixes

* feat: snooze modal date/time select

* fix: params for read/un-read notification

* style: snooze notification modal

---------

Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>
Co-authored-by: pablohashescobar <nikhilschacko@gmail.com>
Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
2023-07-19 14:44:04 +05:30

377 lines
9.6 KiB
TypeScript

export const renderDateFormat = (date: string | Date | null) => {
if (!date) return "N/A";
var d = new Date(date),
month = "" + (d.getMonth() + 1),
day = "" + d.getDate(),
year = d.getFullYear();
if (month.length < 2) month = "0" + month;
if (day.length < 2) day = "0" + day;
return [year, month, day].join("-");
};
export const renderShortNumericDateFormat = (date: string | Date) =>
new Date(date).toLocaleDateString("en-UK", {
day: "numeric",
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);
const timeDiff = Math.abs(eventDate.getTime() - today.getTime());
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":
break;
case "string":
time = +new Date(time);
break;
case "object":
if (time.constructor === Date) time = time.getTime();
break;
default:
time = +new Date();
}
var time_formats = [
[60, "seconds", 1], // 60
[120, "1 minute ago", "1 minute from now"], // 60*2
[3600, "minutes", 60], // 60*60, 60
[7200, "1 hour ago", "1 hour from now"], // 60*60*2
[86400, "hours", 3600], // 60*60*24, 60*60
[172800, "Yesterday", "Tomorrow"], // 60*60*24*2
[604800, "days", 86400], // 60*60*24*7, 60*60*24
[1209600, "Last week", "Next week"], // 60*60*24*7*4*2
[2419200, "weeks", 604800], // 60*60*24*7*4, 60*60*24*7
[4838400, "Last month", "Next month"], // 60*60*24*7*4*2
[29030400, "months", 2419200], // 60*60*24*7*4*12, 60*60*24*7*4
[58060800, "Last year", "Next year"], // 60*60*24*7*4*12*2
[2903040000, "years", 29030400], // 60*60*24*7*4*12*100, 60*60*24*7*4*12
[5806080000, "Last century", "Next century"], // 60*60*24*7*4*12*100*2
[58060800000, "centuries", 2903040000], // 60*60*24*7*4*12*100*20, 60*60*24*7*4*12*100
];
var seconds = (+new Date() - time) / 1000,
token = "ago",
list_choice = 1;
if (seconds == 0) {
return "Just now";
}
if (seconds < 0) {
seconds = Math.abs(seconds);
token = "from now";
list_choice = 2;
}
var i = 0,
format: any[];
while ((format = time_formats[i++]))
if (seconds < format[0]) {
if (typeof format[2] == "string") return format[list_choice];
else return Math.floor(seconds / format[2]) + " " + format[1] + " " + token;
}
return time;
};
export const formatDateDistance = (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}m`;
}
} else {
return `${hours}h`;
}
} else if (days < 7) {
return `${days}d`;
} else if (days < 30) {
return `${Math.floor(days / 7)}w`;
} else if (days < 365) {
return `${Math.floor(days / 30)}m`;
} else {
return `${Math.floor(days / 365)}y`;
}
};
export const getDateRangeStatus = (
startDate: string | null | undefined,
endDate: string | null | undefined
) => {
if (!startDate || !endDate) return "draft";
const today = renderDateFormat(new Date());
const now = new Date(today);
const start = new Date(startDate);
const end = new Date(endDate);
if (start <= now && end >= now) {
return "current";
} else if (start > now) {
return "upcoming";
} 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;
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()];
return isNaN(date.getTime()) ? placeholder ?? "N/A" : `${day} ${month}`;
};
export const render12HourFormatTime = (date: string | Date): string => {
if (!date || date === "") return "";
date = new Date(date);
let hours = date.getHours();
const minutes = date.getMinutes();
let period = "AM";
if (hours >= 12) {
period = "PM";
if (hours > 12) hours -= 12;
}
return hours + ":" + minutes + " " + period;
};
export const render24HourFormatTime = (date: string | Date): string => {
if (!date || date === "") return "";
date = new Date(date);
const hours = date.getHours();
let minutes: any = date.getMinutes();
// add leading zero to single digit minutes
if (minutes < 10) minutes = "0" + minutes;
return hours + ":" + minutes;
};
export const isDateRangeValid = (startDate: string, endDate: string) =>
new Date(startDate) < new Date(endDate);
export const isDateGreaterThanToday = (dateStr: string) => {
const date = new Date(dateStr);
const today = new Date();
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;
}> => [
{ label: "12:00", value: "12:00" },
{ label: "12:30", value: "12:30" },
{ label: "01:00", value: "01:00" },
{ label: "01:30", value: "01:30" },
{ label: "02:00", value: "02:00" },
{ label: "02:30", value: "02:30" },
{ label: "03:00", value: "03:00" },
{ label: "03:30", value: "03:30" },
{ label: "04:00", value: "04:00" },
{ label: "04:30", value: "04:30" },
{ label: "05:00", value: "05:00" },
{ label: "05:30", value: "05:30" },
{ label: "06:00", value: "06:00" },
{ label: "06:30", value: "06:30" },
{ label: "07:00", value: "07:00" },
{ label: "07:30", value: "07:30" },
{ label: "08:00", value: "08:00" },
{ label: "08:30", value: "08:30" },
{ label: "09:00", value: "09:00" },
{ label: "09:30", value: "09:30" },
{ label: "10:00", value: "10:00" },
{ label: "10:30", value: "10:30" },
{ label: "11:00", value: "11:00" },
{ label: "11:30", value: "11:30" },
];