Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-02-02 06:06:41 +01:00
Code Issues Projects Releases Packages Wiki Activity

Replace @github/relative-time-element with dayjs

Browse source
This commit is contained in:
Lim Chee Aun 2023-01-05 10:50:27 +08:00
parent c77ed16804
commit 04ccf8aca9
9 changed files with 107 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
package-lock.json generated
View file

@ -8,8 +8,9 @@
"name": "phanpy",
"version": "0.1.0",
"dependencies": {
"@github/relative-time-element": "~4.1.5",
"@github/text-expander-element": "~2.3.0",
"dayjs": "~1.11.7",
"dayjs-twitter": "~0.5.0",
"fast-blurhash": "~1.1.2",
"history": "~5.3.0",
"iconify-icon": "~1.0.2",
@ -2062,11 +2063,6 @@
"resolved": "https://registry.npmjs.org/@github/combobox-nav/-/combobox-nav-2.1.5.tgz",
"integrity": "sha512-dmG1PuppNKHnBBEcfylWDwj9SSxd/E/qd8mC1G/klQC3s7ps5q6JZ034mwkkG0LKfI+Y+UgEua/ROD776N400w=="
},
"node_modules/@github/relative-time-element": {
"version": "4.1.5",
"resolved": "https://registry.npmjs.org/@github/relative-time-element/-/relative-time-element-4.1.5.tgz",
"integrity": "sha512-WAf1EQV5Sn6jGuAIQur/ztKlEV9R+VHDNwqEbeaOb6s9fiwM5z7+ujlWNZtgFkDp3lF0H8D/f0vdiPlfHz0ZTQ=="
},
"node_modules/@github/text-expander-element": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/@github/text-expander-element/-/text-expander-element-2.3.0.tgz",
@ -3001,6 +2997,19 @@
"node": ">=8"
}
},
"node_modules/dayjs": {
"version": "1.11.7",
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz",
"integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ=="
},
"node_modules/dayjs-twitter": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/dayjs-twitter/-/dayjs-twitter-0.5.0.tgz",
"integrity": "sha512-SZ7qEUISstBLUXdlGAbLrwr6zfRM9kaCfbq4uVTerM/HXzuHiiGzzUqAJVhxt+3tf69E+ocmQdP6YYpOINv05w==",
"dependencies": {
"duration-js": "^4.0.0"
}
},
"node_modules/debug": {
"version": "4.3.4",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@ -3060,6 +3069,11 @@
"tslib": "^2.0.3"
}
},
"node_modules/duration-js": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/duration-js/-/duration-js-4.0.0.tgz",
"integrity": "sha512-qoXjOsH97r+NrOa6sK5V2cwBOouVG/LI9jwgwKvjVkyqGpZ72yilWjjzFJYPqqbvNZDwpRMaLEUFE+PTefvOEA=="
},
"node_modules/ejs": {
"version": "3.1.8",
"resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.8.tgz",
@ -7183,11 +7197,6 @@
"resolved": "https://registry.npmjs.org/@github/combobox-nav/-/combobox-nav-2.1.5.tgz",
"integrity": "sha512-dmG1PuppNKHnBBEcfylWDwj9SSxd/E/qd8mC1G/klQC3s7ps5q6JZ034mwkkG0LKfI+Y+UgEua/ROD776N400w=="
},
"@github/relative-time-element": {
"version": "4.1.5",
"resolved": "https://registry.npmjs.org/@github/relative-time-element/-/relative-time-element-4.1.5.tgz",
"integrity": "sha512-WAf1EQV5Sn6jGuAIQur/ztKlEV9R+VHDNwqEbeaOb6s9fiwM5z7+ujlWNZtgFkDp3lF0H8D/f0vdiPlfHz0ZTQ=="
},
"@github/text-expander-element": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/@github/text-expander-element/-/text-expander-element-2.3.0.tgz",
@ -7925,6 +7934,19 @@
"integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==",
"dev": true
},
"dayjs": {
"version": "1.11.7",
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz",
"integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ=="
},
"dayjs-twitter": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/dayjs-twitter/-/dayjs-twitter-0.5.0.tgz",
"integrity": "sha512-SZ7qEUISstBLUXdlGAbLrwr6zfRM9kaCfbq4uVTerM/HXzuHiiGzzUqAJVhxt+3tf69E+ocmQdP6YYpOINv05w==",
"requires": {
"duration-js": "^4.0.0"
}
},
"debug": {
"version": "4.3.4",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@ -7964,6 +7986,11 @@
"tslib": "^2.0.3"
}
},
"duration-js": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/duration-js/-/duration-js-4.0.0.tgz",
"integrity": "sha512-qoXjOsH97r+NrOa6sK5V2cwBOouVG/LI9jwgwKvjVkyqGpZ72yilWjjzFJYPqqbvNZDwpRMaLEUFE+PTefvOEA=="
},
"ejs": {
"version": "3.1.8",
"resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.8.tgz",

3
package.json
View file

@ -10,8 +10,9 @@
"source-map-explorer": "npx source-map-explorer dist/assets/*.js"
},
"dependencies": {
"@github/relative-time-element": "~4.1.5",
"@github/text-expander-element": "~2.3.0",
"dayjs": "~1.11.7",
"dayjs-twitter": "~0.5.0",
"fast-blurhash": "~1.1.2",
"history": "~5.3.0",
"iconify-icon": "~1.0.2",

57
src/components/relative-time.jsx Normal file
View file

@ -0,0 +1,57 @@
// Twitter-style relative time component
// Seconds = 1s
// Minutes = 1m
// Hours = 1h
// Days = 1d
// After 7 days, use DD/MM/YYYY or MM/DD/YYYY
import dayjs from 'dayjs';
import dayjsTwitter from 'dayjs-twitter';
import localizedFormat from 'dayjs/plugin/localizedFormat';
import relativeTime from 'dayjs/plugin/relativeTime';
import { useEffect, useState } from 'preact/hooks';
dayjs.extend(dayjsTwitter);
dayjs.extend(localizedFormat);
dayjs.extend(relativeTime);
const dtf = new Intl.DateTimeFormat();
export default function RelativeTime({ datetime, format }) {
if (!datetime) return null;
const date = dayjs(datetime);
const [dateStr, setDateStr] = useState('');
useEffect(() => {
let timer, raf;
const update = () => {
raf = requestAnimationFrame(() => {
let str;
if (format === 'micro') {
// If date <= 7 days
if (date.diff(dayjs(), 'day') >= -7) {
str = date.twitter();
} else {
// If date > 7 days
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 (
<time datetime={date.toISOString()} title={date.format('LLLL')}>
{dateStr}
</time>
);
}

23
src/components/status.jsx
View file

@ -28,6 +28,7 @@ import visibilityIconsMap from '../utils/visibility-icons-map';
import Avatar from './avatar';
import Icon from './icon';
import RelativeTime from './relative-time';
function fetchAccount(id) {
return masto.v1.accounts.fetch(id);
@ -253,14 +254,7 @@ function Status({
alt={visibility}
size="s"
/>{' '}
<relative-time
datetime={createdAtDate.toISOString()}
format="micro"
threshold="P1D"
prefix=""
>
{createdAtDate.toLocaleString()}
</relative-time>
<RelativeTime datetime={createdAtDate} format="micro" />
</a>
) : (
<span class="time">
@ -269,14 +263,7 @@ function Status({
alt={visibility}
size="s"
/>{' '}
<relative-time
datetime={createdAtDate.toISOString()}
format="micro"
threshold="P1D"
prefix=""
>
{createdAtDate.toLocaleString()}
</relative-time>
<RelativeTime datetime={createdAtDate} format="micro" />
</span>
))}
</div>
@ -1136,9 +1123,7 @@ function Poll({ poll, lang, readOnly, onUpdate = () => {} }) {
</>
)}{' '}
&bull; {expired ? 'Ended' : 'Ending'}{' '}
{!!expiresAtDate && (
<relative-time datetime={expiresAtDate.toISOString()} />
)}
{!!expiresAtDate && <RelativeTime datetime={expiresAtDate} />}
</p>
)}
</div>

1
src/compose.jsx
View file

@ -2,7 +2,6 @@ import './index.css';
import './app.css';
import '@github/relative-time-element';
import { login } from 'masto';
import { render } from 'preact';
import { useEffect, useState } from 'preact/hooks';

1
src/main.jsx
View file

@ -1,6 +1,5 @@
import './index.css';
import '@github/relative-time-element';
import { render } from 'preact';
import { App } from './app';

5
src/pages/notifications.jsx
View file

@ -8,6 +8,7 @@ import Avatar from '../components/avatar';
import Icon from '../components/icon';
import Loader from '../components/loader';
import NameText from '../components/name-text';
import RelativeTime from '../components/relative-time';
import Status from '../components/status';
import states from '../utils/states';
import store from '../utils/store';
@ -102,11 +103,9 @@ function Notification({ notification }) {
<span class="insignificant">
{' '}
•{' '}
<relative-time
<RelativeTime
datetime={notification.createdAt}
format="micro"
threshold="P1D"
prefix=""
/>
</span>
)}

4
src/pages/settings.jsx
View file

@ -5,6 +5,7 @@ import { useRef, useState } from 'preact/hooks';
import Avatar from '../components/avatar';
import Icon from '../components/icon';
import NameText from '../components/name-text';
import RelativeTime from '../components/relative-time';
import states from '../utils/states';
import store from '../utils/store';
@ -196,8 +197,7 @@ function Settings({ onClose }) {
</p>
{__BUILD_TIME__ && (
<p>
Last build:{' '}
<relative-time datetime={new Date(__BUILD_TIME__).toISOString()} />{' '}
Last build: <RelativeTime datetime={new Date(__BUILD_TIME__)} />{' '}
{__COMMIT_HASH__ && (
<>
(

5
src/pages/status.jsx
View file

@ -17,6 +17,7 @@ import { useSnapshot } from 'valtio';
import Icon from '../components/icon';
import Loader from '../components/loader';
import NameText from '../components/name-text';
import RelativeTime from '../components/relative-time';
import Status from '../components/status';
import htmlContentLength from '../utils/html-content-length';
import shortenNumber from '../utils/shorten-number';
@ -325,11 +326,9 @@ function StatusPage({ id }) {
<NameText showAvatar account={heroStatus.account} short />{' '}
<span class="insignificant">
&bull;{' '}
<relative-time
<RelativeTime
datetime={heroStatus.createdAt}
format="micro"
threshold="P1D"
prefix=""
/>
</span>
</span>