core&ui: add discussion history (#450)

Co-authored-by: 无限UCW <45730483+wuxianucw@users.noreply.github.com>
Co-authored-by: undefined <i@undefined.moe>

packages/ui-default/components/discussion/comments.page.styl

@@ -48,6 +48,10 @@ $downvote-color = red
   float: left
   margin-bottom: rem(5px)
 
+  .history
+    float: right
+    margin-left: rem(5px)
+
 .dczcomments__operations
   font-size: rem($font-size)
   float: right

packages/ui-default/components/discussion/history.page.tsx

@@ -0,0 +1,69 @@
+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 from 'vj/utils/i18n';
+import request from 'vj/utils/request';
+import tpl from 'vj/utils/tpl';
+
+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;