From a2551dffb90bebe3676261b4e541fcd6ce6f794c Mon Sep 17 00:00:00 2001
From: Brian Donovan <1938+eventualbuddha@users.noreply.github.com>
Date: Thu, 28 Oct 2021 16:16:09 -0700
Subject: [PATCH] refactor(router): replace `withRouter` with hooks

`react-router-dom` has `withRouter` that passes information via a higher-order component. This is fine, but it has fairly complex types that TS is only happy with when it's a default export. When we change to using named exports this will cause a build error. See https://github.com/microsoft/TypeScript/issues/42873.
---
 apps/bmd/src/components/FocusManager.tsx          | 10 ++++------
 apps/bmd/src/pages/StartPage.tsx                  |  9 +++------
 apps/bsd/src/components/LinkButton.tsx            | 13 +++----------
 .../src/components/LinkButton.tsx                 | 13 +++----------
 libs/ui/src/LinkButton.tsx                        | 15 ++++-----------
 5 files changed, 17 insertions(+), 43 deletions(-)

diff --git a/apps/bmd/src/components/FocusManager.tsx b/apps/bmd/src/components/FocusManager.tsx
index 27fba6d248..ab230c3fce 100644
--- a/apps/bmd/src/components/FocusManager.tsx
+++ b/apps/bmd/src/components/FocusManager.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react';
-import { RouteComponentProps, withRouter } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import styled from 'styled-components';
 import { ScreenReader } from '../utils/ScreenReader';
 
@@ -10,7 +10,7 @@ const StyledFocusManager = styled.div`
   }
 `;
 
-export interface Props extends RouteComponentProps {
+export interface Props {
   children: React.ReactNode;
   onClick?: React.DOMAttributes<HTMLElement>['onClick'];
   onClickCapture?: React.DOMAttributes<HTMLElement>['onClickCapture'];
@@ -21,7 +21,7 @@ export interface Props extends RouteComponentProps {
   screenReader: ScreenReader;
 }
 
-function FocusManager({
+export default function FocusManager({
   onKeyPress,
   onClick,
   onFocus,
@@ -30,8 +30,8 @@ function FocusManager({
   onFocusCapture,
   children,
   screenReader,
-  location,
 }: Props): JSX.Element {
+  const location = useLocation();
   const screen = useRef<HTMLDivElement>(null);
   useEffect(() => {
     function onPageLoad() {
@@ -67,5 +67,3 @@ function FocusManager({
     </StyledFocusManager>
   );
 }
-
-export default withRouter(FocusManager);
diff --git a/apps/bmd/src/pages/StartPage.tsx b/apps/bmd/src/pages/StartPage.tsx
index 5d40857543..774cd8b35d 100644
--- a/apps/bmd/src/pages/StartPage.tsx
+++ b/apps/bmd/src/pages/StartPage.tsx
@@ -1,7 +1,7 @@
 import { strict as assert } from 'assert';
 import React, { useContext, useEffect, useRef } from 'react';
 import styled from 'styled-components';
-import { RouteComponentProps, withRouter } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 import { getPartyPrimaryAdjectiveFromBallotStyle } from '@votingworks/types';
 import { LinkButton, Main, MainChild } from '@votingworks/ui';
 
@@ -19,9 +19,8 @@ const SidebarSpacer = styled.div`
   height: 90px;
 `;
 
-type Props = RouteComponentProps<Record<string, string | undefined>>;
-
-function StartPage({ history }: Props): JSX.Element {
+export default function StartPage(): JSX.Element {
+  const history = useHistory();
   const {
     ballotStyleId,
     contests,
@@ -121,5 +120,3 @@ function StartPage({ history }: Props): JSX.Element {
     </Screen>
   );
 }
-
-export default withRouter(StartPage);
diff --git a/apps/bsd/src/components/LinkButton.tsx b/apps/bsd/src/components/LinkButton.tsx
index 9d60e17e4b..5b6f724d19 100644
--- a/apps/bsd/src/components/LinkButton.tsx
+++ b/apps/bsd/src/components/LinkButton.tsx
@@ -1,13 +1,11 @@
 import React from 'react';
-import { RouteComponentProps, withRouter } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 import { EventTargetFunction } from '../config/types';
 
 import Button, { ButtonInterface } from './Button';
 
 interface Props
   extends ButtonInterface,
-    // eslint-disable-next-line @typescript-eslint/ban-types
-    RouteComponentProps<{}>,
     React.PropsWithoutRef<JSX.IntrinsicElements['button']> {}
 
 interface Props {
@@ -17,14 +15,11 @@ interface Props {
   to?: string;
 }
 
-function LinkButton(props: Props) {
+export default function LinkButton(props: Props): JSX.Element {
+  const history = useHistory();
   const {
     goBack,
-    history,
-    location, // eslint-disable-line @typescript-eslint/no-unused-vars
-    match, // eslint-disable-line @typescript-eslint/no-unused-vars
     onPress,
-    staticContext, // eslint-disable-line @typescript-eslint/no-unused-vars
     to,
     // ⬆ filtering out props which are not intrinsic to `<button>` element.
     ...rest
@@ -47,5 +42,3 @@ function LinkButton(props: Props) {
     />
   );
 }
-
-export default withRouter(LinkButton);
diff --git a/apps/election-manager/src/components/LinkButton.tsx b/apps/election-manager/src/components/LinkButton.tsx
index 64826ef09b..16418c12a8 100644
--- a/apps/election-manager/src/components/LinkButton.tsx
+++ b/apps/election-manager/src/components/LinkButton.tsx
@@ -1,13 +1,11 @@
 import React from 'react';
-import { RouteComponentProps, withRouter } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 import { EventTargetFunction } from '../config/types';
 
 import Button, { ButtonInterface } from './Button';
 
 interface Props
   extends ButtonInterface,
-    // eslint-disable-next-line @typescript-eslint/ban-types
-    RouteComponentProps<{}>,
     React.PropsWithoutRef<JSX.IntrinsicElements['button']> {
   goBack?: boolean;
   onPress?: EventTargetFunction;
@@ -15,18 +13,15 @@ interface Props
   to?: string;
 }
 
-function LinkButton(props: Props) {
+export default function LinkButton(props: Props): JSX.Element {
   const {
     goBack,
-    history,
-    location, // eslint-disable-line @typescript-eslint/no-unused-vars
-    match, // eslint-disable-line @typescript-eslint/no-unused-vars
     onPress,
-    staticContext, // eslint-disable-line @typescript-eslint/no-unused-vars
     to,
     // ⬆ filtering out props which are not intrinsic to `<button>` element.
     ...rest
   } = props;
+  const history = useHistory();
   const handleOnPress: EventTargetFunction = (event) => {
     /* istanbul ignore else */
     if (onPress) {
@@ -45,5 +40,3 @@ function LinkButton(props: Props) {
     />
   );
 }
-
-export default withRouter(LinkButton);
diff --git a/libs/ui/src/LinkButton.tsx b/libs/ui/src/LinkButton.tsx
index ac263d722b..0e19a3a0d1 100644
--- a/libs/ui/src/LinkButton.tsx
+++ b/libs/ui/src/LinkButton.tsx
@@ -1,25 +1,20 @@
 import React from 'react';
-import { RouteComponentProps, withRouter } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 import { EventTargetFunction } from '@votingworks/types';
 import { Button, ButtonProps } from './Button';
 
-export interface LinkButtonProps
-  extends Omit<ButtonProps, 'onPress'>,
-    RouteComponentProps<Record<string, string | undefined>> {
+export interface LinkButtonProps extends Omit<ButtonProps, 'onPress'> {
   goBack?: boolean;
   onPress?: EventTargetFunction;
   primary?: boolean;
   to?: string;
 }
 
-function LinkButton(props: LinkButtonProps): JSX.Element {
+export default function LinkButton(props: LinkButtonProps): JSX.Element {
+  const history = useHistory();
   const {
     goBack,
-    history,
-    location, // eslint-disable-line @typescript-eslint/no-unused-vars
-    match, // eslint-disable-line @typescript-eslint/no-unused-vars
     onPress,
-    staticContext, // eslint-disable-line @typescript-eslint/no-unused-vars
     to,
     // ⬆ filtering out props which are not intrinsic to `<button>` element.
     ...rest
@@ -42,5 +37,3 @@ function LinkButton(props: LinkButtonProps): JSX.Element {
     />
   );
 }
-
-export default withRouter(LinkButton);