refactor: reactify

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

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