Upgrade react-scripts and typescript. ESLint and TS fixes.

* Remove unused imports

* About: remove unnecessary "Photo of"

* App: replace kabob-case attributes

* DemoInfo: add missing keys

* Landing:  don't nest within <p>

* PartnerTable: at missing keys, use === instead of ==, replace kabob-case attributes

* Record/Case: add `rel="noopener noreferrer"

* Rules/ChargeTypeRule: use === instead of ==

* reducer: use forEach instead of map, replace reduce comma shorthand function returns
* Add missing types for promise resolve parameter and action functions

* selectors test: add missing mockData attributes

Author: monocle

src/frontend/package-lock.json

@@ -30,14 +30,14 @@
     "react-redux": "^7.2.2",
     "react-router-dom": "^5.1.2",
     "react-router-hash-link": "^2.0.0",
-    "react-scripts": "3.3.0",
+    "react-scripts": "^5.0.1",
     "react-test-renderer": "^16.11.0",
     "redux": "^4.0.5",
     "redux-mock-store": "^1.5.4",
     "reselect": "^4.0.0",
     "sass": "^1.57.1",
     "tachyons": "^4.11.1",
-    "typescript": "3.7.2"
+    "typescript": "^4.9.4"
   },
   "scripts": {
     "start": "react-scripts start",

src/frontend/package.json

@@ -71,7 +71,7 @@ exports[`renders correctly 1`] = `
           className="mw5 mb5 mr3"
         >
           <img
-            alt="Photo of Michael Zhang"
+            alt="Michael Zhang"
             className="img w5 mb3"
             src="/img/mz-2x.jpg"
           />
@@ -97,7 +97,7 @@ exports[`renders correctly 1`] = `
           className="mw5 mb5 mr3"
         >
           <img
-            alt="Photo of Jordan Witte"
+            alt="Jordan Witte"
             className="img w5 mb3"
             src="/img/jw-2x.jpg"
           />
@@ -123,7 +123,7 @@ exports[`renders correctly 1`] = `
           className="mw5 mb5 mr3"
         >
           <img
-            alt="Photo of Nick Schimek"
+            alt="Nick Schimek"
             className="img w5 mb3"
             src="/img/ns-2x.jpg"
           />
@@ -149,7 +149,7 @@ exports[`renders correctly 1`] = `
           className="mw5 mb5 mr3"
         >
           <img
-            alt="Photo of Hunter Marcks"
+            alt="Hunter Marcks"
             className="img w5 mb3"
             src="/img/hm-2x.jpg"
           />
@@ -175,7 +175,7 @@ exports[`renders correctly 1`] = `
           className="mw5 mb5 mr3"
         >
           <img
-            alt="Photo of Kent Shikama"
+            alt="Kent Shikama"
             className="img w5 mb3"
             src="/img/ks-2x.jpg"
           />

src/frontend/src/components/About/__snapshots__/About.test.tsx.snap

@@ -64,7 +64,7 @@ export default class About extends React.Component {
                 <img
                   className="img w5 mb3"
                   src="/img/mz-2x.jpg"
-                  alt="Photo of Michael Zhang"
+                  alt="Michael Zhang"
                 />
                 <dl>
                   <dt className="fw8 mb2">Michael Zhang</dt>
@@ -86,7 +86,7 @@ export default class About extends React.Component {
                 <img
                   className="img w5 mb3"
                   src="/img/jw-2x.jpg"
-                  alt="Photo of Jordan Witte"
+                  alt="Jordan Witte"
                 />
                 <dl>
                   <dt className="fw8 mb2">Jordan Witte</dt>
@@ -106,7 +106,7 @@ export default class About extends React.Component {
                 <img
                   className="img w5 mb3"
                   src="/img/ns-2x.jpg"
-                  alt="Photo of Nick Schimek"
+                  alt="Nick Schimek"
                 />
                 <dl>
                   <dt className="fw8 mb2">Nick Schimek</dt>
@@ -129,7 +129,7 @@ export default class About extends React.Component {
                 <img
                   className="img w5 mb3"
                   src="/img/hm-2x.jpg"
-                  alt="Photo of Hunter Marcks"
+                  alt="Hunter Marcks"
                 />
                 <dl>
                   <dt className="fw8 mb2">Hunter Marcks</dt>
@@ -148,7 +148,7 @@ export default class About extends React.Component {
                 <img
                   className="img w5 mb3"
                   src="/img/ks-2x.jpg"
-                  alt="Photo of Kent Shikama"
+                  alt="Kent Shikama"
                 />
                 <dl>
                   <dt className="fw8 mb2">Kent Shikama</dt>

src/frontend/src/components/About/index.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { HashLink as Link } from "react-router-hash-link";
 
 class AccessibilityStatement extends React.Component {
 

src/frontend/src/components/AccessibilityStatement/index.tsx

@@ -161,10 +161,10 @@ Array [
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  clip-rule="evenodd"
+                  clipRule="evenodd"
                   d="M6.56 78.42L1.88 68.04l4.68-15.85L8.58 27.7 12.48.82h7.3l6.14 3 1.59 8.74 8.81 1.77 7.86-1.77 7.85 1.77 3.78-3.54h8.03l4.98-2.23 7.44-1.8h25.76l6.56 5.8-3.77 12.87-5.72 11.1 4.19 3.09-1.26 6.43v32.37H6.56z"
                   fill="#D0E1F7"
-                  fill-rule="evenodd"
+                  fillRule="evenodd"
                 />
                 <circle
                   cx="26.76"
@@ -1563,31 +1563,31 @@ Array [
                 className="lh-copy pt3"
               >
                 For other communication (to learn more, help out, etc.) you can also contact:
-                <ul
-                  className="ml4 mt2"
+              </p>
+              <ul
+                className="ml4 mt2"
+              >
+                <li
+                  className="mb2"
                 >
-                  <li
-                    className="mb2"
+                  Michael Zhang, expungement attorney at Qiu-Qiu Law:
+                   
+                  <span
+                    className="nowrap"
                   >
-                    Michael Zhang, expungement attorney at Qiu-Qiu Law:
-                     
-                    <span
-                      className="nowrap"
-                    >
-                      [email protected]
-                    </span>
-                  </li>
-                  <li>
-                    Jordan Witte, project manager at Code for PDX:
-                     
-                    <span
-                      className="nowrap"
-                    >
-                      [email protected]
-                    </span>
-                  </li>
-                </ul>
-              </p>
+                    [email protected]
+                  </span>
+                </li>
+                <li>
+                  Jordan Witte, project manager at Code for PDX:
+                   
+                  <span
+                    className="nowrap"
+                  >
+                    [email protected]
+                  </span>
+                </li>
+              </ul>
             </div>
           </div>
           <span

src/frontend/src/components/App/__snapshots__/App.test.tsx.snap

@@ -26,8 +26,10 @@ class DemoInfo extends React.Component {
             </div>
           )}
         </p>
-        {description.map((line: string) => (
-          <p className="pb2">{line}</p>
+        {description.map((line: string, idx: number) => (
+          <p key={idx} className="pb2">
+            {line}
+          </p>
         ))}
       </div>
     );
@@ -122,8 +124,8 @@ class DemoInfo extends React.Component {
             .
           </p>
           <div>
-            {examplesData.map((e: any) => (
-              <div>
+            {examplesData.map((e: any, idx: number) => (
+              <div key={idx}>
                 <h2 className="fw9 bt b--light-gray pt2 mb3">{e.name}</h2>
                 <div className="mw7 mb4">
                   {this.formattedInfo(

src/frontend/src/components/Demo/DemoInfo.tsx

@@ -73,7 +73,7 @@ class UserDataForm extends React.Component<Props, State> {
       this.state.phoneNumber
     );
     const zipCodeMatch = this.zipCodePattern.exec(this.state.zipCode);
-    return new Promise((resolve) => {
+    return new Promise((resolve: (value?: unknown) => void) => {
       this.setState<any>(
         {
           invalidZipCode: this.state.zipCode.length > 0 && !zipCodeMatch,

src/frontend/src/components/FillForms/UserDataForm.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import Header from "../Header";
 import PartnerTable from "../PartnerTable";
 import { Link } from "react-router-dom";
 import {
@@ -90,21 +89,19 @@ class Landing extends React.Component {
                       <p className="lh-copy pt3">
                         For other communication (to learn more, help out, etc.)
                         you can also contact:
-                        <ul className="ml4 mt2">
-                          <li className="mb2">
-                            Michael Zhang, expungement attorney at Qiu-Qiu Law:{" "}
-                            <span className="nowrap">
-                              [email protected]
-                            </span>
-                          </li>
-                          <li>
-                            Jordan Witte, project manager at Code for PDX:{" "}
-                            <span className="nowrap">
-                              [email protected]
-                            </span>
-                          </li>
-                        </ul>
                       </p>
+                      <ul className="ml4 mt2">
+                        <li className="mb2">
+                          Michael Zhang, expungement attorney at Qiu-Qiu Law:{" "}
+                          <span className="nowrap">[email protected]</span>
+                        </li>
+                        <li>
+                          Jordan Witte, project manager at Code for PDX:{" "}
+                          <span className="nowrap">
+                            [email protected]
+                          </span>
+                        </li>
+                      </ul>
                     </DisclosurePanel>
                   </div>
                 </Disclosure>

src/frontend/src/components/Landing/index.tsx

@@ -1,10 +1,5 @@
 import React from "react";
 import { HashLink as Link } from "react-router-hash-link";
-import {
-  Disclosure,
-  DisclosureButton,
-  DisclosurePanel,
-} from "@reach/disclosure";
 import EditingGuide from "./EditingGuide";
 
 class Manual extends React.Component {