Merge branch 'master' into filter-complimentary-credits

Author: hotzenklotz

frontend/javascripts/admin/statistic/available_tasks_report_view.tsx

@@ -3,37 +3,26 @@ import AdminPage from "admin/admin_page";
 import { getAvailableTasksReport } from "admin/rest_api";
 import { Spin, Table, Tag, Tooltip } from "antd";
 import TeamSelectionComponent from "dashboard/dataset/team_selection_component";
-import { handleGenericError } from "libs/error_handling";
+import { useQueryWithErrorHandling } from "libs/react_hooks";
 import { compareBy, localeCompareBy } from "libs/utils";
 import { useState } from "react";
 import type { APIAvailableTasksReport } from "types/api_types";
 
 const { Column } = Table;
 
 /*
- * Note that the phrasing “available” tasks is chosen here over “pending” to
+ * Note that the phrasing "available" tasks is chosen here over "pending" to
  * emphasize that tasks are still available for individual users.
  * From the project viewpoint they are tasks with pending instances.
  */
 function AvailableTasksReportView() {
-  const [data, setData] = useState<APIAvailableTasksReport[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
+  const [selectedTeamId, setSelectedTeamId] = useState<string | null>(null);
 
-  async function fetchData(teamId: string | null | undefined) {
-    if (teamId == null) {
-      setData([]);
-    } else {
-      try {
-        setIsLoading(true);
-        const progressData = await getAvailableTasksReport(teamId);
-        setData(progressData);
-      } catch (error) {
-        handleGenericError(error as Error);
-      } finally {
-        setIsLoading(false);
-      }
-    }
-  }
+  const { data = [], isLoading } = useQueryWithErrorHandling({
+    queryKey: ["availableTasksReport", selectedTeamId],
+    enabled: selectedTeamId != null,
+    queryFn: () => getAvailableTasksReport(selectedTeamId!),
+  });
 
   return (
     <AdminPage
@@ -47,7 +36,7 @@ function AvailableTasksReportView() {
           <TeamSelectionComponent
             onChange={(selectedTeam) => {
               if (!Array.isArray(selectedTeam) && selectedTeam != null) {
-                fetchData(selectedTeam.id);
+                setSelectedTeamId(selectedTeam.id);
               }
             }}
             prefix={<FilterOutlined />}

frontend/javascripts/admin/statistic/project_and_annotation_type_dropdown.tsx

@@ -1,8 +1,7 @@
 import { FilterOutlined } from "@ant-design/icons";
 import { getProjects } from "admin/rest_api";
 import { Select } from "antd";
-import { useFetch } from "libs/react_helpers";
-import { useWkSelector } from "libs/react_hooks";
+import { useQueryWithErrorHandling, useWkSelector } from "libs/react_hooks";
 import { isUserAdminOrTeamManager } from "libs/utils";
 import type React from "react";
 import { useEffect, useState } from "react";
@@ -55,17 +54,15 @@ function ProjectAndAnnotationTypeDropdown({
 }: ProjectAndTypeDropdownProps) {
   // This state property is derived from selectedProjectIds and selectedAnnotationType.
   // It is mainly used to determine the selected items in the multiselect form item.
-  const [selectedFilters, setSelectedFilters] = useState(Array<string>);
+  const [selectedFilters, setSelectedFilters] = useState<string[]>([]);
   const [filterOptions, setFilterOptions] = useState<Array<NestedSelectOptions>>([]);
   const activeUser = useWkSelector((state) => state.activeUser);
-  const allProjects = useFetch(
-    async () => {
-      if (activeUser == null || !isUserAdminOrTeamManager(activeUser)) return [];
-      return await getProjects();
-    },
-    [],
-    [],
-  );
+
+  const { data: allProjects = [] } = useQueryWithErrorHandling({
+    queryKey: ["projects"],
+    enabled: activeUser != null && isUserAdminOrTeamManager(activeUser),
+    queryFn: getProjects,
+  });
 
   useEffect(() => {
     const selectedKeys =
@@ -84,7 +81,10 @@ function ProjectAndAnnotationTypeDropdown({
         value: project.id,
       };
     });
-    let allOptions = [ANNOTATION_TYPE_FILTERS, ANNOTATION_STATE_FILTERS];
+    const allOptions: Array<NestedSelectOptions> = [
+      ANNOTATION_TYPE_FILTERS,
+      ANNOTATION_STATE_FILTERS,
+    ];
     if (projectOptions.length > 0) {
       allOptions.push({ label: "Filter projects (only tasks)", options: projectOptions });
     }