upgrade dep:

css-loader 0.28->3.5
del 4.1->5.1
eslint 5.18->6.8
eslint-config-airbnb 17.1->18.1
eslint-loader 2.1->4.0
file-loader 2.0->6.0
fs.extra 8.0->9.0
gulp 2.0->3.0
gulp-nunjucks 4.0->5.0
json-loader 0.5->Removed
style-loader 0.23->1.1
uglifyjs-webpack-plugin 1.3->2.2
yargs 13.2->15.3
katex 0.10->0.11
react-monaco-editor 0.35->0.36
timeage-react 1.2->3.0
timeago.js 3.0->4.0
uuid 3.3->7.0

ui/components/DOMAttachedObject.js

@@ -57,7 +57,7 @@ export default class DOMAttachedObject {
       .find(this.DOMAttachSelector)
       .addBack(this.DOMAttachSelector)
       .get()
-      .forEach(element => this.getOrConstruct($(element), ...args));
+      .forEach((element) => this.getOrConstruct($(element), ...args));
     if (process.env.NODE_ENV !== 'production') {
       console.timeEnd(`DOMAttachedObject[${this.DOMAttachKey}]: attachAll`);
     }
@@ -96,8 +96,8 @@ export default class DOMAttachedObject {
         throw new Error(`'DOMAttachSelector' should be specified`);
       }
     }
-    $(document).on('vjContentNew', e => this.attachAll(e.target));
-    $(document).on('vjContentRemove', e => this.detachAll(e.target));
+    $(document).on('vjContentNew', (e) => this.attachAll(e.target));
+    $(document).on('vjContentRemove', (e) => this.detachAll(e.target));
     if (attach) {
       this.attachAll();
     }

ui/components/calendar/index.js

@@ -27,7 +27,7 @@ export default class Calendar {
         <div class="calendar__body-container"></div>
       </div>
     `);
-    this.events = events.map(ev => ({
+    this.events = events.map((ev) => ({
       ...ev,
       beginAt: moment(ev.beginAt),
       endAt: moment(ev.endAt),
@@ -258,11 +258,11 @@ export default class Calendar {
 
     // layout banners
     const layout = bannersByWeek
-      .map(banners => _
+      .map((banners) => _
         .sortBy(banners, [
-          banner => banner.beginAt.valueOf(),
-          banner => (banner.beginTrunc ? 0 : 1), // truncated events first
-          banner => -banner.endAt.valueOf(), // long events first
+          (banner) => banner.beginAt.valueOf(),
+          (banner) => (banner.beginTrunc ? 0 : 1), // truncated events first
+          (banner) => -banner.endAt.valueOf(), // long events first
         ]))
       .map((banners) => {
         const dayBitmap = _
@@ -274,12 +274,12 @@ export default class Calendar {
           // find available space
           const vIndexMax = _.max(_
             .range(beginDay, endDay + 1)
-            .map(day => dayBitmap[day].length));
+            .map((day) => dayBitmap[day].length));
           let vIndex = 0;
           for (; vIndex < vIndexMax; ++vIndex) {
             if (_.every(_
               .range(beginDay, endDay + 1)
-              .map(day => !dayBitmap[day][vIndex]) // eslint-disable-line no-loop-func
+              .map((day) => !dayBitmap[day][vIndex]) // eslint-disable-line no-loop-func
             )) { // eslint-disable-line function-paren-newline
               break;
             }
@@ -290,7 +290,7 @@ export default class Calendar {
           }
         });
         // merge adjacent cells and arrange banners by vertical index
-        const vMaxLength = _.max(_.range(0, 7).map(day => dayBitmap[day].length));
+        const vMaxLength = _.max(_.range(0, 7).map((day) => dayBitmap[day].length));
         const weekBanners = _
           .fill(new Array(vMaxLength), 1)
           .map(() => []);

ui/components/emoji/emojify.page.js

@@ -7,7 +7,7 @@ function runEmojify($container) {
     emojify.run($container[0]);
     return;
   }
-  $container.find('[data-emoji-enabled]').get().forEach(element => emojify.run(element));
+  $container.find('[data-emoji-enabled]').get().forEach((element) => emojify.run(element));
 }
 
 const emojifyPage = new AutoloadPage('emojifyPage', () => {
@@ -15,7 +15,7 @@ const emojifyPage = new AutoloadPage('emojifyPage', () => {
     img_dir: `${UiContext.cdn_prefix}img/emoji`,
   });
   runEmojify($('body'));
-  $(document).on('vjContentNew', e => runEmojify($(e.target)));
+  $(document).on('vjContentNew', (e) => runEmojify($(e.target)));
 });
 
 export default emojifyPage;

ui/components/highlighter/highlighter.page.js

@@ -7,7 +7,7 @@ const highlighterPage = new AutoloadPage('highlighterPage', () => {
       prismjs.highlightBlocks($container);
     }
     runHighlight($('body'));
-    $(document).on('vjContentNew', e => runHighlight($(e.target)));
+    $(document).on('vjContentNew', (e) => runHighlight($(e.target)));
   });
 });
 

ui/components/hotkey/hotkey.page.js

@@ -54,7 +54,7 @@ function testElementHotkey(hotkey, $element, attr) {
 
 const hotkeyPage = new AutoloadPage('hotkeyPage', () => {
   $(document).on('keydown', (ev) => {
-    const hotkey = ['alt', 'ctrl', 'shift'].filter(modifyKey => ev[`${modifyKey}Key`]);
+    const hotkey = ['alt', 'ctrl', 'shift'].filter((modifyKey) => ev[`${modifyKey}Key`]);
     if (ev.metaKey && !ev.ctrlKey) {
       hotkey.push('ctrl');
     }

ui/components/katex/katex.page.js

@@ -4,12 +4,12 @@ import 'katex/dist/katex.min.css';
 import './katex.styl';
 
 const katexPage = new AutoloadPage('katexPage', () => {
-  import('katex/dist/contrib/auto-render.min.js').then((renderKatex) => {
+  import('katex/dist/contrib/auto-render.min.js').then(({ default: katex }) => {
     function runKatex($containers) {
-      $containers.get().forEach(container => renderKatex(container));
+      $containers.get().forEach((container) => katex(container));
     }
     runKatex($('.typo'));
-    $(document).on('vjContentNew', e => runKatex($(e.target).find('.typo')));
+    $(document).on('vjContentNew', (e) => runKatex($(e.target).find('.typo')));
   });
 });
 

ui/components/katex/katex.styl

@@ -1,2 +1,2 @@
 .katex
-  font-size: 1em
+  font-size: 1.2em

ui/components/marker/MarkerReactive.js

@@ -12,7 +12,7 @@ export default class MarkerReactive extends DOMAttachedObject {
   }
 
   static initAll() {
-    $('[data-marker-enabled]').get().forEach(dom => MarkerReactive.initFromDOM($(dom)));
+    $('[data-marker-enabled]').get().forEach((dom) => MarkerReactive.initFromDOM($(dom)));
   }
 
   constructor($target) {

ui/components/menu/menu.page.js

@@ -8,7 +8,7 @@ function expandMenu($menu) {
 
 async function expandAllMenus() {
   await delay(200);
-  $('.menu.collapsed').get().forEach(menu => expandMenu($(menu)));
+  $('.menu.collapsed').get().forEach((menu) => expandMenu($(menu)));
 }
 
 const menuPage = new AutoloadPage('menuPage', () => {

ui/components/messagepad/MessagePadDialogueContentContainer.js

@@ -9,7 +9,7 @@ import 'jquery.easing';
 import i18n from 'vj/utils/i18n';
 import Message from './MessageComponent';
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state) => ({
   activeId: state.activeId,
   item: state.activeId !== null
     ? state.dialogues[state.activeId]

ui/components/messagepad/MessagePadDialogueListContainer.js

@@ -5,12 +5,12 @@ import 'jquery-scroll-lock';
 
 import ListItem from './DialogueListItemComponent';
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state) => ({
   activeId: state.activeId,
   dialogues: state.dialogues,
 });
 
-const mapDispatchToProps = dispatch => ({
+const mapDispatchToProps = (dispatch) => ({
   handleClick(id) {
     dispatch({
       type: 'DIALOGUES_SWITCH_TO',
@@ -28,14 +28,14 @@ export default class MessagePadDialogueListContainer extends React.PureComponent
   render() {
     const orderedDialogues = _.orderBy(
       _.values(this.props.dialogues),
-      dialogue => (dialogue.isPlaceholder
+      (dialogue) => (dialogue.isPlaceholder
         ? Number.POSITIVE_INFINITY
         : _.maxBy(dialogue.reply, 'at').at),
       'desc',
     );
     return (
       <ol className="messagepad__list" ref="list">
-        {_.map(orderedDialogues, dialogue => (
+        {_.map(orderedDialogues, (dialogue) => (
           <ListItem
             key={dialogue._id}
             userName={

ui/components/messagepad/MessagePadInputContainer.js

@@ -6,7 +6,7 @@ import Icon from 'vj/components/react/IconComponent';
 
 import request from 'vj/utils/request';
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state) => ({
   activeId: state.activeId,
   isPosting: state.activeId !== null
     ? state.isPosting[state.activeId]
@@ -16,7 +16,7 @@ const mapStateToProps = state => ({
     : '',
 });
 
-const mapDispatchToProps = dispatch => ({
+const mapDispatchToProps = (dispatch) => ({
   handleChange(id, value) {
     if (id === null) {
       return;
@@ -119,8 +119,8 @@ export default class MessagePadInputContainer extends React.PureComponent {
             ref="input"
             disabled={this.props.isPosting}
             value={this.props.inputValue}
-            onKeyDown={ev => this.handleKeyDown(ev)}
-            onChange={ev => this.props.handleChange(this.props.activeId, ev.target.value)}
+            onKeyDown={(ev) => this.handleKeyDown(ev)}
+            onChange={(ev) => this.props.handleChange(this.props.activeId, ev.target.value)}
           />
         </div>
         <button

ui/components/messagepad/index.js

@@ -9,7 +9,7 @@ import MessagePadDialogueList from './MessagePadDialogueListContainer';
 import MessagePadDialogueContent from './MessagePadDialogueContentContainer';
 import MessagePadInput from './MessagePadInputContainer';
 
-const mapDispatchToProps = dispatch => ({
+const mapDispatchToProps = (dispatch) => ({
   loadDialogues() {
     dispatch({
       type: 'DIALOGUES_LOAD_DIALOGUES',

ui/components/messagepad/reducers/dialogues.js

@@ -6,12 +6,12 @@ export default function reducer(state = {}, action) {
     const { messages, udict } = action.payload;
     return _.keyBy(
       _.filter(
-        _.map(messages, m => ({
+        _.map(messages, (m) => ({
           sendee_udoc: udict[m.sendee_uid],
           sender_udoc: udict[m.sender_uid],
           ...m,
         })),
-        m => m.sendee_udoc && m.sender_udoc,
+        (m) => m.sendee_udoc && m.sender_udoc,
       ),
       '_id',
     );

ui/components/messagepad/reducers/inputs.js

@@ -4,7 +4,7 @@ export default function reducer(state = {}, action) {
   switch (action.type) {
   case 'DIALOGUES_LOAD_DIALOGUES_FULFILLED': {
     const dialogues = action.payload.messages;
-    return _.fromPairs(_.map(dialogues, d => [d._id, '']));
+    return _.fromPairs(_.map(dialogues, (d) => [d._id, '']));
   }
   case 'DIALOGUES_CREATE': {
     const { id } = action.payload;

ui/components/messagepad/reducers/isPosting.js

@@ -5,7 +5,7 @@ export default function reducer(state = {}, action) {
   switch (action.type) {
   case 'DIALOGUES_LOAD_DIALOGUES_FULFILLED': {
     const dialogues = action.payload.messages;
-    return _.fromPairs(_.map(dialogues, d => [d._id, false]));
+    return _.fromPairs(_.map(dialogues, (d) => [d._id, false]));
   }
   case 'DIALOGUES_CREATE': {
     const { id } = action.payload;

ui/components/scratchpad/ScratchpadEditorContainer.js

@@ -4,17 +4,17 @@ import MonacoEditor from 'react-monaco-editor';
 
 import * as languageEnum from 'vj/constant/language';
 
-const getOptions = lang => ({
+const getOptions = (lang) => ({
   lineNumbers: true,
   mode: languageEnum.LANG_MONACO_MODES[lang],
 });
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state) => ({
   code: state.editor.code,
   lang: state.editor.lang,
 });
 
-const mapDispatchToProps = dispatch => ({
+const mapDispatchToProps = (dispatch) => ({
   handleUpdateCode: (code) => {
     dispatch({
       type: 'SCRATCHPAD_EDITOR_UPDATE_CODE',
@@ -33,7 +33,7 @@ export default class ScratchpadEditorContainer extends React.PureComponent {
         value={this.props.code}
         options={getOptions(this.props.lang)}
         ref="editor"
-        onChange={code => this.props.handleUpdateCode(code)}
+        onChange={(code) => this.props.handleUpdateCode(code)}
       />
     );
   }

ui/components/scratchpad/ScratchpadPretestContainer.js

@@ -10,13 +10,13 @@ import Panel from './PanelComponent';
 import PanelButton from './PanelButtonComponent';
 import ScratchpadPretestTabPane from './ScratchpadPretestTabPaneContainer';
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state) => ({
   current: state.pretest.current,
   tabs: state.pretest.tabs,
   meta: state.pretest.meta,
 });
 
-const mapDispatchToProps = dispatch => ({
+const mapDispatchToProps = (dispatch) => ({
   handleClickAdd() {
     dispatch({
       type: 'SCRATCHPAD_PRETEST_ADD_DATA',
@@ -60,7 +60,7 @@ export default class ScratchpadPretestContainer extends React.PureComponent {
         <Tabs
           className="scratchpad__panel-tab flex-col flex-fill"
           activeKey={this.props.current}
-          onChange={tabId => this.props.handleSwitchData(tabId)}
+          onChange={(tabId) => this.props.handleSwitchData(tabId)}
           animation="slide-horizontal"
           renderTabBar={() => (
             <ScrollableInkTabBar
@@ -89,7 +89,7 @@ export default class ScratchpadPretestContainer extends React.PureComponent {
           )}
           renderTabContent={() => <TabContent />}
         >
-          {this.props.tabs.map(tabId => (
+          {this.props.tabs.map((tabId) => (
             <TabPane tab={this.props.meta[tabId].title} key={tabId}>
               <ScratchpadPretestTabPane id={tabId} />
             </TabPane>

ui/components/scratchpad/ScratchpadPretestTabPaneContainer.js

@@ -4,11 +4,11 @@ import { connect } from 'react-redux';
 import i18n from 'vj/utils/i18n';
 import DataInput from './DataInputComponent';
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state) => ({
   data: state.pretest.data,
 });
 
-const mapDispatchToProps = dispatch => ({
+const mapDispatchToProps = (dispatch) => ({
   handleDataChange(id, type, value) {
     dispatch({
       type: 'SCRATCHPAD_PRETEST_DATA_CHANGE',
@@ -36,12 +36,12 @@ export default class ScratchpadPretestTabPaneContainer extends React.PureCompone
         <DataInput
           title={i18n('Sample Input')}
           value={this.props.input}
-          onChange={v => this.props.handleDataChange(this.props.id, 'input', v)}
+          onChange={(v) => this.props.handleDataChange(this.props.id, 'input', v)}
         />
         <DataInput
           title={i18n('Sample Output')}
           value={this.props.output}
-          onChange={v => this.props.handleDataChange(this.props.id, 'output', v)}
+          onChange={(v) => this.props.handleDataChange(this.props.id, 'output', v)}
         />
       </div>
     );

ui/components/scratchpad/ScratchpadRecordsContainer.js

@@ -11,7 +11,7 @@ import Panel from './PanelComponent';
 import PanelButton from './PanelButtonComponent';
 import ScratchpadRecordsTable from './ScratchpadRecordsTableContainer';
 
-const mapDispatchToProps = dispatch => ({
+const mapDispatchToProps = (dispatch) => ({
   loadSubmissions() {
     dispatch({
       type: 'SCRATCHPAD_RECORDS_LOAD_SUBMISSIONS',

ui/components/scratchpad/ScratchpadRecordsRowContainer.js

@@ -11,9 +11,9 @@ import { parse as parseMongoId } from 'vj/utils/mongoId';
 import i18n from 'vj/utils/i18n';
 import * as recordEnum from 'vj/constant/record';
 
-const shouldShowDetail = data => recordEnum.STATUS_SCRATCHPAD_SHOW_DETAIL_FLAGS[data.status];
+const shouldShowDetail = (data) => recordEnum.STATUS_SCRATCHPAD_SHOW_DETAIL_FLAGS[data.status];
 
-const isPretest = data => data.type === recordEnum.TYPE_PRETEST;
+const isPretest = (data) => data.type === recordEnum.TYPE_PRETEST;
 
 const getRecordDetail = (data) => {
   if (!shouldShowDetail(data)) {
@@ -41,7 +41,7 @@ const getRecordDetail = (data) => {
   });
 };
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state) => ({
   items: state.records.items,
 });
 
@@ -64,14 +64,13 @@ export default class ScratchpadRecordsRowContainer extends React.PureComponent {
     const { data } = this.props;
     const submitAt = parseMongoId(data._id).timestamp * 1000;
     return (
-      <tr onClick={ev => this.handleRowClick(ev, data._id)}>
+      <tr onClick={(ev) => this.handleRowClick(ev, data._id)}>
         <td className={`col--detail record-status--border ${recordEnum.STATUS_CODES[data.status]}`}>
           <span className={`icon record-status--icon ${recordEnum.STATUS_CODES[data.status]}`}></span>
           <span className="icol icol--pretest">
             {isPretest(data)
               ? <span className={`flag record-status--background ${recordEnum.STATUS_CODES[data.status]}`}>{i18n('Pretest')}</span>
-              : ''
-            }
+              : ''}
           </span>
           {getRecordDetail(data)}
         </td>

ui/components/scratchpad/ScratchpadRecordsTableContainer.js

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { connect } from 'react-redux';
 import ScratchpadRecordsRow from './ScratchpadRecordsRowContainer';
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state) => ({
   rows: state.records.rows,
   isLoading: state.ui.records.isLoading,
 });
@@ -23,7 +23,7 @@ export default class ScratchpadRecordsTableContainer extends React.PureComponent
           <col className="col--at" />
         </colgroup>
         <tbody>
-          {this.props.rows.map(rowId => (
+          {this.props.rows.map((rowId) => (
             <ScratchpadRecordsRow key={rowId} id={rowId} />
           ))}
         </tbody>

ui/components/scratchpad/ScratchpadToolbarContainer.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/static-property-placement */
 import _ from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -13,14 +14,14 @@ import Toolbar, {
   ToolbarSplitComponent as ToolbarSplit,
 } from './ToolbarComponent';
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state) => ({
   pretestVisible: state.ui.pretest.visible,
   recordsVisible: state.ui.records.visible,
   isPosting: state.ui.isPosting,
   editorLang: state.editor.lang,
 });
 
-const mapDispatchToProps = dispatch => ({
+const mapDispatchToProps = (dispatch) => ({
   togglePanel(uiElement) {
     dispatch({
       type: 'SCRATCHPAD_UI_TOGGLE_VISIBILITY',
@@ -37,8 +38,8 @@ const mapDispatchToProps = dispatch => ({
     const state = context.store.getState();
     const { pretest } = state;
     const testCases = pretest.tabs;
-    const inputs = testCases.map(tabId => pretest.data[tabId].input);
-    const outputs = testCases.map(tabId => pretest.data[tabId].output);
+    const inputs = testCases.map((tabId) => pretest.data[tabId].input);
+    const outputs = testCases.map((tabId) => pretest.data[tabId].output);
     const req = request.post(Context.postPretestUrl, {
       lang: state.editor.lang,
       code: state.editor.code,
@@ -103,7 +104,7 @@ export default class ScratchpadToolbarContainer extends React.PureComponent {
             className="select"
             disabled={this.props.isPosting}
             value={this.props.editorLang}
-            onChange={ev => this.props.setEditorLanguage(ev.target.value)}
+            onChange={(ev) => this.props.setEditorLanguage(ev.target.value)}
           >
             {_.map(languageEnum.LANG_TEXTS, (val, key) => (
               <option value={key} key={key}>{val}</option>

ui/components/scratchpad/index.js

@@ -23,7 +23,7 @@ panes: [{
 function buildNestedPane([a, ...panes]) {
   const elements = [
     a,
-    ...panes.filter(p => p.props.visible),
+    ...panes.filter((p) => p.props.visible),
   ];
   if (elements.length === 1) {
     return a;
@@ -43,11 +43,11 @@ function buildNestedPane([a, ...panes]) {
     ));
 }
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state) => ({
   ui: state.ui,
 });
 
-const mapDispatchToProps = dispatch => ({
+const mapDispatchToProps = (dispatch) => ({
   changeUiSize: _.debounce((uiElement, size) => {
     dispatch({
       type: 'SCRATCHPAD_UI_CHANGE_SIZE',
@@ -73,7 +73,7 @@ export default class ScratchpadContainer extends React.PureComponent {
         minSize={250}
         split="vertical"
         primary="second"
-        onChange={size => this.handleChangeSize('main', size)}
+        onChange={(size) => this.handleChangeSize('main', size)}
       >
         <Dom className="scratchpad__problem" childDom={$('.problem-content').get(0)} />
         {buildNestedPane([
@@ -83,12 +83,12 @@ export default class ScratchpadContainer extends React.PureComponent {
           </SplitPaneFillOverlay>,
           {
             props: this.props.ui.pretest,
-            onChange: size => this.handleChangeSize('pretest', size),
+            onChange: (size) => this.handleChangeSize('pretest', size),
             element: <ScratchpadPretest key="pretest" />,
           },
           {
             props: this.props.ui.records,
-            onChange: size => this.handleChangeSize('records', size),
+            onChange: (size) => this.handleChangeSize('records', size),
             element: <ScratchpadRecords key="records" />,
           },
         ])}

ui/components/scratchpad/reducers/pretest.js

@@ -1,4 +1,4 @@
-import uuid from 'uuid/v4';
+import { v4 as uuid } from 'uuid';
 import _ from 'lodash';
 
 const initialId = uuid();

ui/components/time/time.page.js

@@ -1,11 +1,10 @@
-import timeagoFactory from 'timeago.js';
+import * as timeago from 'timeago.js';
 
 import { AutoloadPage } from 'vj/misc/PageLoader';
 
 import i18n from 'vj/utils/i18n';
 
-const timeago = timeagoFactory();
-timeago.setLocale(i18n('timeago_locale'));
+timeago.register(i18n('timeago_locale'));
 
 function runRelativeTime($container) {
   $container.find('span.time.relative[data-timestamp]').get().forEach((element) => {
@@ -27,14 +26,14 @@ function cancelRelativeTime($container) {
       return;
     }
     $element.removeAttr('data-has-timeago');
-    timeagoFactory.cancel(element);
+    timeago.cancel(element);
   });
 }
 
 const relativeTimePage = new AutoloadPage('relativeTimePage', () => {
   runRelativeTime($('body'));
-  $(document).on('vjContentNew', e => runRelativeTime($(e.target)));
-  $(document).on('vjContentRemove', e => cancelRelativeTime($(e.target)));
+  $(document).on('vjContentNew', (e) => runRelativeTime($(e.target)));
+  $(document).on('vjContentRemove', (e) => cancelRelativeTime($(e.target)));
 });
 
 export default relativeTimePage;

ui/components/vote/vote.page.js

@@ -18,7 +18,7 @@ function applyRotator(element) {
 }
 
 const votePage = new AutoloadPage('votePage', () => {
-  $('.vote-number.rotator--enabled').get().forEach(element => applyRotator(element));
+  $('.vote-number.rotator--enabled').get().forEach((element) => applyRotator(element));
   $(document).on('click', '.vote-button', (ev) => {
     const $button = $(ev.currentTarget);
     const $container = $button.closest('.vote');