Upgrade react-scripts

.eslintrc.json

@@ -30,7 +30,7 @@
     ],
     "rules": {
         "prettier/prettier": [
-            "error",
+            "warn",
             {
                 "singleQuote": true
             }

package.json

@@ -31,10 +31,10 @@
     "react-dom": "^16.12.0",
     "react-router": "^6.0.0-alpha.5",
     "react-router-dom": "^6.0.0-alpha.5",
-    "react-scripts": "3.4.0",
+    "react-scripts": "4.0.1",
     "reactstrap": "^8.4.1",
-    "recharts": "^2.0.0-beta.1",
-    "typescript": "^3.9.5"
+    "recharts": "2.0.0-beta.8",
+    "typescript": "^4.1.3"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -63,17 +63,17 @@
     ]
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^3.2.0",
-    "@typescript-eslint/parser": "^3.2.0",
-    "eslint": "^6.8.0",
-    "eslint-config-airbnb": "^18.0.1",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-import": "^2.20.1",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-prettier": "^3.1.3",
-    "eslint-plugin-react": "^7.19.0",
-    "prettier": "^2.0.5",
-    "prettier-eslint": "^9.0.1",
+    "@typescript-eslint/eslint-plugin": "^4.11.1",
+    "@typescript-eslint/parser": "^4.11.1",
+    "eslint": "^7.16.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-prettier": "^7.1.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^3.3.0",
+    "eslint-plugin-react": "^7.21.5",
+    "prettier": "^2.2.1",
+    "prettier-eslint": "^12.0.0",
     "prettier-eslint-cli": "^5.0.0"
   }
-}
+}

src/components/ContestLink.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { formatContestUrl } from '../utils/Url';
 import { ContestId } from '../interfaces/Contest';
+import { NewTabLink } from './NewTabLink';
 
 interface Props {
   contestId: ContestId;
@@ -11,14 +12,12 @@ interface Props {
 export const ContestLink: React.FC<Props> = (props) => {
   const { contestId, contestName, rawContestName } = props;
   return contestId >= 0 ? (
-    <a
+    <NewTabLink
       href={formatContestUrl(contestId)}
-      target="_blank" // eslint-disable-line react/jsx-no-target-blank
-      rel="noopener"
       title={rawContestName ?? contestName}
     >
       {contestName}
-    </a>
+    </NewTabLink>
   ) : (
     <span>{contestName}</span>
   );

src/components/NewTabLink.tsx

@@ -0,0 +1,17 @@
+/* eslint react/jsx-no-target-blank: 0 */
+import React from 'react';
+
+type Props = React.AnchorHTMLAttributes<HTMLAnchorElement>;
+
+export const NewTabLink: React.FC<Props> = (props) => (
+  <a
+    href={props.href}
+    target="_blank"
+    rel="noopener"
+    className={props.className}
+    title={props.title}
+    id={props.id}
+  >
+    {props.children}
+  </a>
+);

src/components/ProblemLink.tsx

@@ -6,6 +6,7 @@ import { getRatingColorClass } from '../utils/RatingColor';
 import { ProblemNo, ProblemLevel } from '../interfaces/Problem';
 import { Difficulty } from '../interfaces/Difficulty';
 import { DifficultyCircle } from './DifficultyCircle';
+import { NewTabLink } from './NewTabLink';
 
 export const ProblemLinkColorModes = ['None', 'Level', 'Difficulty'] as const;
 export type ProblemLinkColorMode = typeof ProblemLinkColorModes[number];
@@ -57,15 +58,13 @@ export const ProblemLink: React.FC<Props> = (props) => {
           </UncontrolledTooltip>
         </>
       )}
-      <a
+      <NewTabLink
         href={formatProblemUrl(problemNo)}
-        target="_blank" // eslint-disable-line react/jsx-no-target-blank
-        rel="noopener"
         className={className}
         title={problemTitle}
       >
         {problemTitle}
-      </a>
+      </NewTabLink>
     </>
   );
 };

src/components/SubmissionLink.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { formatSubmissionUrl } from '../utils/Url';
 import { SubmissionId } from '../interfaces/Problem';
+import { NewTabLink } from './NewTabLink';
 
 interface Props {
   submissionId: SubmissionId;
@@ -11,14 +12,12 @@ interface Props {
 export const SubmissionLink: React.FC<Props> = (props) => {
   const { submissionId, submissionTitle, id } = props;
   return (
-    <a
+    <NewTabLink
       href={formatSubmissionUrl(submissionId)}
-      target="_blank" // eslint-disable-line react/jsx-no-target-blank
-      rel="noopener"
       title={submissionTitle}
       id={id}
     >
       {submissionTitle}
-    </a>
+    </NewTabLink>
   );
 };

tsconfig.json

@@ -17,7 +17,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react"
+    "jsx": "react-jsx",
+    "noFallthroughCasesInSwitch": true
   },
   "include": [
     "src"