characters: connect edit page to real API
Replace simulated save with actual API call to updateCharacter(). Invalidates TanStack Query cache on successful update. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
179cc13725
commit
3e23585ee7
1 changed files with 23 additions and 29 deletions
|
|
@ -5,7 +5,7 @@
|
|||
import { goto } from '$app/navigation'
|
||||
|
||||
// TanStack Query
|
||||
import { createQuery } from '@tanstack/svelte-query'
|
||||
import { createQuery, useQueryClient } from '@tanstack/svelte-query'
|
||||
import { entityQueries } from '$lib/api/queries/entity.queries'
|
||||
import { entityAdapter } from '$lib/api/adapters/entity.adapter'
|
||||
import { withInitialData } from '$lib/query/ssr'
|
||||
|
|
@ -25,6 +25,8 @@
|
|||
|
||||
let { data }: { data: PageData } = $props()
|
||||
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
// Use TanStack Query with SSR initial data
|
||||
const characterQuery = createQuery(() => ({
|
||||
...entityQueries.character(data.character?.id ?? ''),
|
||||
|
|
@ -138,48 +140,40 @@
|
|||
}
|
||||
|
||||
async function saveChanges() {
|
||||
if (!character?.id) return
|
||||
|
||||
isSaving = true
|
||||
saveError = null
|
||||
saveSuccess = false
|
||||
|
||||
try {
|
||||
// Prepare the data for API (convert to snake_case)
|
||||
// Prepare the data for API (flat snake_case format)
|
||||
const payload = {
|
||||
name: editData.name,
|
||||
name_en: editData.name,
|
||||
granblue_id: editData.granblueId,
|
||||
character_id: editData.characterId,
|
||||
character_id: editData.characterId ? [editData.characterId] : [],
|
||||
rarity: editData.rarity,
|
||||
element: editData.element,
|
||||
race: [editData.race1, editData.race2].filter((r) => r !== null && r !== undefined),
|
||||
race1: editData.race1,
|
||||
race2: editData.race2,
|
||||
gender: editData.gender,
|
||||
proficiency: [editData.proficiency1, editData.proficiency2],
|
||||
hp: {
|
||||
min_hp: editData.minHp,
|
||||
max_hp: editData.maxHp,
|
||||
max_hp_flb: editData.maxHpFlb
|
||||
},
|
||||
atk: {
|
||||
min_atk: editData.minAtk,
|
||||
max_atk: editData.maxAtk,
|
||||
max_atk_flb: editData.maxAtkFlb
|
||||
},
|
||||
uncap: {
|
||||
flb: editData.flb,
|
||||
ulb: editData.ulb,
|
||||
transcendence: editData.transcendence
|
||||
},
|
||||
proficiency1: editData.proficiency1,
|
||||
proficiency2: editData.proficiency2,
|
||||
min_hp: editData.minHp,
|
||||
max_hp: editData.maxHp,
|
||||
max_hp_flb: editData.maxHpFlb,
|
||||
min_atk: editData.minAtk,
|
||||
max_atk: editData.maxAtk,
|
||||
max_atk_flb: editData.maxAtkFlb,
|
||||
flb: editData.flb,
|
||||
ulb: editData.ulb,
|
||||
special: editData.special
|
||||
}
|
||||
|
||||
// TODO: When backend endpoint is ready, make the API call here
|
||||
// const response = await fetch(`/api/v1/characters/${character.id}`, {
|
||||
// method: 'PUT',
|
||||
// headers: { 'Content-Type': 'application/json' },
|
||||
// body: JSON.stringify(payload)
|
||||
// })
|
||||
await entityAdapter.updateCharacter(character.id, payload)
|
||||
|
||||
// For now, just simulate success
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000))
|
||||
// Invalidate TanStack Query cache to refetch fresh data
|
||||
await queryClient.invalidateQueries({ queryKey: ['character', character.id] })
|
||||
|
||||
saveSuccess = true
|
||||
editMode = false
|
||||
|
|
|
|||
Loading…
Reference in a new issue