From 8a1645554e7974cb4fe8ffaea8a4b43406f25030 Mon Sep 17 00:00:00 2001
From: Szedann <65607498+Szedann@users.noreply.github.com>
Date: Wed, 23 Jul 2025 21:12:51 +0200
Subject: [PATCH] refactor: reactify

---
 apps/onelauncher/frontend/src/hooks/useBrowser.tsx     |  7 ++++---
 .../frontend/src/routes/app/browser/route.tsx          | 10 ++++++----
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/apps/onelauncher/frontend/src/hooks/useBrowser.tsx b/apps/onelauncher/frontend/src/hooks/useBrowser.tsx
index 0d907c73..261b1171 100644
--- a/apps/onelauncher/frontend/src/hooks/useBrowser.tsx
+++ b/apps/onelauncher/frontend/src/hooks/useBrowser.tsx
@@ -1,6 +1,7 @@
 import type { ClusterModel, GameLoader, ManagedPackage, ManagedVersion, Paginated, Provider, SearchQuery, SearchResult } from '@/bindings.gen';
 import type { BindingCommands } from '@/types/global';
 import type { UndefinedInitialDataOptions } from '@tanstack/react-query';
+import type { Dispatch, SetStateAction } from 'react';
 import { bindings } from '@/main';
 import { PROVIDERS } from '@/utils';
 import { useCommand } from '@onelauncher/common';
@@ -9,11 +10,11 @@ import { createContext, useContext, useEffect, useMemo, useState } from 'react';
 
 export interface BrowserControllerType {
 	cluster: ClusterModel | undefined;
-	setCluster: (cluster: ClusterModel | undefined) => void;
+	setCluster: Dispatch<SetStateAction<ClusterModel | undefined>>;
 	provider: Provider;
-	setProvider: (provider: Provider) => void;
+	setProvider: Dispatch<SetStateAction<Provider>>;
 	query: SearchQuery;
-	setQuery: (query: SearchQuery) => void;
+	setQuery: Dispatch<SetStateAction<SearchQuery>>;
 	search: () => void;
 }
 
diff --git a/apps/onelauncher/frontend/src/routes/app/browser/route.tsx b/apps/onelauncher/frontend/src/routes/app/browser/route.tsx
index 9b8463ee..373b2dd3 100644
--- a/apps/onelauncher/frontend/src/routes/app/browser/route.tsx
+++ b/apps/onelauncher/frontend/src/routes/app/browser/route.tsx
@@ -71,14 +71,16 @@ function BrowserSidebar() {
 				<div className="flex flex-col gap-y-1">
 					<h6 className="my-1 uppercase  opacity-60">Active Cluster</h6>
 					<Dropdown
-						onSelectionChange={(id) => {
-							const cluster = clusters?.find(item => item.id.toString() === id);
+						onSelectionChange={(index) => {
+							if (!clusters)
+								return;
+							const cluster = clusters[index as number];
 							context.setCluster(cluster);
 						}}
 						selectedKey={context.cluster?.id.toString()}
 					>
-						{clusters?.map(cluster => (
-							<Dropdown.Item id={cluster.id.toString()} key={cluster.id}>
+						{clusters?.map((cluster, index) => (
+							<Dropdown.Item id={index} key={cluster.id}>
 								{cluster.name}
 							</Dropdown.Item>
 						))}