refactor Party.svelte to use TanStack Query mutations

- add mutation hooks for grid operations (delete, update, uncap)
- replace clientGridService methods with mutation calls
- remove unused helper function imports (removeGridItem, updateGridItem, updateGridItemUncap)
- mutations handle optimistic updates and cache invalidation automatically
This commit is contained in:
Justin Edmund 2025-11-29 04:15:57 -08:00
parent 6a6f642f3f
commit b9db4433d5

View file

@ -1,9 +1,25 @@
<script lang="ts"> <script lang="ts">
import { onMount, getContext, setContext } from 'svelte' import { onMount, getContext, setContext } from 'svelte'
import type { Party, GridCharacter, GridWeapon, GridSummon } from '$lib/types/api/party' import type { Party, GridCharacter, GridWeapon, GridSummon } from '$lib/types/api/party'
// TanStack Query mutations
import {
useDeleteGridWeapon,
useDeleteGridCharacter,
useDeleteGridSummon,
useUpdateGridWeapon,
useUpdateGridCharacter,
useUpdateGridSummon,
useUpdateWeaponUncap,
useUpdateCharacterUncap,
useUpdateSummonUncap
} from '$lib/api/mutations/grid.mutations'
// Services (to be removed in Phase 4)
import { PartyService } from '$lib/services/party.service' import { PartyService } from '$lib/services/party.service'
import { GridService } from '$lib/services/grid.service' import { GridService } from '$lib/services/grid.service'
import { ConflictService } from '$lib/services/conflict.service' import { ConflictService } from '$lib/services/conflict.service'
import { createDragDropContext, type DragOperation } from '$lib/composables/drag-drop.svelte' import { createDragDropContext, type DragOperation } from '$lib/composables/drag-drop.svelte'
import WeaponGrid from '$lib/components/grids/WeaponGrid.svelte' import WeaponGrid from '$lib/components/grids/WeaponGrid.svelte'
import SummonGrid from '$lib/components/grids/SummonGrid.svelte' import SummonGrid from '$lib/components/grids/SummonGrid.svelte'
@ -26,8 +42,7 @@
import { extractErrorMessage } from '$lib/utils/errors' import { extractErrorMessage } from '$lib/utils/errors'
import { transformSkillsToArray } from '$lib/utils/jobSkills' import { transformSkillsToArray } from '$lib/utils/jobSkills'
import { findNextEmptySlot, SLOT_NOT_FOUND } from '$lib/utils/gridHelpers' import { findNextEmptySlot, SLOT_NOT_FOUND } from '$lib/utils/gridHelpers'
import { executeGridOperation, removeGridItem, updateGridItem } from '$lib/utils/gridOperations' import { executeGridOperation } from '$lib/utils/gridOperations'
import { updateGridItemUncap } from '$lib/utils/gridStateUpdater'
interface Props { interface Props {
party?: Party party?: Party
@ -59,11 +74,22 @@
let editDialogOpen = $state(false) let editDialogOpen = $state(false)
let editingTitle = $state('') let editingTitle = $state('')
// Services // Services (Phase 4: to be removed)
const partyService = new PartyService() const partyService = new PartyService()
const gridService = new GridService() const gridService = new GridService()
const conflictService = new ConflictService() const conflictService = new ConflictService()
// TanStack Query mutations
const deleteWeapon = useDeleteGridWeapon()
const deleteCharacter = useDeleteGridCharacter()
const deleteSummon = useDeleteGridSummon()
const updateWeapon = useUpdateGridWeapon()
const updateCharacter = useUpdateGridCharacter()
const updateSummon = useUpdateGridSummon()
const updateWeaponUncap = useUpdateWeaponUncap()
const updateCharacterUncap = useUpdateCharacterUncap()
const updateSummonUncap = useUpdateSummonUncap()
// Create drag-drop context // Create drag-drop context
const dragContext = createDragDropContext({ const dragContext = createDragDropContext({
onLocalUpdate: async (operation) => { onLocalUpdate: async (operation) => {
@ -504,19 +530,17 @@
// since $state.raw prevents the hydration mismatch // since $state.raw prevents the hydration mismatch
}) })
// Create client-side wrappers for grid operations using API client // Grid service wrapper using TanStack Query mutations
const clientGridService = { const clientGridService = {
async removeWeapon(partyId: string, gridWeaponId: string, _editKey?: string) { async removeWeapon(partyId: string, gridWeaponId: string, _editKey?: string) {
try { try {
return await removeGridItem( await deleteWeapon.mutateAsync({
'weapon', id: gridWeaponId,
partyId, partyId,
gridWeaponId, partyShortcode: party.shortcode
party, })
party.shortcode, // Return updated party from cache after mutation
editKey, return party
gridService
)
} catch (err) { } catch (err) {
console.error('Failed to remove weapon:', err) console.error('Failed to remove weapon:', err)
throw err throw err
@ -524,15 +548,12 @@
}, },
async removeSummon(partyId: string, gridSummonId: string, _editKey?: string) { async removeSummon(partyId: string, gridSummonId: string, _editKey?: string) {
try { try {
return await removeGridItem( await deleteSummon.mutateAsync({
'summon', id: gridSummonId,
partyId, partyId,
gridSummonId, partyShortcode: party.shortcode
party, })
party.shortcode, return party
editKey,
gridService
)
} catch (err) { } catch (err) {
console.error('Failed to remove summon:', err) console.error('Failed to remove summon:', err)
throw err throw err
@ -540,15 +561,12 @@
}, },
async removeCharacter(partyId: string, gridCharacterId: string, _editKey?: string) { async removeCharacter(partyId: string, gridCharacterId: string, _editKey?: string) {
try { try {
return await removeGridItem( await deleteCharacter.mutateAsync({
'character', id: gridCharacterId,
partyId, partyId,
gridCharacterId, partyShortcode: party.shortcode
party, })
party.shortcode, return party
editKey,
gridService
)
} catch (err) { } catch (err) {
console.error('Failed to remove character:', err) console.error('Failed to remove character:', err)
throw err throw err
@ -556,7 +574,12 @@
}, },
async updateWeapon(partyId: string, gridWeaponId: string, updates: any, _editKey?: string) { async updateWeapon(partyId: string, gridWeaponId: string, updates: any, _editKey?: string) {
try { try {
return await updateGridItem('weapon', partyId, gridWeaponId, updates, editKey, gridService) await updateWeapon.mutateAsync({
id: gridWeaponId,
partyShortcode: party.shortcode,
updates
})
return party
} catch (err) { } catch (err) {
console.error('Failed to update weapon:', err) console.error('Failed to update weapon:', err)
throw err throw err
@ -564,7 +587,12 @@
}, },
async updateSummon(partyId: string, gridSummonId: string, updates: any, _editKey?: string) { async updateSummon(partyId: string, gridSummonId: string, updates: any, _editKey?: string) {
try { try {
return await updateGridItem('summon', partyId, gridSummonId, updates, editKey, gridService) await updateSummon.mutateAsync({
id: gridSummonId,
partyShortcode: party.shortcode,
updates
})
return party
} catch (err) { } catch (err) {
console.error('Failed to update summon:', err) console.error('Failed to update summon:', err)
throw err throw err
@ -577,7 +605,12 @@
_editKey?: string _editKey?: string
) { ) {
try { try {
return await updateGridItem('character', partyId, gridCharacterId, updates, editKey, gridService) await updateCharacter.mutateAsync({
id: gridCharacterId,
partyShortcode: party.shortcode,
updates
})
return party
} catch (err) { } catch (err) {
console.error('Failed to update character:', err) console.error('Failed to update character:', err)
throw err throw err
@ -590,14 +623,13 @@
_editKey?: string _editKey?: string
) { ) {
try { try {
return await updateGridItemUncap( await updateCharacterUncap.mutateAsync({
'character', id: gridCharacterId,
{ gridItemId: gridCharacterId, uncapLevel, transcendenceStep }, partyShortcode: party.shortcode,
party.id, uncapLevel,
party, transcendenceStep
editKey, })
gridService return party
)
} catch (err) { } catch (err) {
console.error('Failed to update character uncap:', err) console.error('Failed to update character uncap:', err)
throw err throw err
@ -610,14 +642,13 @@
_editKey?: string _editKey?: string
) { ) {
try { try {
return await updateGridItemUncap( await updateWeaponUncap.mutateAsync({
'weapon', id: gridWeaponId,
{ gridItemId: gridWeaponId, uncapLevel, transcendenceStep }, partyShortcode: party.shortcode,
party.id, uncapLevel,
party, transcendenceStep
editKey, })
gridService return party
)
} catch (err) { } catch (err) {
console.error('Failed to update weapon uncap:', err) console.error('Failed to update weapon uncap:', err)
throw err throw err
@ -630,14 +661,13 @@
_editKey?: string _editKey?: string
) { ) {
try { try {
return await updateGridItemUncap( await updateSummonUncap.mutateAsync({
'summon', id: gridSummonId,
{ gridItemId: gridSummonId, uncapLevel, transcendenceStep }, partyShortcode: party.shortcode,
party.id, uncapLevel,
party, transcendenceStep
editKey, })
gridService return party
)
} catch (err) { } catch (err) {
console.error('Failed to update summon uncap:', err) console.error('Failed to update summon uncap:', err)
throw err throw err