From 51265b67022121ee6b9122d8504cfe360a27c1c4 Mon Sep 17 00:00:00 2001
From: martylukyy <35452459+martylukyy@users.noreply.github.com>
Date: Fri, 13 Sep 2024 17:05:23 +0200
Subject: [PATCH] feat(releases): show indexer name in indexer filter (#1720)

* feat(releases): show indexer name instead of identifier in releases indexer filter

* feat(releases): set correct types

* refactor(releases): show indexer name instead of identifier in releases indexer filter

* feat(releases): move listbox options back to render
feat(releases): fallback to identifier instead of showing unknown
---
 web/src/api/queries.ts                      | 16 +++++++++++++---
 web/src/screens/releases/ReleaseFilters.tsx |  7 +++++--
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/web/src/api/queries.ts b/web/src/api/queries.ts
index 4d1981b..f24bfbc 100644
--- a/web/src/api/queries.ts
+++ b/web/src/api/queries.ts
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: GPL-2.0-or-later
  */
 
-import { keepPreviousData, queryOptions } from "@tanstack/react-query";
+import { queryOptions } from "@tanstack/react-query";
 import { APIClient } from "@api/APIClient";
 import {
   ApiKeys,
@@ -133,8 +133,18 @@ export const ReleasesStatsQueryOptions = () =>
 export const ReleasesIndexersQueryOptions = () =>
   queryOptions({
     queryKey: ReleaseKeys.indexers(),
-    queryFn: () => APIClient.release.indexerOptions(),
-    placeholderData: keepPreviousData,
+    queryFn: async () => {
+      const indexersResponse: IndexerDefinition[] = await APIClient.indexers.getAll();
+      const indexerOptionsResponse: string[] = await APIClient.release.indexerOptions();
+      
+      const indexersMap = new Map(indexersResponse.map((indexer: IndexerDefinition) => [indexer.identifier, indexer.name]));
+      
+      return indexerOptionsResponse.map((identifier: string) => ({
+        name: indexersMap.get(identifier) || identifier,
+        identifier: identifier
+      }));
+    },
+    refetchOnWindowFocus: false,
     staleTime: Infinity
   });
 
diff --git a/web/src/screens/releases/ReleaseFilters.tsx b/web/src/screens/releases/ReleaseFilters.tsx
index c07f25f..700ba57 100644
--- a/web/src/screens/releases/ReleaseFilters.tsx
+++ b/web/src/screens/releases/ReleaseFilters.tsx
@@ -69,17 +69,20 @@ export const IndexerSelectColumnFilter = ({
 }: FilterProps<object>) => {
   const { data, isSuccess } = useQuery(ReleasesIndexersQueryOptions());
 
+  // Assign indexer name based on the filterValue (indexer.identifier)
+  const currentIndexerName = data?.find(indexer => indexer.identifier === filterValue)?.name ?? "Indexer";
+
   // Render a multi-select box
   return (
     <ListboxFilter
       id={id}
       key={id}
-      label={filterValue ?? "Indexer"}
+      label={currentIndexerName}
       currentValue={filterValue ?? ""}
       onChange={setFilter}
     >
       {isSuccess && data && data?.map((indexer, idx) => (
-        <FilterOption key={idx} label={indexer} value={indexer} />
+        <FilterOption key={idx} label={indexer.name} value={indexer.identifier} />
       ))}
     </ListboxFilter>
   );