this repo has no description
Perf fixes
+32
-38
+13
-31
src/components/relative-time.jsx
+13
-31
src/components/relative-time.jsx
···
8
8
import dayjsTwitter from 'dayjs-twitter';
9
9
import localizedFormat from 'dayjs/plugin/localizedFormat';
10
10
import relativeTime from 'dayjs/plugin/relativeTime';
11
-
import { useEffect, useState } from 'preact/hooks';
12
11
13
12
dayjs.extend(dayjsTwitter);
14
13
dayjs.extend(localizedFormat);
···
19
18
export default function RelativeTime({ datetime, format }) {
20
19
if (!datetime) return null;
21
20
const date = dayjs(datetime);
22
-
const [dateStr, setDateStr] = useState('');
23
-
24
-
useEffect(() => {
25
-
let timer, raf;
26
-
const update = () => {
27
-
raf = requestAnimationFrame(() => {
28
-
let str;
29
-
if (format === 'micro') {
30
-
// If date <= 1 day ago or day is within this year
31
-
const now = dayjs();
32
-
const dayDiff = now.diff(date, 'day');
33
-
if (dayDiff <= 1 || now.year() === date.year()) {
34
-
str = date.twitter();
35
-
} else {
36
-
str = dtf.format(date.toDate());
37
-
}
38
-
} else {
39
-
str = date.fromNow();
40
-
}
41
-
setDateStr(str);
42
-
43
-
timer = setTimeout(update, 30_000);
44
-
});
45
-
};
46
-
raf = requestAnimationFrame(update);
47
-
return () => {
48
-
clearTimeout(timer);
49
-
cancelAnimationFrame(raf);
50
-
};
51
-
}, [date]);
21
+
let dateStr;
22
+
if (format === 'micro') {
23
+
// If date <= 1 day ago or day is within this year
24
+
const now = dayjs();
25
+
const dayDiff = now.diff(date, 'day');
26
+
if (dayDiff <= 1 || now.year() === date.year()) {
27
+
dateStr = date.twitter();
28
+
} else {
29
+
dateStr = dtf.format(date.toDate());
30
+
}
31
+
} else {
32
+
dateStr = date.fromNow();
33
+
}
52
34
53
35
return (
54
36
<time datetime={date.toISOString()} title={date.format('LLLL')}>
+19
-7
src/utils/nice-date-time.js
+19
-7
src/utils/nice-date-time.js
···
1
+
import mem from './mem';
2
+
1
3
const { locale } = new Intl.DateTimeFormat().resolvedOptions();
2
4
3
-
function niceDateTime(date, { hideTime, formatOpts } = {}) {
4
-
if (!(date instanceof Date)) {
5
-
date = new Date(date);
6
-
}
5
+
const _DateTimeFormat = (opts) => {
6
+
const { dateYear, hideTime, formatOpts } = opts || {};
7
7
const currentYear = new Date().getFullYear();
8
-
const dateText = Intl.DateTimeFormat(locale, {
8
+
return Intl.DateTimeFormat(locale, {
9
9
// Show year if not current year
10
-
year: date.getFullYear() === currentYear ? undefined : 'numeric',
10
+
year: dateYear === currentYear ? undefined : 'numeric',
11
11
month: 'short',
12
12
day: 'numeric',
13
13
// Hide time if requested
14
14
hour: hideTime ? undefined : 'numeric',
15
15
minute: hideTime ? undefined : 'numeric',
16
16
...formatOpts,
17
-
}).format(date);
17
+
});
18
+
};
19
+
const DateTimeFormat = mem(_DateTimeFormat);
20
+
21
+
function niceDateTime(date, dtfOpts) {
22
+
if (!(date instanceof Date)) {
23
+
date = new Date(date);
24
+
}
25
+
const DTF = DateTimeFormat({
26
+
dateYear: date.getFullYear(),
27
+
...dtfOpts,
28
+
});
29
+
const dateText = DTF.format(date);
18
30
return dateText;
19
31
}
20
32