Dataset Settings: Refactor as React functional components

frontend/javascripts/dashboard/dataset/dataset_settings_delete_tab.tsx

@@ -1,33 +1,23 @@
 import { useQueryClient } from "@tanstack/react-query";
 import { deleteDatasetOnDisk, getDataset } from "admin/rest_api";
 import { Button } from "antd";
+import { useFetch } from "libs/react_helpers";
 import Toast from "libs/toast";
 import messages from "messages";
-import { useEffect, useState } from "react";
-import type { RouteComponentProps } from "react-router-dom";
-import { withRouter } from "react-router-dom";
-import type { APIDataset } from "types/api_types";
+import { useState } from "react";
+import { useHistory } from "react-router-dom";
 import { confirmAsync } from "./helper_components";
 
 type Props = {
   datasetId: string;
-  history: RouteComponentProps["history"];
 };
 
-const DatasetSettingsDeleteTab = ({ datasetId, history }: Props) => {
+const DatasetSettingsDeleteTab = ({ datasetId }: Props) => {
   const [isDeleting, setIsDeleting] = useState(false);
-  const [dataset, setDataset] = useState<APIDataset | null | undefined>(null);
   const queryClient = useQueryClient();
+  const history = useHistory();
 
-  async function fetch() {
-    const newDataset = await getDataset(datasetId);
-    setDataset(newDataset);
-  }
-
-  // biome-ignore lint/correctness/useExhaustiveDependencies(fetch):
-  useEffect(() => {
-    fetch();
-  }, []);
+  const dataset = useFetch(() => getDataset(datasetId), null, [datasetId]);
 
   async function handleDeleteButtonClicked(): Promise<void> {
     if (!dataset) {
@@ -76,4 +66,4 @@ const DatasetSettingsDeleteTab = ({ datasetId, history }: Props) => {
   );
 };
 
-export default withRouter<RouteComponentProps & Props, any>(DatasetSettingsDeleteTab);
+export default DatasetSettingsDeleteTab;

frontend/javascripts/dashboard/dataset/dataset_settings_sharing_tab.tsx

@@ -6,27 +6,25 @@ import { AsyncButton } from "components/async_clickables";
 import { PricingEnforcedBlur } from "components/pricing_enforcers";
 import DatasetAccessListView from "dashboard/advanced_dataset/dataset_access_list_view";
 import TeamSelectionComponent from "dashboard/dataset/team_selection_component";
+import { useWkSelector } from "libs/react_hooks";
 import Toast from "libs/toast";
 import { isUserAdminOrDatasetManager, isUserAdminOrTeamManager } from "libs/utils";
 import window from "libs/window";
 import type React from "react";
 import { useEffect, useState } from "react";
-import { connect } from "react-redux";
-import { type RouteComponentProps, withRouter } from "react-router-dom";
-import type { APIDataset, APIUser } from "types/api_types";
+import type { APIDataset } from "types/api_types";
 import { getReadableURLPart } from "viewer/model/accessors/dataset_accessor";
-import type { WebknossosState } from "viewer/store";
 import { FormItemWithInfo } from "./helper_components";
 
 type Props = {
   form: FormInstance | null;
   datasetId: string;
   dataset: APIDataset | null | undefined;
-  activeUser: APIUser | null | undefined;
 };
 
-function DatasetSettingsSharingTab({ form, datasetId, dataset, activeUser }: Props) {
+export default function DatasetSettingsSharingTab({ form, datasetId, dataset }: Props) {
   const [sharingToken, setSharingToken] = useState("");
+  const activeUser = useWkSelector((state) => state.activeUser);
   const isDatasetManagerOrAdmin = isUserAdminOrDatasetManager(activeUser);
 
   const allowedTeamsComponent = (
@@ -161,10 +159,3 @@ function DatasetSettingsSharingTab({ form, datasetId, dataset, activeUser }: Pro
     </div>
   ) : null;
 }
-
-const mapStateToProps = (state: WebknossosState) => ({
-  activeUser: state.activeUser,
-});
-
-const connector = connect(mapStateToProps);
-export default connector(withRouter<RouteComponentProps & Props, any>(DatasetSettingsSharingTab));