diff --git a/app/soapbox/components/account.tsx b/app/soapbox/components/account.tsx
index 4fd4d4218e..47dc5d769b 100644
--- a/app/soapbox/components/account.tsx
+++ b/app/soapbox/components/account.tsx
@@ -119,7 +119,7 @@ const Account = ({
);
}
- const LinkEl = showProfileHoverCard ? Link : 'div';
+ const LinkEl: any = showProfileHoverCard ? Link : 'div';
return (
@@ -132,7 +132,7 @@ const Account = ({
event.stopPropagation()}
+ onClick={(event: React.MouseEvent) => event.stopPropagation()}
>
@@ -146,7 +146,7 @@ const Account = ({
event.stopPropagation()}
+ onClick={(event: React.MouseEvent) => event.stopPropagation()}
>
= React.forwardRef((props, ref: React.ForwardedRef): JSX.Element => {
- const { backHref, children, label, history, transparent = false, withHeader = true } = props;
+ const { backHref, children, label, transparent = false, withHeader = true } = props;
+
+ const history = useHistory();
const handleBackClick = () => {
if (backHref) {
@@ -57,4 +59,4 @@ const Column: React.FC = React.forwardRef((props, ref: React.ForwardedR
);
});
-export default withRouter(Column);
+export default Column;
diff --git a/app/soapbox/components/ui/tabs/tabs.tsx b/app/soapbox/components/ui/tabs/tabs.tsx
index bbb43267d5..ad82f7a7a1 100644
--- a/app/soapbox/components/ui/tabs/tabs.tsx
+++ b/app/soapbox/components/ui/tabs/tabs.tsx
@@ -7,7 +7,7 @@ import {
} from '@reach/tabs';
import classNames from 'classnames';
import * as React from 'react';
-import { RouteComponentProps, withRouter } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
import './tabs.css';
@@ -87,14 +87,16 @@ type Item = {
action?: () => void,
name: string
}
-interface ITabs extends RouteComponentProps {
+interface ITabs {
items: Item[],
activeItem: string,
}
-const Tabs = ({ items, activeItem, history }: ITabs) => {
+const Tabs = ({ items, activeItem }: ITabs) => {
const defaultIndex = items.findIndex(({ name }) => name === activeItem);
+ const history = useHistory();
+
const onChange = (selectedIndex: number) => {
const item = items[selectedIndex];
@@ -130,4 +132,4 @@ const Tabs = ({ items, activeItem, history }: ITabs) => {
);
};
-export default withRouter(Tabs);
+export default Tabs;
diff --git a/app/soapbox/features/account/components/header.js b/app/soapbox/features/account/components/header.js
index 7446898300..42fcad65d7 100644
Binary files a/app/soapbox/features/account/components/header.js and b/app/soapbox/features/account/components/header.js differ
diff --git a/app/soapbox/features/compose/components/search.tsx b/app/soapbox/features/compose/components/search.tsx
index 10e1ebc6b9..791aa0dbfc 100644
--- a/app/soapbox/features/compose/components/search.tsx
+++ b/app/soapbox/features/compose/components/search.tsx
@@ -5,7 +5,7 @@ import * as React from 'react';
import InlineSVG from 'react-inlinesvg';
import { defineMessages, useIntl } from 'react-intl';
import { useDispatch } from 'react-redux';
-import { RouteComponentProps, withRouter } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
import AutosuggestAccountInput from 'soapbox/components/autosuggest_account_input';
import { useAppSelector } from 'soapbox/hooks';
@@ -32,7 +32,7 @@ function redirectToAccount(accountId: number, routerHistory: any) {
};
}
-interface ISearch extends RouteComponentProps {
+interface ISearch {
autoFocus?: boolean,
autoSubmit?: boolean,
autosuggest?: boolean,
@@ -44,11 +44,11 @@ const Search = (props: ISearch) => {
autoFocus = false,
autoSubmit = false,
autosuggest = false,
- history,
openInRoute = false,
} = props;
const dispatch = useDispatch();
+ const history = useHistory();
const intl = useIntl();
const value = useAppSelector((state) => state.search.get('value'));
@@ -156,4 +156,4 @@ const Search = (props: ISearch) => {
);
};
-export default withRouter(Search);
+export default Search;
diff --git a/app/soapbox/features/developers/developers_menu.js b/app/soapbox/features/developers/developers_menu.js
index 919208c848..79227fb44e 100644
Binary files a/app/soapbox/features/developers/developers_menu.js and b/app/soapbox/features/developers/developers_menu.js differ
diff --git a/app/soapbox/features/notifications/components/notification.js b/app/soapbox/features/notifications/components/notification.js
index d399cdcf47..3c5462ce3b 100644
Binary files a/app/soapbox/features/notifications/components/notification.js and b/app/soapbox/features/notifications/components/notification.js differ
diff --git a/app/soapbox/features/preferences/index.tsx b/app/soapbox/features/preferences/index.tsx
index a770fb7768..df0d206394 100644
--- a/app/soapbox/features/preferences/index.tsx
+++ b/app/soapbox/features/preferences/index.tsx
@@ -111,11 +111,17 @@ const Preferences = () => {
return (