ui: change to ts & tsx

packages/ui-default/pages/contest_main.page.ts

@@ -1,9 +1,8 @@
 import { NamedPage } from 'vj/misc/Page';
 
 const page = new NamedPage('contest_main', () => {
-  // Contest Filter
-  $('[name="filter-form"] [name="rule"]').change(() => {
-    $('[name="filter-form"]').submit();
+  $('[name="filter-form"] [name="rule"]').on('change', () => {
+    $('[name="filter-form"]').trigger('submit');
   });
 });
 

packages/ui-default/pages/discussion_detail.page.js

@@ -1,10 +0,0 @@
-import { NamedPage } from 'vj/misc/Page';
-
-const page = new NamedPage('discussion_detail', async () => {
-  $(document).on('click', '[name="problem-sidebar__show-category"]', (ev) => {
-    $(ev.currentTarget).hide();
-    $('[name="problem-sidebar__categories"]').show();
-  });
-});
-
-export default page;

packages/ui-default/pages/discussion_node.page.js

@@ -1,10 +0,0 @@
-import { NamedPage } from 'vj/misc/Page';
-
-const page = new NamedPage('discussion_node', async () => {
-  $(document).on('click', '[name="problem-sidebar__show-category"]', (ev) => {
-    $(ev.currentTarget).hide();
-    $('[name="problem-sidebar__categories"]').show();
-  });
-});
-
-export default page;

packages/ui-default/pages/domain_join_applications.page.ts

@@ -6,13 +6,13 @@ const page = new NamedPage('domain_join_applications', () => {
   const $expire = $('[name="expire"]');
   const $code = $('[name="invitationCode"]');
   function updateFormState() {
-    const method = parseInt($('[name="method"]').val(), 10);
+    const method = +$('[name="method"]').val();
     $role.prop('disabled', method === domainEnum.JOIN_METHOD_NONE).trigger('vjFormDisableUpdate');
     $expire.prop('disabled', method === domainEnum.JOIN_METHOD_NONE).trigger('vjFormDisableUpdate');
     $code.prop('disabled', method !== domainEnum.JOIN_METHOD_CODE).trigger('vjFormDisableUpdate');
   }
   updateFormState();
-  $('[name="method"]').change(() => updateFormState());
+  $('[name="method"]').on('change', updateFormState);
 });
 
 export default page;

packages/ui-default/pages/domain_role.page.js

@@ -40,9 +40,7 @@ const page = new NamedPage('domain_role', () => {
 
   async function handleClickCreateRole() {
     const action = await createRoleDialog.clear().open();
-    if (action !== 'ok') {
-      return;
-    }
+    if (action !== 'ok') return;
     const role = createRoleDialog.$dom.find('[name="role"]').val();
     try {
       await request.post('', {

packages/ui-default/pages/problem_detail.page.jsx

@@ -1,9 +1,6 @@
 import yaml from 'js-yaml';
 import { getScoreColor } from '@hydrooj/utils/lib/status';
 import { NamedPage } from 'vj/misc/Page';
-import tpl from 'vj/utils/tpl';
-import i18n from 'vj/utils/i18n';
-import { ConfirmDialog } from 'vj/components/dialog';
 import { downloadProblemSet } from 'vj/components/zipDownloader';
 import loadReactRedux from 'vj/utils/loadReactRedux';
 import delay from 'vj/utils/delay';
@@ -263,15 +260,7 @@ const page = new NamedPage(['problem_detail', 'contest_detail_problem', 'homewor
     leaveScratchpadMode();
     ev.preventDefault();
   });
-  $(document).on('click', '[name="problem-sidebar__rejudge"]', (ev) => {
-    ev.preventDefault();
-    new ConfirmDialog({
-      $body: tpl.typoMsg(i18n('Confirm rejudge this problem?')),
-    }).open().then((action) => {
-      if (action !== 'yes') return;
-      $(ev.currentTarget).closest('form').trigger('submit');
-    });
-  });
+
   $(document).on('click', '[name="show_tags"]', (ev) => {
     $(ev.currentTarget).hide();
     $('span.tags').css('display', 'inline-block');

packages/ui-default/pages/problem_edit.page.js

@@ -144,10 +144,6 @@ function buildCategoryFilter() {
 }
 
 export default new NamedPage(['problem_create', 'problem_edit'], (pagename) => {
-  $(document).on('click', '[name="problem-sidebar__show-category"]', (ev) => {
-    $(ev.currentTarget).hide();
-    $('[name="problem-sidebar__categories"]').show();
-  });
   let confirmed = false;
   $(document).on('click', '[name="operation"]', (ev) => {
     ev.preventDefault();
@@ -178,7 +174,7 @@ export default new NamedPage(['problem_create', 'problem_edit'], (pagename) => {
     $('img').each(function () {
       if (this.src.startsWith('file://')) this.setAttribute('src', this.src.replace('file://', './file/'));
     });
-  }, 50);
+  }, 200);
 
   const $main = $('textarea[data-editor]');
   const $field = $('textarea[data-markdown-upload]');

packages/ui-default/pages/problem_files.page.js

@@ -235,16 +235,6 @@ const page = new NamedPage('problem_files', () => {
     await pjax.request({ push: false });
   }
 
-  $(document).on('click', '[name="problem-sidebar__rejudge"]', (ev) => {
-    ev.preventDefault();
-    new ConfirmDialog({
-      $body: tpl.typoMsg(i18n('Confirm rejudge this problem?')),
-    }).open().then((action) => {
-      if (action !== 'yes') return;
-      $(ev.currentTarget).closest('form').trigger('submit');
-    });
-  });
-
   if ($('[name="upload_testdata"]').length) {
     $(document).on('click', '.problem-files-testdata .col--name', (ev) => handleEdit('testdata', ev));
     $(document).on('click', '.problem-files-additional_file .col--name', (ev) => handleEdit('additional_file', ev));

packages/ui-default/pages/problem_sidebar.page.ts

@@ -0,0 +1,25 @@
+import { NamedPage } from 'vj/misc/Page';
+import tpl from 'vj/utils/tpl';
+import i18n from 'vj/utils/i18n';
+import { ConfirmDialog } from 'vj/components/dialog';
+
+const page = new NamedPage([
+  'problem_create', 'problem_edit', 'problem_solution', 'problem_submit',
+  'problem_files', 'discussion_node', 'discussion_detail',
+], () => {
+  $(document).on('click', '[name="problem-sidebar__show-category"]', (ev) => {
+    $(ev.currentTarget).hide();
+    $('[name="problem-sidebar__categories"]').show();
+  });
+  $(document).on('click', '[name="problem-sidebar__rejudge"]', (ev) => {
+    ev.preventDefault();
+    new ConfirmDialog({
+      $body: tpl.typoMsg(i18n('Confirm rejudge this problem?')),
+    }).open().then((action) => {
+      if (action !== 'yes') return;
+      $(ev.currentTarget).closest('form').trigger('submit');
+    });
+  });
+});
+
+export default page;

packages/ui-default/pages/problem_solution.page.js

@@ -1,10 +0,0 @@
-import { NamedPage } from 'vj/misc/Page';
-
-const page = new NamedPage('problem_solution', async () => {
-  $(document).on('click', '[name="problem-sidebar__show-category"]', (ev) => {
-    $(ev.currentTarget).hide();
-    $('[name="problem-sidebar__categories"]').show();
-  });
-});
-
-export default page;

packages/ui-default/pages/problem_submit.page.js

@@ -8,11 +8,6 @@ function setOptions($el, options) {
 }
 
 const page = new NamedPage(['problem_submit', 'contest_detail_problem_submit', 'homework_detail_problem_submit'], async () => {
-  $(document).on('click', '[name="problem-sidebar__show-category"]', (ev) => {
-    $(ev.currentTarget).hide();
-    $('[name="problem-sidebar__categories"]').show();
-  });
-
   const { domainId } = UiContext.pdocConfig;
 
   function onChangeMain(update = true) {

packages/ui-default/pages/record_detail.page.ts

@@ -1,8 +1,10 @@
 import { NamedPage } from 'vj/misc/Page';
 
 const page = new NamedPage('record_detail', async () => {
-  const { default: SockJs } = await import('../components/socket');
-  const { DiffDOM } = await import('diff-dom');
+  const [{ default: SockJs }, { DiffDOM }] = await Promise.all([
+    import('../components/socket'),
+    import('diff-dom'),
+  ]);
 
   const sock = new SockJs(UiContext.socketUrl);
   const dd = new DiffDOM();

packages/ui-default/pages/record_main.page.ts

@@ -3,14 +3,18 @@ import UserSelectAutoComplete from 'vj/components/autocomplete/UserSelectAutoCom
 import ProblemSelectAutoComplete from 'vj/components/autocomplete/ProblemSelectAutoComplete';
 
 const page = new NamedPage('record_main', async () => {
-  const { default: SockJs } = await import('../components/socket');
-  const { DiffDOM } = await import('diff-dom');
+  const [{ default: SockJs }, { DiffDOM }] = await Promise.all([
+    import('../components/socket'),
+    import('diff-dom'),
+  ]);
 
   const sock = new SockJs(UiContext.socketUrl);
   const dd = new DiffDOM();
 
+  let firstLoad = true;
   sock.onopen = () => {
-    sock.send(JSON.stringify({ rids: UiContext.rids }));
+    if (firstLoad) sock.send(JSON.stringify({ rids: UiContext.rids }));
+    firstLoad = false;
   };
   sock.onmessage = (message) => {
     const msg = JSON.parse(message.data);

packages/ui-default/pages/training_detail.page.js

@@ -1,35 +0,0 @@
-import { NamedPage } from 'vj/misc/Page';
-import { slideDown, slideUp } from 'vj/utils/slide';
-
-async function handleSectionExpand(ev) {
-  const $section = $(ev.currentTarget).closest('.training__section');
-  if ($section.is('.expanded, .animating')) {
-    return;
-  }
-  $section.addClass('animating');
-  const $detail = $section.find('.training__section__detail');
-  await slideDown($detail, 300, { opacity: 0 }, { opacity: 1 });
-  $section.addClass('expanded');
-  $section.removeClass('collapsed');
-  $section.removeClass('animating');
-}
-
-async function handleSectionCollapse(ev) {
-  const $section = $(ev.currentTarget).closest('.training__section');
-  if ($section.is('.collapsed, .animating')) {
-    return;
-  }
-  $section.addClass('animating');
-  const $detail = $section.find('.training__section__detail');
-  await slideUp($detail, 300, { opacity: 1 }, { opacity: 0 });
-  $section.addClass('collapsed');
-  $section.removeClass('expanded');
-  $section.removeClass('animating');
-}
-
-const page = new NamedPage('training_detail', async () => {
-  $(document).on('click', '[name="training__section__expand"]', handleSectionExpand);
-  $(document).on('click', '[name="training__section__collapse"]', handleSectionCollapse);
-});
-
-export default page;

packages/ui-default/pages/training_detail.page.ts

@@ -0,0 +1,24 @@
+import { NamedPage } from 'vj/misc/Page';
+import { slideDown, slideUp } from 'vj/utils/slide';
+
+async function handleSection(ev, type: string) {
+  const $section = $(ev.currentTarget).closest('.training__section');
+  if ($section.is(`.${type}d, .animating`)) return;
+  $section.addClass('animating');
+  const $detail = $section.find('.training__section__detail');
+  if (type === 'expand') {
+    await slideDown($detail, 300, { opacity: 0 }, { opacity: 1 });
+  } else {
+    await slideUp($detail, 300, { opacity: 1 }, { opacity: 0 });
+  }
+  $section.addClass(`${type}d`);
+  $section.removeClass(type === 'expand' ? 'collapsed' : 'expanded');
+  $section.removeClass('animating');
+}
+
+const page = new NamedPage('training_detail', () => {
+  $(document).on('click', '[name="training__section__expand"]', (ev) => handleSection(ev, 'expand'));
+  $(document).on('click', '[name="training__section__collapse"]', (ev) => handleSection(ev, 'collapse'));
+});
+
+export default page;

packages/ui-default/pages/training_edit.page.ts

@@ -15,10 +15,7 @@ export default new NamedPage('training_edit', () => {
     }
     const message = 'Confirm deleting this training? Its status will be deleted as well.';
     return new ConfirmDialog({
-      $body: tpl`
-        <div class="typo">
-          <p>${i18n(message)}</p>
-        </div>`,
+      $body: tpl.typoMsg(i18n(message)),
     }).open().then((action) => {
       if (action !== 'yes') return;
       confirmed = true;