Skip to content

Commit

Permalink
refactor(router): replace withRouter with hooks
Browse files Browse the repository at this point in the history
`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.
  • Loading branch information
eventualbuddha committed Oct 28, 2021
1 parent 3a58436 commit 6a3b011
Show file tree
Hide file tree
Showing 5 changed files with 17 additions and 43 deletions.
10 changes: 4 additions & 6 deletions apps/bmd/src/components/FocusManager.tsx
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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'];
Expand All @@ -21,7 +21,7 @@ export interface Props extends RouteComponentProps {
screenReader: ScreenReader;
}

function FocusManager({
export default function FocusManager({
onKeyPress,
onClick,
onFocus,
Expand All @@ -30,8 +30,8 @@ function FocusManager({
onFocusCapture,
children,
screenReader,
location,
}: Props): JSX.Element {
const location = useLocation();
const screen = useRef<HTMLDivElement>(null);
useEffect(() => {
function onPageLoad() {
Expand Down Expand Up @@ -67,5 +67,3 @@ function FocusManager({
</StyledFocusManager>
);
}

export default withRouter(FocusManager);
9 changes: 3 additions & 6 deletions apps/bmd/src/pages/StartPage.tsx
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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,
Expand Down Expand Up @@ -121,5 +120,3 @@ function StartPage({ history }: Props): JSX.Element {
</Screen>
);
}

export default withRouter(StartPage);
13 changes: 3 additions & 10 deletions apps/bsd/src/components/LinkButton.tsx
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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
Expand All @@ -47,5 +42,3 @@ function LinkButton(props: Props) {
/>
);
}

export default withRouter(LinkButton);
13 changes: 3 additions & 10 deletions apps/election-manager/src/components/LinkButton.tsx
Original file line number Diff line number Diff line change
@@ -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) {
Expand All @@ -45,5 +40,3 @@ function LinkButton(props: Props) {
/>
);
}

export default withRouter(LinkButton);
15 changes: 4 additions & 11 deletions libs/ui/src/LinkButton.tsx
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -42,5 +37,3 @@ function LinkButton(props: LinkButtonProps): JSX.Element {
/>
);
}

export default withRouter(LinkButton);

0 comments on commit 6a3b011

Please sign in to comment.