pokemon/nuzlocke-tracker
1
1
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Use PokemonSelector autocomplete for route encounter form

Browse Source 
Replace the manual search input + select dropdown with the existing
PokemonSelector component, matching the boss team editor UX.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Julian Tabel
2026-02-08 20:04:26 +01:00
parent 3d515f0e4e
commit 8e1c8b554f
2 changed files with 9 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.beans/nuzlocke-tracker-mg46--use-pokemonselector-autocomplete-for-route-encount.md
View File

@@ -1,10 +1,11 @@
--- ---
# nuzlocke-tracker-mg46 # nuzlocke-tracker-mg46
title: Use PokemonSelector autocomplete for route encounters title: Use PokemonSelector autocomplete for route encounters
status: todo status: completed
type: feature type: feature
priority: normal
created_at: 2026-02-08T12:33:11Z created_at: 2026-02-08T12:33:11Z
updated_at: 2026-02-08T12:33:11Z updated_at: 2026-02-08T19:04:07Z
parent: nuzlocke-tracker-iu5b parent: nuzlocke-tracker-iu5b
--- ---

37
frontend/src/components/admin/RouteEncounterFormModal.tsx
View File

@@ -1,6 +1,6 @@
import { type FormEvent, useState } from 'react' import { type FormEvent, useState } from 'react'
import { FormModal } from './FormModal' import { FormModal } from './FormModal'
import { usePokemonList } from '../../hooks/useAdmin' import { PokemonSelector } from './PokemonSelector'
import type { RouteEncounterDetail, CreateRouteEncounterInput, UpdateRouteEncounterInput } from '../../types' import type { RouteEncounterDetail, CreateRouteEncounterInput, UpdateRouteEncounterInput } from '../../types'
interface RouteEncounterFormModalProps { interface RouteEncounterFormModalProps {
@@ -20,16 +20,12 @@ export function RouteEncounterFormModal({
onDelete, onDelete,
isDeleting, isDeleting,
}: RouteEncounterFormModalProps) { }: RouteEncounterFormModalProps) {
const [search, setSearch] = useState('')
const [pokemonId, setPokemonId] = useState(encounter?.pokemonId ?? 0) const [pokemonId, setPokemonId] = useState(encounter?.pokemonId ?? 0)
const [encounterMethod, setEncounterMethod] = useState(encounter?.encounterMethod ?? '') const [encounterMethod, setEncounterMethod] = useState(encounter?.encounterMethod ?? '')
const [encounterRate, setEncounterRate] = useState(String(encounter?.encounterRate ?? '')) const [encounterRate, setEncounterRate] = useState(String(encounter?.encounterRate ?? ''))
const [minLevel, setMinLevel] = useState(String(encounter?.minLevel ?? '')) const [minLevel, setMinLevel] = useState(String(encounter?.minLevel ?? ''))
const [maxLevel, setMaxLevel] = useState(String(encounter?.maxLevel ?? '')) const [maxLevel, setMaxLevel] = useState(String(encounter?.maxLevel ?? ''))
const { data } = usePokemonList(search || undefined)
const pokemonOptions = data?.items ?? []
const handleSubmit = (e: FormEvent) => { const handleSubmit = (e: FormEvent) => {
e.preventDefault() e.preventDefault()
if (encounter) { if (encounter) {
@@ -60,32 +56,11 @@ export function RouteEncounterFormModal({
isDeleting={isDeleting} isDeleting={isDeleting}
> >
{!encounter && ( {!encounter && (
<div> <PokemonSelector
<label className="block text-sm font-medium mb-1">Pokemon</label> label="Pokemon"
<input selectedId={pokemonId || null}
type="text" onChange={(id) => setPokemonId(id ?? 0)}
value={search} />
onChange={(e) => setSearch(e.target.value)}
placeholder="Search pokemon..."
className="w-full px-3 py-2 border rounded-md dark:bg-gray-700 dark:border-gray-600 mb-2"
/>
{pokemonOptions.length > 0 && (
<select
required
value={pokemonId || ''}
onChange={(e) => setPokemonId(Number(e.target.value))}
size={Math.min(pokemonOptions.length, 6)}
className="w-full px-3 py-2 border rounded-md dark:bg-gray-700 dark:border-gray-600"
>
{!pokemonId && <option value="">Select a pokemon...</option>}
{pokemonOptions.map((p) => (
<option key={p.id} value={p.id}>
#{p.nationalDex} {p.name} ({p.types.join('/')})
</option>
))}
</select>
)}
</div>
)} )}
<div> <div>
<label className="block text-sm font-medium mb-1">Encounter Method</label> <label className="block text-sm font-medium mb-1">Encounter Method</label>