this repo has no description
Don't even need dayjs anymore
+22
-14
+22
-14
src/components/relative-time.jsx
+22
-14
src/components/relative-time.jsx
···
1
1
import { i18n } from '@lingui/core';
2
2
import { t, Trans } from '@lingui/macro';
3
-
import dayjs from 'dayjs';
4
3
import { useEffect, useMemo, useReducer } from 'preact/hooks';
5
4
6
5
import localeMatch from '../utils/locale-match';
7
6
import mem from '../utils/mem';
7
+
8
+
function isValidDate(value) {
9
+
if (value instanceof Date) {
10
+
return !isNaN(value.getTime());
11
+
} else {
12
+
const date = new Date(value);
13
+
return !isNaN(date.getTime());
14
+
}
15
+
}
8
16
9
17
const resolvedLocale = new Intl.DateTimeFormat().resolvedOptions().locale;
10
18
const DTF = mem((locale, opts = {}) => {
···
63
71
export default function RelativeTime({ datetime, format }) {
64
72
if (!datetime) return null;
65
73
const [renderCount, rerender] = useReducer((x) => x + 1, 0);
66
-
const date = useMemo(() => dayjs(datetime), [datetime]);
74
+
const date = useMemo(() => new Date(datetime), [datetime]);
67
75
const [dateStr, dt, title] = useMemo(() => {
68
-
if (!date.isValid()) return ['' + datetime, '', ''];
69
-
const realDate = date.toDate();
76
+
if (!isValidDate(date)) return ['' + datetime, '', ''];
70
77
let str;
71
78
if (format === 'micro') {
72
79
// If date <= 1 day ago or day is within this year
73
80
const now = new Date();
74
-
const dayDiff = (now.getTime() - realDate.getTime()) / 1000 / day;
81
+
const dayDiff = (now.getTime() - date.getTime()) / 1000 / day;
75
82
if (dayDiff <= 1) {
76
-
str = twitterFromNow(realDate);
83
+
str = twitterFromNow(date);
77
84
} else {
78
-
const sameYear = now.getFullYear() === realDate.getFullYear();
85
+
const sameYear = now.getFullYear() === date.getFullYear();
79
86
if (sameYear) {
80
87
str = DTF(i18n.locale, {
81
88
year: undefined,
82
89
month: 'short',
83
90
day: 'numeric',
84
-
}).format(realDate);
91
+
}).format(date);
85
92
} else {
86
93
str = DTF(i18n.locale, {
87
94
dateStyle: 'short',
88
-
}).format(realDate);
95
+
}).format(date);
89
96
}
90
97
}
91
98
}
92
-
if (!str) str = rtfFromNow(realDate);
93
-
return [str, realDate.toISOString(), realDate.toLocaleString()];
99
+
if (!str) str = rtfFromNow(date);
100
+
return [str, date.toISOString(), date.toLocaleString()];
94
101
}, [date, format, renderCount]);
95
102
96
103
useEffect(() => {
97
-
if (!date.isValid()) return;
104
+
if (!isValidDate(date)) return;
98
105
let timeout;
99
106
let raf;
100
107
function rafRerender() {
···
107
114
// If less than 1 minute, rerender every 10s
108
115
// If less than 1 hour rerender every 1m
109
116
// Else, don't need to rerender
110
-
if (date.diff(dayjs(), 'minute', true) < 1) {
117
+
const seconds = (Date.now() - date.getTime()) / 1000;
118
+
if (seconds < minute) {
111
119
timeout = setTimeout(rafRerender, 10_000);
112
-
} else if (date.diff(dayjs(), 'hour', true) < 1) {
120
+
} else if (seconds < hour) {
113
121
timeout = setTimeout(rafRerender, 60_000);
114
122
}
115
123
}