oreolek/phanpy
1
0
Fork 0
Code Activity

Perf fixes

Browse source
This commit is contained in:
Lim Chee Aun 2023-12-24 22:49:23 +08:00
parent 94075086ce
commit 7cfa839e1c
2 changed files with 32 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
src/components/relative-time.jsx
View file

@ -8,7 +8,6 @@ import dayjs from 'dayjs';
import dayjsTwitter from 'dayjs-twitter'; import dayjsTwitter from 'dayjs-twitter';
import localizedFormat from 'dayjs/plugin/localizedFormat'; import localizedFormat from 'dayjs/plugin/localizedFormat';
import relativeTime from 'dayjs/plugin/relativeTime'; import relativeTime from 'dayjs/plugin/relativeTime';
import { useEffect, useState } from 'preact/hooks';
dayjs.extend(dayjsTwitter); dayjs.extend(dayjsTwitter);
dayjs.extend(localizedFormat); dayjs.extend(localizedFormat);
@ -19,36 +18,19 @@ const dtf = new Intl.DateTimeFormat();
export default function RelativeTime({ datetime, format }) { export default function RelativeTime({ datetime, format }) {
if (!datetime) return null; if (!datetime) return null;
const date = dayjs(datetime); const date = dayjs(datetime);
const [dateStr, setDateStr] = useState(''); let dateStr;
if (format === 'micro') {
useEffect(() => { // If date <= 1 day ago or day is within this year
let timer, raf; const now = dayjs();
const update = () => { const dayDiff = now.diff(date, 'day');
raf = requestAnimationFrame(() => { if (dayDiff <= 1 || now.year() === date.year()) {
let str; dateStr = date.twitter();
if (format === 'micro') { } else {
// If date <= 1 day ago or day is within this year dateStr = dtf.format(date.toDate());
const now = dayjs(); }
const dayDiff = now.diff(date, 'day'); } else {
if (dayDiff <= 1 || now.year() === date.year()) { dateStr = date.fromNow();
str = date.twitter(); }
} else {
str = dtf.format(date.toDate());
}
} else {
str = date.fromNow();
}
setDateStr(str);
timer = setTimeout(update, 30_000);
});
};
raf = requestAnimationFrame(update);
return () => {
clearTimeout(timer);
cancelAnimationFrame(raf);
};
}, [date]);
return ( return (
<time datetime={date.toISOString()} title={date.format('LLLL')}> <time datetime={date.toISOString()} title={date.format('LLLL')}>

26
src/utils/nice-date-time.js
View file

@ -1,20 +1,32 @@
import mem from './mem';
const { locale } = new Intl.DateTimeFormat().resolvedOptions(); const { locale } = new Intl.DateTimeFormat().resolvedOptions();
function niceDateTime(date, { hideTime, formatOpts } = {}) { const _DateTimeFormat = (opts) => {
if (!(date instanceof Date)) { const { dateYear, hideTime, formatOpts } = opts || {};
date = new Date(date);
}
const currentYear = new Date().getFullYear(); const currentYear = new Date().getFullYear();
const dateText = Intl.DateTimeFormat(locale, { return Intl.DateTimeFormat(locale, {
// Show year if not current year // Show year if not current year
year: date.getFullYear() === currentYear ? undefined : 'numeric', year: dateYear === currentYear ? undefined : 'numeric',
month: 'short', month: 'short',
day: 'numeric', day: 'numeric',
// Hide time if requested // Hide time if requested
hour: hideTime ? undefined : 'numeric', hour: hideTime ? undefined : 'numeric',
minute: hideTime ? undefined : 'numeric', minute: hideTime ? undefined : 'numeric',
...formatOpts, ...formatOpts,
}).format(date); });
};
const DateTimeFormat = mem(_DateTimeFormat);
function niceDateTime(date, dtfOpts) {
if (!(date instanceof Date)) {
date = new Date(date);
}
const DTF = DateTimeFormat({
dateYear: date.getFullYear(),
...dtfOpts,
});
const dateText = DTF.format(date);
return dateText; return dateText;
} }