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 microsoft/TypeScript#42873.

Author: eventualbuddha

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

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

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

apps/election-manager/src/components/LinkButton.tsx

@@ -1,32 +1,27 @@
 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;
   primary?: boolean;
   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);

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