ui: frontend api (#470) [skip-cache]

packages/ui-default/components/DOMAttachedObject.ts

@@ -23,7 +23,7 @@ function monitorResource(resource) {
   }
 }
 
-export default class DOMAttachedObject {
+class DOMAttachedObject {
   static uniqueIdCounter = 0;
   static DOMAttachKey: string;
   static DOMAttachSelector: string;
@@ -127,3 +127,5 @@ export default class DOMAttachedObject {
     if (monitorDetach) monitorResource(this);
   }
 }
+
+export default DOMAttachedObject as typeof DOMAttachedObject & DOMAttachedObject;

packages/ui-default/components/autocomplete/components/DomainSelectAutoComplete.tsx

@@ -1,7 +1,7 @@
 import type { DomainDoc } from 'hydrooj/src/interface';
 import PropTypes from 'prop-types';
 import React, { forwardRef } from 'react';
-import request from 'vj/utils/request';
+import { request } from 'vj/utils';
 import AutoComplete, { AutoCompleteHandle, AutoCompleteProps } from './AutoComplete';
 
 const DomainSelectAutoComplete = forwardRef<AutoCompleteHandle<DomainDoc>, AutoCompleteProps<DomainDoc>>((props, ref) => (

packages/ui-default/components/autocomplete/components/ProblemSelectAutoComplete.tsx

@@ -1,8 +1,7 @@
 import type { ProblemDoc } from 'hydrooj/src/interface';
 import PropTypes from 'prop-types';
 import React, { forwardRef } from 'react';
-import api, { gql } from 'vj/utils/api';
-import request from 'vj/utils/request';
+import { api, gql, request } from 'vj/utils';
 import AutoComplete, { AutoCompleteHandle, AutoCompleteProps } from './AutoComplete';
 
 const ProblemSelectAutoComplete = forwardRef<AutoCompleteHandle<ProblemDoc>, AutoCompleteProps<ProblemDoc>>((props, ref) => (

packages/ui-default/components/autocomplete/components/UserSelectAutoComplete.tsx

@@ -1,7 +1,7 @@
 import type { Udoc } from 'hydrooj/src/interface';
 import PropTypes from 'prop-types';
 import React, { forwardRef } from 'react';
-import api, { gql } from 'vj/utils/api';
+import { api, gql } from 'vj/utils';
 import AutoComplete, { AutoCompleteHandle, AutoCompleteProps } from './AutoComplete';
 
 // eslint-disable-next-line prefer-arrow-callback

packages/ui-default/components/browser-update.page.ts

@@ -1,6 +1,5 @@
 import { AutoloadPage } from 'vj/misc/Page';
-import i18n from 'vj/utils/i18n';
-import tpl from 'vj/utils/tpl';
+import { i18n, tpl } from 'vj/utils';
 import { InfoDialog } from './dialog';
 
 function isSupported() {

packages/ui-default/components/calendar/index.js

@@ -1,7 +1,7 @@
 import $ from 'jquery';
 import _ from 'lodash';
 import moment from 'moment';
-import tpl from 'vj/utils/tpl';
+import { tpl } from 'vj/utils';
 
 export default class Calendar {
   constructor(events) {

packages/ui-default/components/clipboard.page.ts

@@ -1,9 +1,7 @@
 import Clipboard from 'clipboard';
 import Notification from 'vj/components/notification';
 import { AutoloadPage } from 'vj/misc/Page';
-import base64 from 'vj/utils/base64';
-import i18n from 'vj/utils/i18n';
-import substitute from 'vj/utils/substitute';
+import { base64, i18n, substitute } from 'vj/utils';
 
 export default new AutoloadPage('clipboard', () => {
   $('[data-copy]').get().forEach((el) => {

packages/ui-default/components/contest/contest.page.ts

@@ -1,9 +1,7 @@
 import $ from 'jquery';
 import Notification from 'vj/components/notification';
 import { AutoloadPage } from 'vj/misc/Page';
-import delay from 'vj/utils/delay';
-import i18n from 'vj/utils/i18n';
-import request from 'vj/utils/request';
+import { delay, i18n, request } from 'vj/utils';
 
 const contestPage = new AutoloadPage('contestPage', () => {
   $('[data-contest-code]').on('click', (ev) => {

packages/ui-default/components/dialog/DomDialog.ts

@@ -1,7 +1,7 @@
 import $ from 'jquery';
 import _ from 'lodash';
 import DOMAttachedObject from 'vj/components/DOMAttachedObject';
-import zIndexManager from 'vj/utils/zIndexManager';
+import { zIndexManager } from 'vj/utils';
 
 export interface DialogOptions {
   classes: string;

packages/ui-default/components/dialog/index.ts

@@ -1,6 +1,5 @@
 import $ from 'jquery';
-import i18n from 'vj/utils/i18n';
-import tpl from 'vj/utils/tpl';
+import { i18n, tpl } from 'vj/utils';
 import DomDialog, { DialogOptions } from './DomDialog';
 
 export class Dialog {

packages/ui-default/components/discussion/CommentBox.js

@@ -3,7 +3,7 @@ import _ from 'lodash';
 import DOMAttachedObject from 'vj/components/DOMAttachedObject';
 import TextareaHandler from 'vj/components/editor/textareaHandler';
 import Notification from 'vj/components/notification';
-import request from 'vj/utils/request';
+import { request } from 'vj/utils';
 
 let initialized = false;
 const $template = $('.dczcomments__box').eq(0).clone();

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

@@ -4,11 +4,9 @@ import $ from 'jquery';
 import { ConfirmDialog } from 'vj/components/dialog';
 import CommentBox from 'vj/components/discussion/CommentBox';
 import { AutoloadPage } from 'vj/misc/Page';
-import delay from 'vj/utils/delay';
-import i18n from 'vj/utils/i18n';
-import request from 'vj/utils/request';
-import { slideDown, slideUp } from 'vj/utils/slide';
-import tpl from 'vj/utils/tpl';
+import {
+  delay, i18n, request, slideDown, slideUp, tpl,
+} from 'vj/utils';
 
 const $replyTemplate = $('.commentbox-container').eq(0).clone();
 

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

@@ -5,9 +5,7 @@ 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';
+import { i18n, request, tpl } from 'vj/utils';
 
 async function historyDialog(payload, time, uid) {
   const ts = new Date(time).getTime();

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

@@ -6,7 +6,7 @@ import { chunk } from 'lodash';
 import * as React from 'react';
 import ReactDOM from 'react-dom/client';
 import { AutoloadPage } from 'vj/misc/Page';
-import request from 'vj/utils/request';
+import { request } from 'vj/utils';
 
 function renderReactions(reactions, self, rootEle) {
   let html = '';

packages/ui-default/components/dropdown/Dropdown.js

@@ -2,8 +2,7 @@ import _ from 'lodash';
 import Drop from 'tether-drop';
 import responsiveCutoff from 'vj/breakpoints.json';
 import DOMAttachedObject from 'vj/components/DOMAttachedObject';
-import { isBelow } from 'vj/utils/mediaQuery';
-import zIndexManager from 'vj/utils/zIndexManager';
+import { mediaQuery, zIndexManager } from 'vj/utils';
 
 export default class Dropdown extends DOMAttachedObject {
   static DOMAttachKey = 'vjDropdownInstance';
@@ -12,7 +11,7 @@ export default class Dropdown extends DOMAttachedObject {
 
   constructor($dom, options = {}) {
     if ($dom.attr('data-dropdown-trigger-desktop-only') !== undefined) {
-      if (isBelow(responsiveCutoff.mobile)) {
+      if (mediaQuery.isBelow(responsiveCutoff.mobile)) {
         super(null);
         return;
       }

packages/ui-default/components/editor/cmeditor.page.ts

@@ -1,5 +1,5 @@
 import { AutoloadPage } from 'vj/misc/Page';
-import delay from 'vj/utils/delay';
+import { delay } from 'vj/utils';
 import CmEditor from '.';
 
 function runSubstitute($container: JQuery<Document | HTMLElement>) {

packages/ui-default/components/editor/index.ts

@@ -3,8 +3,7 @@ import _ from 'lodash';
 import { nanoid } from 'nanoid';
 import DOMAttachedObject from 'vj/components/DOMAttachedObject';
 import Notification from 'vj/components/notification';
-import i18n from 'vj/utils/i18n';
-import request from 'vj/utils/request';
+import { i18n, request } from 'vj/utils';
 
 export const config = {
   toolbar: [

packages/ui-default/components/form/form.page.ts

@@ -1,6 +1,6 @@
 import $ from 'jquery';
 import { AutoloadPage } from 'vj/misc/Page';
-import delay from 'vj/utils/delay';
+import { delay } from 'vj/utils';
 
 const formPage = new AutoloadPage('formPage', () => {
   $(document).on('vjFormDisableUpdate', 'input, select, textarea', (ev) => {

packages/ui-default/components/highlighter/highlighter.page.ts

@@ -1,7 +1,6 @@
 import $ from 'jquery';
 import { AutoloadPage } from 'vj/misc/Page';
-import i18n from 'vj/utils/i18n';
-import tpl from 'vj/utils/tpl';
+import { i18n, tpl } from 'vj/utils';
 
 const highlighterPage = new AutoloadPage('highlighterPage', () => {
   import('./prismjs').then(({ default: prismjs }) => {

packages/ui-default/components/highlighter/prismjs.js

@@ -11,7 +11,7 @@ import $ from 'jquery';
 import components from 'prismjs/components';
 import getLoader from 'prismjs/dependencies';
 import Notification from 'vj/components/notification/index';
-import i18n from 'vj/utils/i18n';
+import { i18n } from 'vj/utils';
 import languageMeta from './meta';
 
 const files = require.context('prismjs/components/', true, /prism-[a-z0-9-]+\.js/);

packages/ui-default/components/hint.ts

@@ -1,7 +1,6 @@
 import $ from 'jquery';
 import { InfoDialog } from 'vj/components/dialog';
-import i18n from 'vj/utils/i18n';
-import tpl from 'vj/utils/tpl';
+import { i18n, tpl } from 'vj/utils';
 
 export default function createHint(message: string, element?: any) {
   if (i18n(message) === message || !element) return;

packages/ui-default/components/hitokoto/index.page.js

@@ -1,8 +1,6 @@
 import $ from 'jquery';
 import { NamedPage } from 'vj/misc/Page';
-import i18n from 'vj/utils/i18n';
-import request from 'vj/utils/request';
-import tpl from 'vj/utils/tpl';
+import { i18n, request, tpl } from 'vj/utils';
 
 export default new NamedPage('homepage', () => {
   function getHitokoto($containers) {

packages/ui-default/components/languageselect.tsx

@@ -1,7 +1,7 @@
 import $ from 'jquery';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import i18n from 'vj/utils/i18n';
+import { i18n } from 'vj/utils';
 
 export default function LanguageSelect({
   fieldSelector, firstLoadMain, firstLoadSub, availableLangs, mainLangs,

packages/ui-default/components/marker/Marker.js

@@ -1,8 +1,7 @@
 import $ from 'jquery';
 import _ from 'lodash';
 import Tooltip from 'vj/components/tooltip/Tooltip';
-import delay from 'vj/utils/delay';
-import i18n from 'vj/utils/i18n';
+import { delay, i18n } from 'vj/utils';
 
 const MARKER_ID = `marker_${Math.floor(Math.random() * 0xFFFFFF).toString(16)}`;
 const MARKER_OFFSET = 20;

packages/ui-default/components/marker/MarkerReactive.js

@@ -1,7 +1,7 @@
 import $ from 'jquery';
 import _ from 'lodash';
 import DOMAttachedObject from 'vj/components/DOMAttachedObject';
-import delay from 'vj/utils/delay';
+import { delay } from 'vj/utils';
 import Marker from './Marker';
 
 export default class MarkerReactive extends DOMAttachedObject {

packages/ui-default/components/media/media.page.js

@@ -1,6 +1,6 @@
 import $ from 'jquery';
 import { AutoloadPage } from 'vj/misc/Page';
-import request from 'vj/utils/request';
+import { request } from 'vj/utils';
 
 export default new AutoloadPage('media', async () => {
   async function parseMedia($dom = $(document.body)) {

packages/ui-default/components/menu/menu-heading.page.js

@@ -1,6 +1,6 @@
 import $ from 'jquery';
 import { AutoloadPage } from 'vj/misc/Page';
-import tpl from 'vj/utils/tpl';
+import { tpl } from 'vj/utils';
 
 const menuHeadingPage = new AutoloadPage('menuHeadingPage', null, () => {
   $('[data-heading-extract-to]').get().forEach((container) => {

packages/ui-default/components/menu/menu.page.js

@@ -1,7 +1,6 @@
 import $ from 'jquery';
 import { AutoloadPage } from 'vj/misc/Page';
-import delay from 'vj/utils/delay';
-import { slideDown } from 'vj/utils/slide';
+import { delay, slideDown } from 'vj/utils';
 
 function expandMenu($menu) {
   slideDown($menu, 500, { opacity: 0 }, { opacity: 1 });

packages/ui-default/components/message/index.page.ts

@@ -4,8 +4,7 @@ import { InfoDialog } from 'vj/components/dialog';
 import VjNotification from 'vj/components/notification/index';
 import { FLAG_ALERT } from 'vj/constant/message';
 import { AutoloadPage } from 'vj/misc/Page';
-import i18n from 'vj/utils/i18n';
-import tpl from 'vj/utils/tpl';
+import { i18n, tpl } from 'vj/utils';
 
 const onmessage = (msg) => {
   console.log('Received message', msg);

packages/ui-default/components/messagepad/MessagePadDialogueContentContainer.jsx

@@ -6,8 +6,7 @@ import moment from 'moment';
 import React from 'react';
 import { connect } from 'react-redux';
 import TimeAgo from 'timeago-react';
-import i18n from 'vj/utils/i18n';
-import { parse as parseMongoId } from 'vj/utils/mongoId';
+import { i18n, mongoId } from 'vj/utils';
 import Message from './MessageComponent';
 
 const mapStateToProps = (state) => ({
@@ -70,7 +69,7 @@ export default connect(mapStateToProps)(class MessagePadDialogueContentContainer
   renderInner() {
     if (this.props.activeId === null) return [];
     const sorted = this.props.item.messages
-      .sort((msg1, msg2) => parseMongoId(msg1._id).timestamp - parseMongoId(msg2._id).timestamp);
+      .sort((msg1, msg2) => mongoId(msg1._id).timestamp - mongoId(msg2._id).timestamp);
     return sorted.map((msg) => (
       <Message
         key={msg._id}
@@ -82,8 +81,8 @@ export default connect(mapStateToProps)(class MessagePadDialogueContentContainer
         }
       >
         <div>{this.renderContent(msg)}</div>
-        <time data-tooltip={moment(parseMongoId(msg._id).timestamp * 1000).format('YYYY-MM-DD HH:mm:ss')}>
-          <TimeAgo datetime={parseMongoId(msg._id).timestamp * 1000} locale={i18n('timeago_locale')} />
+        <time data-tooltip={moment(mongoId(msg._id).timestamp * 1000).format('YYYY-MM-DD HH:mm:ss')}>
+          <TimeAgo datetime={mongoId(msg._id).timestamp * 1000} locale={i18n('timeago_locale')} />
         </time>
       </Message>
     ));

packages/ui-default/components/messagepad/MessagePadDialogueListContainer.jsx

@@ -4,7 +4,7 @@ import $ from 'jquery';
 import _ from 'lodash';
 import React from 'react';
 import { connect } from 'react-redux';
-import i18n from 'vj/utils/i18n';
+import { i18n } from 'vj/utils';
 import ListItem from './DialogueListItemComponent';
 
 const mapStateToProps = (state) => ({

packages/ui-default/components/messagepad/MessagePadInputContainer.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
 import Icon from 'vj/components/react/IconComponent';
-import request from 'vj/utils/request';
+import { request } from 'vj/utils';
 
 const mapStateToProps = (state) => ({
   activeId: state.activeId,

packages/ui-default/components/messagepad/index.jsx

@@ -2,8 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
 import Icon from 'vj/components/react/IconComponent';
-import i18n from 'vj/utils/i18n';
-import request from 'vj/utils/request';
+import { i18n, request } from 'vj/utils';
 import MessagePadDialogueContent from './MessagePadDialogueContentContainer';
 import MessagePadDialogueList from './MessagePadDialogueListContainer';
 import MessagePadInput from './MessagePadInputContainer';

packages/ui-default/components/monaco/index.ts

@@ -6,8 +6,7 @@ import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
 import { IQuickInputService } from 'monaco-editor/esm/vs/platform/quickinput/common/quickInput';
 import list from 'monaco-themes/themes/themelist.json';
 import { nanoid } from 'nanoid';
-import i18n from 'vj/utils/i18n';
-import request from 'vj/utils/request';
+import { i18n, request } from 'vj/utils';
 
 export default monaco;
 export const customOptions: monaco.editor.IStandaloneDiffEditorConstructionOptions = JSON.parse(localStorage.getItem('editor.config') || '{}');

packages/ui-default/components/monaco/languages/markdown.ts

@@ -1,7 +1,7 @@
 import keyword from 'emojis-keywords';
 import list from 'emojis-list';
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
-import api, { gql } from 'vj/utils/api';
+import { api, gql } from 'vj/utils';
 
 const qqEmojies = [
   'weixiao',

packages/ui-default/components/monaco/loader.ts

@@ -1,4 +1,4 @@
-import loadExternalModule from 'vj/utils/loadModule';
+import { loadExternalModule } from 'vj/utils';
 
 let loaded;
 const loaders = {

packages/ui-default/components/navigation/navigation.page.js

@@ -3,9 +3,7 @@ import Slideout from 'slideout';
 import Notification from 'vj/components/notification';
 import selectUser from 'vj/components/selectUser';
 import { AutoloadPage } from 'vj/misc/Page';
-import i18n from 'vj/utils/i18n';
-import request from 'vj/utils/request';
-import tpl from 'vj/utils/tpl';
+import { i18n, request, tpl } from 'vj/utils';
 
 function handleNavLogoutClick(ev) {
   const $logoutLink = $(ev.currentTarget);

packages/ui-default/components/notification/index.js

@@ -1,7 +1,6 @@
 import { Intent, Position, Toaster } from '@blueprintjs/core';
 import $ from 'jquery';
-import tpl from 'vj/utils/tpl';
-import zIndexManager from 'vj/utils/zIndexManager';
+import { tpl, zIndexManager } from 'vj/utils/base';
 
 const ToasterContainer = document.createElement('div');
 ToasterContainer.style.position = 'fixed';

packages/ui-default/components/notification/notification.page.js

@@ -1,6 +1,6 @@
 import Notification from 'vj/components/notification/index';
 import { AutoloadPage } from 'vj/misc/Page';
-import i18n from 'vj/utils/i18n';
+import { i18n } from 'vj/utils';
 
 export default new AutoloadPage('notificationPage', (pagename) => {
   const message = i18n(`Hint::Page::${pagename}`);

packages/ui-default/components/preview/preview.page.ts

@@ -4,10 +4,9 @@ import { nanoid } from 'nanoid';
 import { ActionDialog, InfoDialog } from 'vj/components/dialog/index';
 import Notification from 'vj/components/notification';
 import { AutoloadPage } from 'vj/misc/Page';
-import i18n from 'vj/utils/i18n';
-import pjax from 'vj/utils/pjax';
-import request from 'vj/utils/request';
-import tpl from 'vj/utils/tpl';
+import {
+  i18n, pjax, request, tpl,
+} from 'vj/utils';
 
 async function startEdit(filename, value, fileCategory = 'file') {
   const { default: Editor } = await import('vj/components/editor/index');

packages/ui-default/components/problem/create.page.js

@@ -1,8 +1,7 @@
 import $ from 'jquery';
 import { InfoDialog } from 'vj/components/dialog';
 import { NamedPage } from 'vj/misc/Page';
-import i18n from 'vj/utils/i18n';
-import tpl from 'vj/utils/tpl';
+import { i18n, tpl } from 'vj/utils';
 
 export default new NamedPage(['problem_create', 'problem_edit'], () => {
   $('input[name="pid"]').on('blur', () => {

packages/ui-default/components/problemconfig/BasicForm.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import i18n from 'vj/utils/i18n';
+import { i18n } from 'vj/utils';
 import FileSelectAutoComplete from '../autocomplete/components/FileSelectAutoComplete';
 import type { RootState } from './reducer/index';
 

packages/ui-default/components/problemconfig/ProblemConfigForm.tsx

@@ -3,7 +3,7 @@ import {
 } from '@blueprintjs/core';
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import i18n from 'vj/utils/i18n';
+import { i18n } from 'vj/utils';
 import CustomSelectAutoComplete from '../autocomplete/components/CustomSelectAutoComplete';
 import FileSelectAutoComplete from '../autocomplete/components/FileSelectAutoComplete';
 import { FormItem } from './BasicForm';

packages/ui-default/components/problemconfig/ProblemType.tsx

@@ -3,7 +3,7 @@ import {
 } from '@blueprintjs/core';
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import i18n from 'vj/utils/i18n';
+import { i18n } from 'vj/utils';
 import { FormItem, ManagedSelect, SingleFileSelect } from './BasicForm';
 import type { RootState } from './reducer/index';
 

packages/ui-default/components/problemconfig/SubtaskTable.tsx

@@ -4,7 +4,7 @@ import type { SubtaskConfig } from 'hydrooj/src/interface';
 import { isEqual, pick } from 'lodash';
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import i18n from 'vj/utils/i18n';
+import { i18n } from 'vj/utils';
 import CustomSelectAutoComplete from '../autocomplete/components/CustomSelectAutoComplete';
 import { FormItem } from './BasicForm';
 import { RootState } from './reducer';

packages/ui-default/components/problemconfig/TestCasesTable.tsx

@@ -4,7 +4,7 @@ import type { SubtaskConfig } from 'hydrooj/src/interface';
 import { isEqual } from 'lodash';
 import React, { useEffect, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import i18n from 'vj/utils/i18n';
+import { i18n } from 'vj/utils';
 import FileSelectAutoComplete from '../autocomplete/components/FileSelectAutoComplete';
 import type { RootState } from './reducer/index';
 

packages/ui-default/components/rotator/index.js

@@ -1,7 +1,7 @@
 import $ from 'jquery';
 import _ from 'lodash';
 import DOMAttachedObject from 'vj/components/DOMAttachedObject';
-import delay from 'vj/utils/delay';
+import { delay } from 'vj/utils';
 
 const ANIMATION_DURATION = 4000;
 

packages/ui-default/components/scratchpad/ScratchpadPretestContainer.jsx

@@ -2,7 +2,7 @@ import AnsiUp from 'ansi_up';
 import React from 'react';
 import { connect } from 'react-redux';
 import Icon from 'vj/components/react/IconComponent';
-import i18n from 'vj/utils/i18n';
+import { i18n } from 'vj/utils';
 import DataInput from './DataInputComponent';
 import Panel from './PanelComponent';
 

packages/ui-default/components/scratchpad/ScratchpadRecordsContainer.jsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import React from 'react';
 import { connect } from 'react-redux';
 import Icon from 'vj/components/react/IconComponent';
-import i18n from 'vj/utils/i18n';
+import { i18n } from 'vj/utils';
 import Panel from './PanelComponent';
 import ScratchpadRecordsRow from './ScratchpadRecordsRowContainer';
 

packages/ui-default/components/scratchpad/ScratchpadRecordsRowContainer.jsx

@@ -5,10 +5,9 @@ import React from 'react';
 import { connect } from 'react-redux';
 import TimeAgo from 'timeago-react';
 import * as recordEnum from 'vj/constant/record';
-import emulateAnchorClick from 'vj/utils/emulateAnchorClick';
-import i18n from 'vj/utils/i18n';
-import { parse as parseMongoId } from 'vj/utils/mongoId';
-import substitute from 'vj/utils/substitute';
+import {
+  emulateAnchorClick, i18n, mongoId, substitute,
+} from 'vj/utils';
 
 const shouldShowDetail = (data) => recordEnum.STATUS_SCRATCHPAD_SHOW_DETAIL_FLAGS[data.status];
 
@@ -58,7 +57,7 @@ export default connect(mapStateToProps, null, mergeProps)(class ScratchpadRecord
 
   render() {
     const { data } = this.props;
-    const submitAt = parseMongoId(data._id).timestamp * 1000;
+    const submitAt = mongoId(data._id).timestamp * 1000;
     // Is pretest
     return data.contest?.toString() === '000000000000000000000000' ? null : (
       <tr onClick={(ev) => this.handleRowClick(ev, data._id)}>

packages/ui-default/components/scratchpad/ScratchpadToolbarContainer.jsx

@@ -4,9 +4,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
 import Icon from 'vj/components/react/IconComponent';
-import getAvailableLangs from 'vj/utils/availableLangs';
-import i18n from 'vj/utils/i18n';
-import request from 'vj/utils/request';
+import { getAvailableLangs, i18n, request } from 'vj/utils';
 import Toolbar, {
   ToolbarButtonComponent as ToolbarButton,
   ToolbarItemComponent as ToolbarItem,

packages/ui-default/components/scratchpad/reducers/ui.ts

@@ -1,5 +1,5 @@
 import Notification from 'vj/components/notification';
-import i18n from 'vj/utils/i18n';
+import { i18n } from 'vj/utils';
 
 export default function reducer(state = {
   main: {

packages/ui-default/components/selectUser.ts

@@ -1,7 +1,6 @@
 import UserSelectAutoComplete from 'vj/components/autocomplete/UserSelectAutoComplete';
 import { ActionDialog } from 'vj/components/dialog';
-import i18n from 'vj/utils/i18n';
-import tpl from 'vj/utils/tpl';
+import { i18n, tpl } from 'vj/utils';
 import createHint from './hint';
 
 let hintInserted = false;

packages/ui-default/components/signin/signInDialog.page.js

@@ -3,9 +3,7 @@ import responsiveCutoff from 'vj/breakpoints.json';
 import DomDialog from 'vj/components/dialog/DomDialog';
 import { InfoDialog } from 'vj/components/dialog/index';
 import { AutoloadPage } from 'vj/misc/Page';
-import i18n from 'vj/utils/i18n';
-import { isBelow } from 'vj/utils/mediaQuery';
-import tpl from 'vj/utils/tpl';
+import { i18n, mediaQuery, tpl } from 'vj/utils';
 
 const signinDialogPage = new AutoloadPage('signinDialogPage', null, () => {
   const signInDialog = DomDialog.getOrConstruct($('.dialog--signin'), {
@@ -17,7 +15,7 @@ const signinDialogPage = new AutoloadPage('signinDialogPage', null, () => {
   if ($('[name="nav_login"]').length > 0) {
     // nav
     $('[name="nav_login"]').on('click', (ev) => {
-      if (isBelow(responsiveCutoff.mobile)) return;
+      if (mediaQuery.isBelow(responsiveCutoff.mobile)) return;
       if (ev.shiftKey || ev.metaKey || ev.ctrlKey) return;
       signInDialog.show();
       ev.preventDefault();
@@ -32,7 +30,7 @@ const signinDialogPage = new AutoloadPage('signinDialogPage', null, () => {
   }
 
   window.showSignInDialog = () => {
-    if (isBelow(responsiveCutoff.mobile)) {
+    if (mediaQuery.isBelow(responsiveCutoff.mobile)) {
       if ($('[name="nav_login"]').length > 0) {
         window.location.href = $('[name="nav_login"]').attr('href');
         return;

packages/ui-default/components/star/star.page.js

@@ -1,6 +1,6 @@
 import $ from 'jquery';
 import { AutoloadPage } from 'vj/misc/Page';
-import request from 'vj/utils/request';
+import { request } from 'vj/utils';
 
 function setStarButtonState($starButton, star) {
   if (star) {

packages/ui-default/components/time/time.page.js

@@ -1,7 +1,7 @@
 import $ from 'jquery';
 import * as timeago from 'timeago.js';
 import { AutoloadPage } from 'vj/misc/Page';
-import i18n from 'vj/utils/i18n';
+import { i18n } from 'vj/utils';
 
 try {
   const locales = require.context('timeago.js/lib/lang', false, /\.js$/);

packages/ui-default/components/upload.ts

@@ -1,9 +1,8 @@
 import { Dialog } from 'vj/components/dialog/index';
 import Notification from 'vj/components/notification';
-import delay from 'vj/utils/delay';
-import i18n from 'vj/utils/i18n';
-import pjax from 'vj/utils/pjax';
-import request from 'vj/utils/request';
+import {
+  delay, i18n, pjax, request,
+} from 'vj/utils';
 
 function onBeforeUnload(e) {
   e.returnValue = '';

packages/ui-default/components/vote/vote.page.js

@@ -1,7 +1,7 @@
 import $ from 'jquery';
 import Rotator from 'vj/components/rotator';
 import { AutoloadPage } from 'vj/misc/Page';
-import request from 'vj/utils/request';
+import { request } from 'vj/utils';
 
 function setVoteState($container, value, status) {
   const $num = $container.find('.vote-number');

packages/ui-default/components/zipDownloader/index.ts

@@ -2,11 +2,9 @@ import { dump } from 'js-yaml';
 import PQueue from 'p-queue';
 import streamsaver from 'streamsaver';
 import Notification from 'vj/components/notification';
-import api, { gql } from 'vj/utils/api';
-import i18n from 'vj/utils/i18n';
-import pipeStream from 'vj/utils/pipeStream';
-import request from 'vj/utils/request';
-import { createZipStream } from 'vj/utils/zip';
+import {
+  api, createZipStream, gql, i18n, pipeStream, request,
+} from 'vj/utils';
 
 let isBeforeUnloadTriggeredByLibrary = !window.isSecureContext;
 function onBeforeUnload(e) {
@@ -29,8 +27,8 @@ export default async function download(filename, targets) {
   await waitForWritableStream;
   const fileStream = streamsaver.createWriteStream(filename);
   const queue = new PQueue({ concurrency: 5 });
-  const abortCallbackReceiver = {};
-  function stopDownload() { abortCallbackReceiver.abort(); }
+  const abortCallbackReceiver: any = {};
+  function stopDownload() { abortCallbackReceiver.abort?.(); }
   let i = 0;
   async function downloadFile(target) {
     try {