Replace withRouter HOC with useHistory hook (#8721)

Small PR to refactor some technical debt in our React stack. I replaced
the `withRouter` HOC from `react-router` with a `useHistory` hook
instead.

The remaining 6 files with `withRouter` still use React class
components.

### Issues:
- None

------
(Please delete unneeded items, merge only when none are left open)
- [x] Added changelog entry (create a `$PR_NUMBER.md` file in
`unreleased_changes` or use `./tools/create-changelog-entry.py`)
- [ ] Added migration guide entry if applicable (edit the same file as
for the changelog)
- [ ] Updated [documentation](../blob/master/docs) if applicable
- [ ] Adapted [wk-libs python
client](https://github.com/scalableminds/webknossos-libs/tree/master/webknossos/webknossos/client)
if relevant API parts change
- [ ] Removed dev-only changes like prints and application.conf edits
- [ ] Considered [common edge
cases](../blob/master/.github/common_edge_cases.md)
- [ ] Needs datastore update after deployment

Author: hotzenklotz

frontend/javascripts/admin/auth/change_password_view.tsx

@@ -3,20 +3,17 @@ import { Alert, Button, Col, Form, Input, Row } from "antd";
 import Request from "libs/request";
 import Toast from "libs/toast";
 import messages from "messages";
-import { type RouteComponentProps, withRouter } from "react-router-dom";
+import { useHistory } from "react-router-dom";
 import { logoutUserAction } from "viewer/model/actions/user_actions";
 import Store from "viewer/store";
 const FormItem = Form.Item;
 const { Password } = Input;
 
-type Props = {
-  history: RouteComponentProps["history"];
-};
-
 const MIN_PASSWORD_LENGTH = 8;
 
-function ChangePasswordView({ history }: Props) {
+function ChangePasswordView() {
   const [form] = Form.useForm();
+  const history = useHistory();
 
   function onFinish(formValues: Record<string, any>) {
     Request.sendJSONReceiveJSON("/api/auth/changePassword", {
@@ -158,4 +155,4 @@ function ChangePasswordView({ history }: Props) {
   );
 }
 
-export default withRouter<RouteComponentProps, any>(ChangePasswordView);
+export default ChangePasswordView;

frontend/javascripts/admin/auth/finish_reset_password_view.tsx

@@ -3,16 +3,16 @@ import { Button, Card, Col, Form, Input, Row } from "antd";
 import Request from "libs/request";
 import Toast from "libs/toast";
 import messages from "messages";
-import { type RouteComponentProps, withRouter } from "react-router-dom";
+import { useHistory } from "react-router-dom";
 const FormItem = Form.Item;
 const { Password } = Input;
 type Props = {
-  history: RouteComponentProps["history"];
   resetToken: string;
 };
 
 function FinishResetPasswordView(props: Props) {
   const [form] = Form.useForm();
+  const history = useHistory();
 
   function onFinish(formValues: Record<string, any>) {
     const data = formValues;
@@ -27,7 +27,7 @@ function FinishResetPasswordView(props: Props) {
       data,
     }).then(() => {
       Toast.success(messages["auth.reset_pw_confirmation"]);
-      props.history.push("/auth/login");
+      history.push("/auth/login");
     });
   }
 
@@ -128,4 +128,4 @@ function FinishResetPasswordView(props: Props) {
   );
 }
 
-export default withRouter<RouteComponentProps & Props, any>(FinishResetPasswordView);
+export default FinishResetPasswordView;

frontend/javascripts/admin/auth/login_view.tsx

@@ -1,16 +1,15 @@
 import { Card, Col, Row } from "antd";
 import * as Utils from "libs/utils";
 import window from "libs/window";
-import type { RouteComponentProps } from "react-router-dom";
-import { withRouter } from "react-router-dom";
+import { useHistory } from "react-router-dom";
 import LoginForm from "./login_form";
 
 type Props = {
-  history: RouteComponentProps["history"];
   redirect?: string;
 };
 
-function LoginView({ history, redirect }: Props) {
+function LoginView({ redirect }: Props) {
+  const history = useHistory();
   const onLoggedIn = () => {
     if (!Utils.hasUrlParam("redirectPage")) {
       if (redirect) {
@@ -38,4 +37,4 @@ function LoginView({ history, redirect }: Props) {
   );
 }
 
-export default withRouter<RouteComponentProps & Props, any>(LoginView);
+export default LoginView;

frontend/javascripts/admin/auth/start_reset_password_view.tsx

@@ -3,14 +3,12 @@ import { Button, Card, Col, Form, Input, Row } from "antd";
 import Request from "libs/request";
 import Toast from "libs/toast";
 import messages from "messages";
-import { Link, type RouteComponentProps, withRouter } from "react-router-dom";
+import { Link, useHistory } from "react-router-dom";
 const FormItem = Form.Item;
-type Props = {
-  history: RouteComponentProps["history"];
-};
 
-function StartResetPasswordView({ history }: Props) {
+function StartResetPasswordView() {
   const [form] = Form.useForm();
+  const history = useHistory();
 
   const onFinish = (formValues: Record<string, any>) => {
     Request.sendJSONReceiveJSON("/api/auth/startResetPassword", {
@@ -67,4 +65,4 @@ function StartResetPasswordView({ history }: Props) {
   );
 }
 
-export default withRouter<RouteComponentProps & Props, any>(StartResetPasswordView);
+export default StartResetPasswordView;

frontend/javascripts/admin/dataset/dataset_add_view.tsx

@@ -4,13 +4,11 @@ import DatasetUploadView from "admin/dataset/dataset_upload_view";
 import { getDatastores } from "admin/rest_api";
 import { Button, Layout, Modal, Tabs, type TabsProps } from "antd";
 import features from "features";
-import type { History } from "history";
 import { useFetch } from "libs/react_helpers";
 import { useWkSelector } from "libs/react_hooks";
 import React, { useState } from "react";
 import { connect } from "react-redux";
-import type { RouteComponentProps } from "react-router-dom";
-import { withRouter } from "react-router-dom";
+import { useHistory } from "react-router-dom";
 import type { APIDataStore } from "types/api_types";
 import { getReadableURLPart } from "viewer/model/accessors/dataset_accessor";
 import { enforceActiveUser } from "viewer/model/accessors/user_accessor";
@@ -33,7 +31,8 @@ const addTypeToVerb: Record<DatasetAddType, string> = {
   compose: "created",
 };
 
-function DatasetAddView({ history }: RouteComponentProps) {
+function DatasetAddView() {
+  const history = useHistory();
   const datastores = useFetch<APIDataStore[]>(getDatastores, [], []);
   const [datasetId, setDatasetId] = useState("");
   const [uploadedDatasetName, setUploadedDatasetName] = useState("");
@@ -267,15 +266,15 @@ const mapStateToProps = (state: WebknossosState) => ({
 });
 
 const connector = connect(mapStateToProps);
-export default connector(withRouter(DatasetAddView));
+export default connector(DatasetAddView);
 
 const getPostUploadModal = (
   datasetNeedsConversion: boolean,
   datasetAddType: DatasetAddType,
   datasetId: string,
   uploadedDatasetName: string,
   setDatasetId: (arg0: string) => void,
-  history: History<unknown>,
+  history: ReturnType<typeof useHistory>,
 ) => {
   return (
     <Modal

frontend/javascripts/admin/project/project_create_view.tsx

@@ -14,13 +14,11 @@ import { enforceActiveUser } from "viewer/model/accessors/user_accessor";
 import { FormItemWithInfo } from "../../dashboard/dataset/helper_components";
 
 const FormItem = Form.Item;
-type OwnProps = {
+type Props = {
   projectId?: string | null | undefined;
 };
-type Props = OwnProps;
-type PropsWithRouter = Props;
 
-function ProjectCreateView({ projectId }: PropsWithRouter) {
+function ProjectCreateView({ projectId }: Props) {
   const [teams, setTeams] = useState<APITeam[]>([]);
   const [users, setUsers] = useState<APIUser[]>([]);
   const [isFetchingData, setIsFetchingData] = useState<boolean>(false);

frontend/javascripts/admin/scripts/script_create_view.tsx

@@ -2,8 +2,7 @@ import { createScript, getScript, getTeamManagerOrAdminUsers, updateScript } fro
 import { Button, Card, Form, Input, Select } from "antd";
 import { useEffect, useState } from "react";
 import { connect } from "react-redux";
-import type { RouteComponentProps } from "react-router-dom";
-import { withRouter } from "react-router-dom";
+import { useHistory } from "react-router-dom";
 import type { APIUser } from "types/api_types";
 import { enforceActiveUser } from "viewer/model/accessors/user_accessor";
 import type { WebknossosState } from "viewer/store";
@@ -16,11 +15,9 @@ type StateProps = {
   activeUser: APIUser;
 };
 type Props = OwnProps & StateProps;
-type PropsWithRouter = Props & {
-  history: RouteComponentProps["history"];
-};
 
-function ScriptCreateView({ scriptId, activeUser, history }: PropsWithRouter) {
+function ScriptCreateView({ scriptId, activeUser }: Props) {
+  const history = useHistory();
   const [users, setUsers] = useState<APIUser[]>([]);
   const [isFetchingData, setIsFetchingData] = useState<boolean>(false);
   const [form] = Form.useForm();
@@ -135,4 +132,4 @@ const mapStateToProps = (state: WebknossosState): StateProps => ({
 });
 
 const connector = connect(mapStateToProps);
-export default connector(withRouter<RouteComponentProps & Props, any>(ScriptCreateView));
+export default connector(ScriptCreateView);

frontend/javascripts/admin/task/task_create_form_view.tsx

@@ -42,8 +42,7 @@ import { Vector3Input, Vector6Input } from "libs/vector_input";
 import _ from "lodash";
 import messages from "messages";
 import React, { useEffect, useState } from "react";
-import type { RouteComponentProps } from "react-router-dom";
-import { withRouter } from "react-router-dom";
+import { useHistory } from "react-router-dom";
 import type { APIDataset, APIProject, APIScript, APITask, APITaskType } from "types/api_types";
 import type { Vector3, Vector6 } from "viewer/constants";
 import type { BoundingBoxObject } from "viewer/store";
@@ -291,7 +290,6 @@ export function ReloadResourceButton({
 
 type Props = {
   taskId: string | null | undefined;
-  history: RouteComponentProps["history"];
 };
 
 type FormValues = {
@@ -309,7 +307,8 @@ type FormValues = {
   neededExperience: NewTask["neededExperience"];
 };
 
-function TaskCreateFormView({ taskId, history }: Props) {
+function TaskCreateFormView({ taskId }: Props) {
+  const history = useHistory();
   const { modal } = App.useApp();
   const [form] = Form.useForm<FormValues>();
 
@@ -811,4 +810,4 @@ function TaskCreateFormView({ taskId, history }: Props) {
   );
 }
 
-export default withRouter<RouteComponentProps & Props, any>(TaskCreateFormView);
+export default TaskCreateFormView;

frontend/javascripts/admin/tasktype/task_type_create_view.tsx

@@ -9,8 +9,7 @@ import { useFetch } from "libs/react_helpers";
 import { jsonStringify } from "libs/utils";
 import _ from "lodash";
 import { useEffect, useState } from "react";
-import type { RouteComponentProps } from "react-router-dom";
-import { withRouter } from "react-router-dom";
+import { useHistory } from "react-router-dom";
 import {
   type APIAllowedMode,
   type APIMagRestrictions,
@@ -27,7 +26,6 @@ const { TextArea } = Input;
 
 type Props = {
   taskTypeId?: string | null | undefined;
-  history: RouteComponentProps["history"];
 };
 
 type FormValues = {
@@ -75,7 +73,8 @@ function isMaximumMagnificationSmallerThenMinRule(value: number | undefined, min
   );
 }
 
-function TaskTypeCreateView({ taskTypeId, history }: Props) {
+function TaskTypeCreateView({ taskTypeId }: Props) {
+  const history = useHistory();
   const [useRecommendedConfiguration, setUseRecommendedConfiguration] = useState(false);
   const [isFetchingData, setIsFetchingData] = useState(true);
   const [form] = Form.useForm<FormValues>();
@@ -502,4 +501,4 @@ function TaskTypeCreateView({ taskTypeId, history }: Props) {
   );
 }
 
-export default withRouter<RouteComponentProps & Props, any>(TaskTypeCreateView);
+export default TaskTypeCreateView;

frontend/javascripts/components/credits_footer.tsx

@@ -1,5 +1,5 @@
 import { Layout } from "antd";
-import { Link, type RouteComponentProps, withRouter } from "react-router-dom";
+import { Link } from "react-router-dom";
 const { Footer } = Layout;
 
 const creditsFooter = () => (
@@ -68,4 +68,4 @@ const creditsFooter = () => (
   </Footer>
 );
 
-export default withRouter<RouteComponentProps, any>(creditsFooter);
+export default creditsFooter;

frontend/javascripts/components/redirect.tsx

@@ -1,15 +1,14 @@
 import { useEffectOnlyOnce } from "libs/react_hooks";
 import type React from "react";
-import type { RouteComponentProps } from "react-router-dom";
-import { withRouter } from "react-router-dom";
+import { useHistory } from "react-router-dom";
 
 type Props = {
   redirectTo: () => Promise<string>;
-  history: RouteComponentProps["history"];
   pushToHistory?: boolean;
 };
 
-const AsyncRedirect: React.FC<Props> = ({ redirectTo, history, pushToHistory = true }) => {
+const AsyncRedirect: React.FC<Props> = ({ redirectTo, pushToHistory = true }) => {
+  const history = useHistory();
   useEffectOnlyOnce(() => {
     const redirect = async () => {
       const newPath = await redirectTo();
@@ -38,4 +37,4 @@ const AsyncRedirect: React.FC<Props> = ({ redirectTo, history, pushToHistory = t
   return null;
 };
 
-export default withRouter<RouteComponentProps & Props, any>(AsyncRedirect);
+export default AsyncRedirect;

unreleased_changes/8721.md

@@ -0,0 +1,2 @@
+### Changed
+- Replaced withRouter HOC with useHistory hook for several components.