You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
68 lines
2.3 KiB
TypeScript
68 lines
2.3 KiB
TypeScript
import { Popover } from '@blueprintjs/core';
|
|
import React from 'react';
|
|
import ReactDOM from 'react-dom/client';
|
|
import { QueryClient, QueryClientProvider, useQuery } from 'react-query';
|
|
import TimeAgo from 'timeago-react';
|
|
import { InfoDialog } from 'vj/components/dialog';
|
|
import { AutoloadPage } from 'vj/misc/Page';
|
|
import { i18n, request, tpl } from 'vj/utils';
|
|
|
|
async function historyDialog(payload, time, uid) {
|
|
const ts = new Date(time).getTime();
|
|
const rawHtml = await fetch(`${payload}?time=${ts}&render=1`).then((res) => res.text());
|
|
new InfoDialog({
|
|
$body: tpl`
|
|
<div class="typo">
|
|
<p><div data-user>${uid}</div> ${i18n('Edited at')} <span class="time relative" data-timestamp="${ts / 1000}">${time}</span></p>
|
|
${{ templateRaw: true, html: rawHtml }}
|
|
</div>`,
|
|
}).open();
|
|
}
|
|
|
|
const queryClient = new QueryClient();
|
|
|
|
function History({ payload }) {
|
|
const [load, setLoad] = React.useState(false);
|
|
const { isLoading, isError, data } = useQuery(['history', payload], async () => {
|
|
const { history } = await request.get(`${payload}?all=1`);
|
|
return history;
|
|
}, { enabled: !!load });
|
|
return (
|
|
<Popover usePortal interactionKind="hover" position="bottom" onOpening={() => setLoad(true)}>
|
|
<span>{i18n('Edited')} <span className="icon icon-expand_more"></span></span>
|
|
<ol className="menu">
|
|
{(isLoading || isError) && (
|
|
<li className="menu__item">
|
|
<a className="menu__link">
|
|
{isLoading ? i18n('Loading...') : i18n('Loading failed.')}
|
|
</a>
|
|
</li>
|
|
)}
|
|
{data?.map((item) => (
|
|
<li className="menu__item" key={item.time}>
|
|
<a className="menu__link" onClick={() => historyDialog(payload, item.time, item.uid)}>
|
|
{i18n('Edited at')}
|
|
{' '}
|
|
<TimeAgo datetime={item.time} locale={i18n('timeago_locale')} />
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ol>
|
|
</Popover>
|
|
);
|
|
}
|
|
|
|
const page = new AutoloadPage('discussionHistoryPage', () => {
|
|
$('[data-discussion-history]').each((i, e) => {
|
|
const url = $(e).data('raw-url');
|
|
if (!url) return;
|
|
ReactDOM.createRoot(e).render(
|
|
<QueryClientProvider client={queryClient}>
|
|
<History payload={url} />
|
|
</QueryClientProvider>,
|
|
);
|
|
});
|
|
});
|
|
|
|
export default page;
|