👁️
use unified search on deck page
+13
-5
+13
-5
src/components/deck/CardSearchAutocomplete.tsx
+13
-5
src/components/deck/CardSearchAutocomplete.tsx
···
5
5
import { type Deck, getCommanderColorIdentity } from "@/lib/deck-types";
6
6
import {
7
7
getCardByIdQueryOptions,
8
-
searchCardsQueryOptions,
8
+
unifiedSearchQueryOptions,
9
9
} from "@/lib/queries";
10
10
import type {
11
11
Card,
···
67
67
}, [legalityFilterEnabled, format, deck, queryClient]);
68
68
69
69
const { data, isFetching } = useQuery(
70
-
searchCardsQueryOptions(debouncedSearch, restrictions, 20),
70
+
unifiedSearchQueryOptions(debouncedSearch, restrictions, 20),
71
71
);
72
72
73
73
const displayCards = data?.cards ?? [];
···
144
144
const toastId = toast.loading(`searching for "${searchTerm}"...`);
145
145
146
146
queryClient
147
-
.fetchQuery(searchCardsQueryOptions(searchTerm, restrictions, 1))
147
+
.fetchQuery(unifiedSearchQueryOptions(searchTerm, restrictions, 1))
148
148
.then((result) => {
149
-
const topCard = result.cards[0];
149
+
const topCard = result.cards?.[0];
150
150
if (topCard) {
151
151
onCardSelect?.(topCard.id);
152
152
onCardHover?.(topCard.id);
···
250
250
}
251
251
}}
252
252
placeholder="Search for a card..."
253
-
className="w-full px-4 py-2 pr-10 bg-white dark:bg-zinc-900 border border-gray-300 dark:border-zinc-600 rounded-lg text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-cyan-500 dark:focus:ring-cyan-400"
253
+
className={`w-full px-4 py-2 pr-10 bg-white dark:bg-zinc-900 border rounded-lg text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-zinc-500 focus:outline-none focus:ring-2 ${
254
+
data?.error
255
+
? "border-red-500 focus:ring-red-500 dark:focus:ring-red-400"
256
+
: "border-gray-300 dark:border-zinc-600 focus:ring-cyan-500 dark:focus:ring-cyan-400"
257
+
}`}
254
258
/>
255
259
256
260
{isFetching && debouncedSearch.trim().length > 0 && (
···
305
309
</button>
306
310
);
307
311
})}
312
+
</div>
313
+
) : data?.error ? (
314
+
<div className="px-4 py-4 text-center text-red-600 dark:text-red-400 text-sm">
315
+
{data.error.message}
308
316
</div>
309
317
) : (
310
318
<div className="px-4 py-8 text-center text-gray-500 dark:text-zinc-300">