Update React Router to v6

frontend/javascripts/admin/account/account_password_view.tsx

@@ -4,7 +4,7 @@ import { Alert, Button, Col, Form, Input, Row, Space } from "antd";
 import Toast from "libs/toast";
 import messages from "messages";
 import { useState } from "react";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { logoutUserAction } from "viewer/model/actions/user_actions";
 import Store from "viewer/store";
 import { SettingsCard } from "./helpers/settings_card";
@@ -15,7 +15,7 @@ const { Password } = Input;
 const MIN_PASSWORD_LENGTH = 8;
 
 function AccountPasswordView() {
-  const history = useHistory();
+  const navigate = useNavigate();
   const [form] = Form.useForm();
   const [isResetPasswordVisible, setResetPasswordVisible] = useState(false);
 
@@ -25,7 +25,7 @@ function AccountPasswordView() {
         Toast.success(messages["auth.reset_pw_confirmation"]);
         await logoutUser();
         Store.dispatch(logoutUserAction());
-        history.push("/auth/login");
+        navigate("/auth/login");
       })
       .catch((error) => {
         console.error("Password change failed:", error);

frontend/javascripts/admin/account/account_settings_view.tsx

@@ -1,10 +1,7 @@
 import { SafetyOutlined, SettingOutlined, UserOutlined } from "@ant-design/icons";
 import { Breadcrumb, Layout, Menu } from "antd";
 import type { MenuItemGroupType } from "antd/es/menu/interface";
-import { Redirect, Route, Switch, useHistory, useLocation } from "react-router-dom";
-import AccountAuthTokenView from "./account_auth_token_view";
-import AccountPasswordView from "./account_password_view";
-import AccountProfileView from "./account_profile_view";
+import { Outlet, useLocation, useNavigate } from "react-router-dom";
 
 const { Sider, Content } = Layout;
 
@@ -46,7 +43,7 @@ const MENU_ITEMS: MenuItemGroupType[] = [
 
 function AccountSettingsView() {
   const location = useLocation();
-  const history = useHistory();
+  const navigate = useNavigate();
   const selectedKey = location.pathname.split("/").filter(Boolean).pop() || "profile";
 
   const breadcrumbItems = [
@@ -68,17 +65,12 @@ function AccountSettingsView() {
           selectedKeys={[selectedKey]}
           style={{ height: "100%", padding: 24 }}
           items={MENU_ITEMS}
-          onClick={({ key }) => history.push(`/account/${key}`)}
+          onClick={({ key }) => navigate(`/account/${key}`)}
         />
       </Sider>
       <Content style={{ padding: "32px", minHeight: 280, maxWidth: 1000 }}>
         <Breadcrumb style={{ marginBottom: "16px" }} items={breadcrumbItems} />
-        <Switch>
-          <Route path="/account/profile" component={AccountProfileView} />
-          <Route path="/account/password" component={AccountPasswordView} />
-          <Route path="/account/token" component={AccountAuthTokenView} />
-          <Route path="/account" render={() => <Redirect to="/account/profile" />} />
-        </Switch>
+        <Outlet />
       </Content>
     </Layout>
   );

frontend/javascripts/admin/auth/accept_invite_view.tsx

@@ -4,22 +4,19 @@ import { getOrganizationByInvite, joinOrganization, switchToOrganization } from
 import { Button, Layout, Result, Spin } from "antd";
 import { AsyncButton } from "components/async_clickables";
 import { useFetch } from "libs/react_helpers";
+import { useWkSelector } from "libs/react_hooks";
 import Toast from "libs/toast";
 import { location } from "libs/window";
 import { useState } from "react";
-import { useHistory } from "react-router-dom";
-import type { APIUser } from "types/api_types";
+import { useNavigate, useParams } from "react-router-dom";
 
 const { Content } = Layout;
 
-export default function AcceptInviteView({
-  token,
-  activeUser,
-}: {
-  token: string;
-  activeUser: APIUser | null | undefined;
-}) {
-  const history = useHistory();
+export default function AcceptInviteView() {
+  const activeUser = useWkSelector((state) => state.activeUser);
+  const { token = "" } = useParams();
+  const navigate = useNavigate();
+
   const [isAuthenticationModalOpen, setIsAuthenticationModalOpen] = useState(false);
   const [targetOrganization, exception] = useFetch(
     async () => {
@@ -46,7 +43,7 @@ export default function AcceptInviteView({
     targetOrganization != null ? targetOrganization.name || targetOrganization.id : "unknown";
 
   const onSuccessfulJoin = (userJustRegistered: boolean = false) => {
-    history.push("/dashboard");
+    navigate("/dashboard");
 
     if (userJustRegistered) {
       // Since the user just registered, the organization is already active.

frontend/javascripts/admin/auth/finish_reset_password_view.tsx

@@ -2,32 +2,34 @@ import { LockOutlined } from "@ant-design/icons";
 import { Button, Card, Col, Form, Input, Row } from "antd";
 import Request from "libs/request";
 import Toast from "libs/toast";
+import { getUrlParamsObjectFromString } from "libs/utils";
 import messages from "messages";
-import { useHistory } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
+
 const FormItem = Form.Item;
 const { Password } = Input;
-type Props = {
-  resetToken: string;
-};
 
-function FinishResetPasswordView(props: Props) {
+function FinishResetPasswordView() {
+  const location = useLocation();
+  const { token } = getUrlParamsObjectFromString(location.search);
+
   const [form] = Form.useForm();
-  const history = useHistory();
+  const navigate = useNavigate();
 
   function onFinish(formValues: Record<string, any>) {
     const data = formValues;
 
-    if (props.resetToken === "") {
+    if (token == null) {
       Toast.error(messages["auth.reset_token_not_supplied"]);
       return;
     }
 
-    data.token = props.resetToken;
+    data.token = token;
     Request.sendJSONReceiveJSON("/api/auth/resetPassword", {
       data,
     }).then(() => {
       Toast.success(messages["auth.reset_pw_confirmation"]);
-      history.push("/auth/login");
+      navigate("/auth/login");
     });
   }
 

frontend/javascripts/admin/auth/login_view.tsx

@@ -1,22 +1,30 @@
 import { Card, Col, Row } from "antd";
+import { useWkSelector } from "libs/react_hooks";
 import * as Utils from "libs/utils";
 import window from "libs/window";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import LoginForm from "./login_form";
 
 type Props = {
   redirect?: string;
 };
 
 function LoginView({ redirect }: Props) {
-  const history = useHistory();
+  const navigate = useNavigate();
+  const isAuthenticated = useWkSelector((state) => state.activeUser != null);
+
+  if (isAuthenticated) {
+    // If you're already logged in, redirect to the dashboard
+    navigate("/");
+  }
+
   const onLoggedIn = () => {
     if (!Utils.hasUrlParam("redirectPage")) {
       if (redirect) {
         // Use "redirect" prop for internal redirects, e.g. for SecuredRoutes
-        history.push(redirect);
+        navigate(redirect);
       } else {
-        history.push("/dashboard");
+        navigate("/dashboard");
       }
     } else {
       // Use "redirectPage" URL parameter to cause a full page reload and redirecting to external sites

frontend/javascripts/admin/auth/registration_view.tsx

@@ -3,14 +3,15 @@ import RegistrationFormWKOrg from "admin/auth/registration_form_wkorg";
 import { getDefaultOrganization } from "admin/rest_api";
 import { Card, Col, Row, Spin } from "antd";
 import features from "features";
+import { useWkSelector } from "libs/react_hooks";
 import Toast from "libs/toast";
 import messages from "messages";
 import { useEffect, useState } from "react";
-import { Link, useHistory } from "react-router-dom";
+import { Link, Navigate, useNavigate } from "react-router-dom";
 import type { APIOrganization } from "types/api_types";
 
 function RegistrationViewGeneric() {
-  const history = useHistory();
+  const navigate = useNavigate();
   const [organization, setOrganization] = useState<APIOrganization | null>(null);
   const [isLoading, setIsLoading] = useState(true);
 
@@ -55,10 +56,10 @@ function RegistrationViewGeneric() {
           targetOrganization={organization}
           onRegistered={(isUserLoggedIn?: boolean) => {
             if (isUserLoggedIn) {
-              history.goBack();
+              navigate(-1);
             } else {
               Toast.success(messages["auth.account_created"]);
-              history.push("/auth/login");
+              navigate("/auth/login");
             }
           }}
         />
@@ -95,15 +96,15 @@ function RegistrationViewGeneric() {
 }
 
 function RegistrationViewWkOrg() {
-  const history = useHistory();
+  const navigate = useNavigate();
   return (
     <Row justify="center" align="middle" className="login-view">
       <Col>
         <Card className="login-content drawing-signup" style={{ maxWidth: 1000 }}>
           <h3>Sign Up</h3>
           <RegistrationFormWKOrg
             onRegistered={() => {
-              history.push("/dashboard");
+              navigate("/dashboard");
             }}
           />
           <p
@@ -120,6 +121,12 @@ function RegistrationViewWkOrg() {
 }
 
 function RegistrationView() {
+  // If you're already logged in, redirect to the dashboard
+  const isAuthenticated = useWkSelector((state) => state.activeUser != null);
+
+  if (isAuthenticated) {
+    return <Navigate to="/" />;
+  }
   return features().isWkorgInstance ? <RegistrationViewWkOrg /> : <RegistrationViewGeneric />;
 }
 

frontend/javascripts/admin/auth/start_reset_password_view.tsx

@@ -3,19 +3,19 @@ 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, useHistory } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 const FormItem = Form.Item;
 
 function StartResetPasswordView() {
   const [form] = Form.useForm();
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const onFinish = (formValues: Record<string, any>) => {
     Request.sendJSONReceiveJSON("/api/auth/startResetPassword", {
       data: formValues,
     }).then(() => {
       Toast.success(messages["auth.reset_email_notification"]);
-      history.push("/");
+      navigate("/");
     });
   };
 

frontend/javascripts/admin/auth/verify_email_view.tsx

@@ -4,7 +4,7 @@ import { useFetch } from "libs/react_helpers";
 import type { ServerErrorMessage } from "libs/request";
 import Toast from "libs/toast";
 import { useEffect } from "react";
-import { useHistory } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import { Store } from "viewer/singletons";
 
 export const VERIFICATION_ERROR_TOAST_KEY = "verificationError";
@@ -44,8 +44,9 @@ export function showVerificationReminderToast() {
   );
 }
 
-export default function VerifyEmailView({ token }: { token: string }) {
-  const history = useHistory();
+export default function VerifyEmailView() {
+  const { token = "" } = useParams();
+  const navigate = useNavigate();
   const [result, exception] = useFetch(
     async () => {
       try {
@@ -62,7 +63,7 @@ export default function VerifyEmailView({ token }: { token: string }) {
     Toast.close(VERIFICATION_ERROR_TOAST_KEY);
   }, []);
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: history.push is not needed as a dependency.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: navigate is not needed as a dependency.
   useEffect(() => {
     if (result) {
       Toast.success("Successfully verified your email.");
@@ -80,7 +81,7 @@ export default function VerifyEmailView({ token }: { token: string }) {
     }
 
     if (result || exception) {
-      history.push("/");
+      navigate("/");
     }
   }, [result, exception]);
   return (

frontend/javascripts/admin/dataset/dataset_add_remote_view.tsx

@@ -25,20 +25,19 @@ import DatasetSettingsDataTab, {
 import { FormItemWithInfo, Hideable } from "dashboard/dataset/helper_components";
 import FolderSelection from "dashboard/folders/folder_selection";
 import { formatScale } from "libs/format_utils";
+import { useWkSelector } from "libs/react_hooks";
 import { readFileAsText } from "libs/read_file";
 import Toast from "libs/toast";
 import { jsonStringify } from "libs/utils";
 import * as Utils from "libs/utils";
 import _ from "lodash";
 import messages from "messages";
 import React, { useEffect, useState } from "react";
-import { connect } from "react-redux";
-import { useHistory } from "react-router-dom";
-import type { APIDataStore, APIUser } from "types/api_types";
+import { useNavigate } from "react-router-dom";
+import type { APIDataStore } from "types/api_types";
 import type { ArbitraryObject } from "types/globals";
 import type { DataLayer, DatasourceConfiguration } from "types/schemas/datasource.types";
 import { Unicode } from "viewer/constants";
-import type { WebknossosState } from "viewer/store";
 import { Hint } from "viewer/view/action-bar/download_modal_view";
 import { dataPrivacyInfo } from "./dataset_upload_view";
 
@@ -48,7 +47,7 @@ const { Password } = Input;
 
 type FileList = UploadFile<any>[];
 
-type OwnProps = {
+type Props = {
   onAdded: (
     uploadedDatasetId: string,
     updatedDatasetName: string,
@@ -61,11 +60,6 @@ type OwnProps = {
   // the exploration and import.
   defaultDatasetUrl?: string | null | undefined;
 };
-type StateProps = {
-  activeUser: APIUser | null | undefined;
-};
-type Props = OwnProps & StateProps;
-
 function ensureLargestSegmentIdsInPlace(datasource: DatasourceConfiguration) {
   for (const layer of datasource.dataLayers) {
     if (layer.category === "color" || layer.largestSegmentId != null) {
@@ -180,7 +174,10 @@ export function GoogleAuthFormItem({
 }
 
 function DatasetAddRemoteView(props: Props) {
-  const { activeUser, onAdded, datastores, defaultDatasetUrl } = props;
+  const { activeUser } = useWkSelector((state) => ({
+    activeUser: state.activeUser,
+  }));
+  const { onAdded, datastores, defaultDatasetUrl } = props;
 
   const uploadableDatastores = datastores.filter((datastore) => datastore.allowsUpload);
   const hasOnlyOneDatastoreOrNone = uploadableDatastores.length <= 1;
@@ -192,7 +189,7 @@ function DatasetAddRemoteView(props: Props) {
   const [targetFolderId, setTargetFolderId] = useState<string | null>(null);
   const isDatasourceConfigStrFalsy = Form.useWatch("dataSourceJson", form) == null;
   const maybeDataLayers = Form.useWatch(["dataSource", "dataLayers"], form);
-  const history = useHistory();
+  const navigate = useNavigate();
 
   useEffect(() => {
     const params = new URLSearchParams(location.search);
@@ -213,7 +210,7 @@ function DatasetAddRemoteView(props: Props) {
       .getFieldError("datasetName")
       .filter((error) => error === messages["dataset.name.already_taken"]);
     if (maybeDSNameError == null) return;
-    history.push(
+    navigate(
       `/datasets/${activeUser?.organization}/${form.getFieldValue(["dataSource", "id", "name"])}`,
     );
   };
@@ -729,9 +726,4 @@ function AddRemoteLayer({
   );
 }
 
-const mapStateToProps = (state: WebknossosState): StateProps => ({
-  activeUser: state.activeUser,
-});
-
-const connector = connect(mapStateToProps);
-export default connector(DatasetAddRemoteView);
+export default DatasetAddRemoteView;