Use useHistory and useLocation hooks

src/menu/top_bar.tsx

@@ -5,10 +5,10 @@ import {IndiInfo, JsonGedcomData} from 'topola';
 import {Link} from 'react-router-dom';
 import {Media} from '../util/media';
 import {MenuType} from './menu_item';
-import {RouteComponentProps} from 'react-router-dom';
 import {SearchBar} from './search';
 import {UploadMenu} from './upload_menu';
 import {UrlMenu} from './url_menu';
+import {useHistory, useLocation} from 'react-router';
 import {WikiTreeLoginMenu, WikiTreeMenu} from './wikitree_menu';
 
 enum ScreenSize {
@@ -37,14 +37,16 @@ interface Props {
   showWikiTreeMenus: boolean;
 }
 
-export function TopBar(props: RouteComponentProps & Props) {
+export function TopBar(props: Props) {
+  const history = useHistory();
+  const location = useLocation();
+
   function changeView(view: string) {
-    const location = props.location;
     const search = queryString.parse(location.search);
     if (search.view !== view) {
       search.view = view;
       location.search = queryString.stringify(search);
-      props.history.push(location);
+      history.push(location);
     }
   }
 

src/menu/upload_menu.tsx

@@ -4,8 +4,8 @@ import {analyticsEvent} from '../util/analytics';
 import {Dropdown, Icon, Menu} from 'semantic-ui-react';
 import {FormattedMessage} from 'react-intl';
 import {MenuType} from './menu_item';
-import {RouteComponentProps} from 'react-router-dom';
 import {SyntheticEvent} from 'react';
+import {useHistory, useLocation} from 'react-router';
 
 function loadFileAsText(file: File): Promise<string> {
   return new Promise((resolve) => {
@@ -27,7 +27,10 @@ interface Props {
 }
 
 /** Displays and handles the "Open file" menu. */
-export function UploadMenu(props: RouteComponentProps & Props) {
+export function UploadMenu(props: Props) {
+  const history = useHistory();
+  const location = useLocation();
+
   async function handleUpload(event: SyntheticEvent<HTMLInputElement>) {
     const files = (event.target as HTMLInputElement).files;
     if (!files || !files.length) {
@@ -68,9 +71,8 @@ export function UploadMenu(props: RouteComponentProps & Props) {
 
     // Use history.replace() when reuploading the same file and history.push() when loading
     // a new file.
-    const search = queryString.parse(props.location.search);
-    const historyPush =
-      search.file === hash ? props.history.replace : props.history.push;
+    const search = queryString.parse(location.search);
+    const historyPush = search.file === hash ? history.replace : history.push;
 
     historyPush({
       pathname: '/view',

src/menu/url_menu.tsx

@@ -3,18 +3,19 @@ import {analyticsEvent} from '../util/analytics';
 import {Button, Form, Header, Icon, Input, Modal} from 'semantic-ui-react';
 import {FormattedMessage} from 'react-intl';
 import {MenuItem, MenuType} from './menu_item';
-import {RouteComponentProps} from 'react-router-dom';
 import {useEffect, useRef, useState} from 'react';
+import {useHistory} from 'react-router';
 
 interface Props {
   menuType: MenuType;
 }
 
 /** Displays and handles the "Open URL" menu. */
-export function UrlMenu(props: RouteComponentProps & Props) {
+export function UrlMenu(props: Props) {
   const [dialogOpen, setDialogOpen] = useState(false);
   const [url, setUrl] = useState('');
   const inputRef = useRef<Input>(null);
+  const history = useHistory();
 
   useEffect(() => {
     if (dialogOpen) {
@@ -28,7 +29,7 @@ export function UrlMenu(props: RouteComponentProps & Props) {
     setDialogOpen(false);
     if (url) {
       analyticsEvent('url_selected');
-      props.history.push({
+      history.push({
         pathname: '/view',
         search: queryString.stringify({url}),
       });

src/menu/wikitree_menu.tsx

@@ -5,24 +5,20 @@ import {Button, Form, Header, Input, Modal} from 'semantic-ui-react';
 import {FormattedMessage, useIntl} from 'react-intl';
 import {getLoggedInUserName} from '../datasource/wikitree';
 import {MenuItem, MenuType} from './menu_item';
-import {RouteComponentProps} from 'react-router-dom';
 import {useEffect, useRef, useState} from 'react';
-
-enum WikiTreeLoginState {
-  UNKNOWN,
-  NOT_LOGGED_IN,
-  LOGGED_IN,
-}
+import {useHistory, useLocation} from 'react-router';
 
 interface Props {
   menuType: MenuType;
 }
 
 /** Displays and handles the "Select WikiTree ID" menu. */
-export function WikiTreeMenu(props: RouteComponentProps & Props) {
+export function WikiTreeMenu(props: Props) {
   const [dialogOpen, setDialogOpen] = useState(false);
   const [wikiTreeId, setWikiTreeId] = useState('');
   const inputRef = useRef<Input>(null);
+  const history = useHistory();
+  const location = useLocation();
 
   useEffect(() => {
     if (dialogOpen) {
@@ -38,10 +34,10 @@ export function WikiTreeMenu(props: RouteComponentProps & Props) {
       return;
     }
     analyticsEvent('wikitree_id_selected');
-    const search = queryString.parse(props.location.search);
+    const search = queryString.parse(location.search);
     const standalone =
       search.standalone !== undefined ? search.standalone : true;
-    props.history.push({
+    history.push({
       pathname: '/view',
       search: queryString.stringify({
         indi: wikiTreeId,