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:
parent
6a6f642f3f
commit
b9db4433d5
1 changed files with 85 additions and 55 deletions
|
|
@ -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
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue