Update npm packages

Author: ShinyaKato

app/views/layouts/application.html.erb

@@ -4,9 +4,9 @@
     <title><%= t('layouts.brand') %></title>
     <%= csrf_meta_tags %>
 
+    <%= stylesheet_link_tag 'application', media: 'all' %>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
     <link rel="stylesheet" href="/katex/katex.css" />
-    <%= stylesheet_link_tag 'application', media: 'all' %>
     <%= yield :styles %>
   </head>
 
@@ -20,9 +20,8 @@
       <%= render partial: 'layouts/footer' %>
     </div>
 
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.min.js"></script>
-    <script src="/katex/katex.js"></script>
     <%= javascript_include_tag 'application' %>
+    <script src="/katex/katex.js"></script>
     <%= yield :scripts %>
   </body>
 </html>

package.json

@@ -9,8 +9,8 @@
   "scripts": {
     "dev-build": "NODE_ENV=development webpack --progress --colors",
     "dev-watch": "NODE_ENV=development webpack --progress --colors --watch",
-    "prod": "NODE_ENV=production webpack",
-    "heroku-postbuild": "npm run dev-build",
+    "prod-build": "NODE_ENV=production webpack",
+    "heroku-postbuild": "npm run prod-build",
     "lint": "npm run tslint",
     "fix": "npm run tslint-fix",
     "tslint": "tslint --project tsconfig.json",
@@ -24,7 +24,10 @@
     }
   },
   "lint-staged": {
-    "src/**/*.{ts,tsx}": ["tslint --fix", "git add"]
+    "src/**/*.{ts,tsx}": [
+      "tslint --fix",
+      "git add"
+    ]
   },
   "repository": {
     "type": "git",
@@ -38,29 +41,32 @@
   "homepage": "https://github.com/ProgrammingDaisukiClub/WPCS2#readme",
   "devDependencies": {
     "@types/katex": "^0.5.0",
-    "@types/marked": "0.0.28",
-    "@types/react": "^15.0.9",
-    "@types/react-dom": "^0.14.23",
-    "@types/react-router": "^3.0.3",
+    "@types/marked": "0.3.0",
+    "@types/react": "^16.3.14",
+    "@types/react-dom": "^16.0.5",
+    "@types/react-router": "^4.0.25",
+    "@types/react-router-dom": "^4.2.6",
     "husky": "^0.14.3",
     "lint-staged": "^7.0.5",
     "prettier": "^1.12.1",
-    "ts-loader": "^2.0.0",
+    "ts-loader": "^4.3.0",
     "tslint": "^5.9.1",
     "tslint-config-prettier": "^1.12.0",
     "tslint-microsoft-contrib": "^5.0.3",
     "tslint-plugin-prettier": "^1.3.0",
     "tslint-react": "^3.5.1",
     "typescript": "^2.1.6",
-    "webpack": "^2.2.1"
+    "webpack": "^4.8.3",
+    "webpack-cli": "^2.1.3"
   },
   "dependencies": {
-    "i18n-webpack-plugin": "^0.3.0",
+    "i18n-webpack-plugin": "^1.0.0",
     "marked": "^0.3.6",
-    "react": "^15.4.2",
-    "react-dom": "^15.4.2",
-    "react-render-html": "^0.1.6",
-    "react-router": "^3.0.2",
+    "react": "^16.3.2",
+    "react-dom": "^16.3.2",
+    "react-render-html": "^0.6.0",
+    "react-router": "^4.2.0",
+    "react-router-dom": "^4.2.2",
     "whatwg-fetch": "^2.0.2"
   }
 }

src/contests/ContestApp.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Route, Switch } from 'react-router-dom';
 
 import ContestObject from 'contests/ContestObject';
 import DataSetObject from 'contests/DataSetObject';
@@ -19,9 +20,11 @@ import SubmitResults from 'contests/SubmitResults';
 
 export interface ContestAppProps extends React.Props<ContestApp> {
   children: React.ReactElement<any>;
-  params: {
-    contestId: string;
-    problemId: string;
+  match: {
+    params: {
+      contestId: string;
+      problemId: string;
+    };
   };
 }
 
@@ -65,7 +68,7 @@ export default class ContestApp extends React.Component<ContestAppProps, Contest
   }
 
   public async fetchContest(): Promise<void> {
-    const responseContest: Response = await fetch(`/api/contests/${this.props.params.contestId}${t('locale')}`, {
+    const responseContest: Response = await fetch(`/api/contests/${this.props.match.params.contestId}${t('locale')}`, {
       credentials: 'same-origin',
     });
 
@@ -119,7 +122,7 @@ export default class ContestApp extends React.Component<ContestAppProps, Contest
     let submissions: SubmissionObject[];
     if (contest.problems) {
       const responseSubmissions: Response = await fetch(
-        `/api/contests/${this.props.params.contestId}/submissions${t('locale')}`,
+        `/api/contests/${this.props.match.params.contestId}/submissions${t('locale')}`,
         {
           credentials: 'same-origin',
         }
@@ -162,7 +165,7 @@ export default class ContestApp extends React.Component<ContestAppProps, Contest
     const formData: FormData = new FormData();
     formData.append(this.csrfParam, this.csrfToken);
 
-    const response: Response = await fetch(`/api/contests/${this.props.params.contestId}/entry`, {
+    const response: Response = await fetch(`/api/contests/${this.props.match.params.contestId}/entry`, {
       method: 'post',
       credentials: 'same-origin',
       body: formData,
@@ -200,7 +203,7 @@ export default class ContestApp extends React.Component<ContestAppProps, Contest
 
     this.changeAnswerForm(problemId, dataSetId, '');
 
-    const response: Response = await fetch(`/api/contests/${this.props.params.contestId}/submissions`, {
+    const response: Response = await fetch(`/api/contests/${this.props.match.params.contestId}/submissions`, {
       method: 'post',
       credentials: 'same-origin',
       body: formData,
@@ -265,7 +268,7 @@ export default class ContestApp extends React.Component<ContestAppProps, Contest
   }
 
   public async fetchRanking(): Promise<void> {
-    const response: Response = await fetch(`/api/contests/${this.props.params.contestId}/ranking${t('locale')}`, {
+    const response: Response = await fetch(`/api/contests/${this.props.match.params.contestId}/ranking${t('locale')}`, {
       credentials: 'same-origin',
     });
 
@@ -337,7 +340,7 @@ export default class ContestApp extends React.Component<ContestAppProps, Contest
 
   public async fetchTime(): Promise<TimerObject> {
     let fetchedTime: TimerObject;
-    const responseTime: Response = await fetch(`/api/contests/${this.props.params.contestId}${t('locale')}`, {
+    const responseTime: Response = await fetch(`/api/contests/${this.props.match.params.contestId}${t('locale')}`, {
       credentials: 'same-origin',
     });
 
@@ -401,38 +404,55 @@ export default class ContestApp extends React.Component<ContestAppProps, Contest
     return (
       <div className="container">
         <Navigation contest={this.state.contest} />
-        {this.props.children &&
-          this.props.children.type === ContestHome && (
-            <ContestHome contest={this.state.contest} join={this.join.bind(this)} />
-          )}
-        {this.props.children &&
-          this.props.children.type === Problem &&
-          this.state.contest.problems && (
-            <Problem
-              contest={this.state.contest}
-              problem={this.state.contest.problems.find(
-                (problem: ProblemObject) => problem.id === +this.props.params.problemId
-              )}
-              changeAnswerForm={this.changeAnswerForm.bind(this)}
-              submit={this.submit.bind(this)}
-            />
-          )}
-        {this.props.children &&
-          this.props.children.type === Submissions && (
-            <Submissions contest={this.state.contest} submissions={this.state.submissions} />
-          )}
-        {this.props.children &&
-          this.props.children.type === Ranking &&
-          this.state.users && <Ranking contest={this.state.contest} users={this.state.users} />}
+        <Switch>
+          <Route
+            exact={true}
+            path="/contests/:contestId"
+            render={(): JSX.Element => <ContestHome contest={this.state.contest} join={this.join.bind(this)} />}
+          />;
+          <Route
+            exact={true}
+            path="/contests/:contestId/problems/:problemId"
+            render={(props: any): JSX.Element => {
+              return !this.state.contest.problems ? null : (
+                <Problem
+                  contest={this.state.contest}
+                  problem={this.state.contest.problems.find(
+                    (problem: ProblemObject) => problem.id === +props.match.params.problemId
+                  )}
+                  changeAnswerForm={this.changeAnswerForm.bind(this)}
+                  submit={this.submit.bind(this)}
+                />
+              );
+            }}
+          />
+          <Route
+            exact={true}
+            path="/contests/:contestId/ranking"
+            render={(): JSX.Element => {
+              return !this.state.users ? null : <Ranking contest={this.state.contest} users={this.state.users} />;
+            }}
+          />
+          <Route
+            exact={true}
+            path="/contests/:contestId/submissions"
+            render={(): JSX.Element => (
+              <Submissions contest={this.state.contest} submissions={this.state.submissions} />
+            )}
+          />
+          <Route
+            exact={true}
+            path="/contests/:contestId/editorials/:editorialId"
+            render={(): JSX.Element => <Editorial editorial={this.state.contest.editorial} />}
+          />
+        </Switch>
         {this.state.submissions && (
           <SubmitResults
             submissions={this.state.submissions}
             submitResults={this.state.submitResults}
             closeSubmitResults={this.closeSubmitResults.bind(this)}
           />
         )}
-        {this.props.children &&
-          this.props.children.type === Editorial && <Editorial editorial={this.state.contest.editorial} />}
       </div>
     );
   }

src/contests/Editorial.tsx

@@ -8,8 +8,8 @@ export interface EditorialProps {
 }
 
 export default class Editorial extends React.Component<EditorialProps> {
-  constructor() {
-    super();
+  constructor(props: EditorialProps) {
+    super(props);
     this.state = {};
   }
 

src/contests/MarkdownRenderer.tsx

@@ -12,7 +12,7 @@ export interface Props {
 }
 
 export default class MarkdownRenderer extends React.Component<Props> {
-  private renderer: MarkedRenderer;
+  private renderer: marked.Renderer;
 
   constructor(props: Props) {
     super(props);

src/contests/Navigation.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 
 import ContestObject from 'contests/ContestObject';
 import DataSetObject from 'contests/DataSetObject';

src/contests/Problem.tsx

@@ -20,15 +20,15 @@ export default class Problem extends React.Component<ProblemProps, ProblemState>
   private timerId: number;
 
   constructor(props: ProblemProps) {
-    super();
+    super(props);
 
     this.state = {
       dataSetTabId: props.problem.dataSets[0].id,
     };
   }
 
   public componentDidMount(): void {
-    this.timerId = setInterval(() => {
+    this.timerId = window.setInterval(() => {
       this.forceUpdate();
     }, 10000);
   }

src/contests/Ranking.tsx

@@ -16,8 +16,8 @@ interface RankingState {
 }
 
 export default class Ranking extends React.Component<RankingProps, RankingState> {
-  constructor() {
-    super();
+  constructor(props: RankingProps) {
+    super(props);
 
     this.state = {
       currentPage: 1,

src/contests/Submissions.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 
 import ContestObject from 'contests/ContestObject';
 import DataSetObject from 'contests/DataSetObject';
@@ -14,8 +14,8 @@ export interface SubmissionsProps extends React.Props<Submissions> {
 }
 
 export default class Submissions extends React.Component<SubmissionsProps> {
-  constructor() {
-    super();
+  constructor(props: SubmissionsProps) {
+    super(props);
     this.state = {};
   }
 

src/contests/SubmitResults.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-// import { Link } from 'react-router';
 
 import SubmissionObject from 'contests/SubmissionObject';
 
@@ -62,7 +61,7 @@ export default class SubmitResults extends React.Component<SubmitResultsProps> {
         <div className="submitResults--inner">
           <div className="submitResults--header">{t('judge_results')}</div>
           {this.results().map((submission: SubmissionObject) => (
-            <div className="submitResults--item">
+            <div key={submission.id} className="submitResults--item">
               <span className="submitResults--date">{this.createdAt(submission.createdAt)}</span>
               <span className={`submitResults--judgeStatus__${this.judgeStatus(submission.judgeStatus)}`}>
                 {this.judgeStatus(submission.judgeStatus)}