Update Admin > Statistics views data fetching and error handling (#9416)

I updated the Admin > Statistics views slightly:
- unified data fetching with `useQuery`
- unified error handling for fetching with a new hook
`useQueryWithErrorHandling`
- fixed several code smells:


##### `time_tracking_overview.tsx`:
- Bug: filteredTimeEntries?.length === null is always false (array
length is never null)
  → fixed to filteredTimeEntries.length === 0
  - Typo: setEndeDate → setEndDate
- Race condition: both useFetch calls shared the same isFetching state —
one could clear
it while the other was still loading. Now each query has its own
isLoading/isFetching
flag, combined as const isFetching = isTeamsLoading || isEntriesFetching
 

#####  `time_tracking_detail_view.tsx`:
- Missing key prop: project header <Row> in taskRows had no key → added
key={project}
- Missing key on fragments: the <> {row} <Divider/> </> wrapper in the
map had no key →
  replaced with <Fragment key={index}>
- Destructured props at component signature instead of accessing via
props.x

##### `project_and_annotation_type_dropdown.tsx`:
- let allOptions = [...] → const allOptions (it's only mutated via
.push(), never
  reassigned)
- useState(Array<string>) → useState<string[]>([]) (the former uses
Array as a lazy
  initializer function — valid but highly unusual and non-obvious)

### URL of deployed dev instance (used for testing):
- https://___.webknossos.xyz

### Steps to test:
- abc


### Issues:
- fixes #

------
(Please delete unneeded items, merge only when none are left open)
- [ ] 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

---------

Co-authored-by: Philipp Otto <philippotto@users.noreply.github.com>

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 });
     }