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/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();