fix: Make AlbumForm autosave reactive to album prop
Changed autosave from const to reactive $state that initializes when album becomes available. This ensures autosave works even if album is null initially. Changes: - Moved autosave creation into $effect that runs when album is available - Captured album.id in local variable to avoid null reference issues - Moved useFormGuards call into same effect for proper initialization - Fixed cleanup effect to capture autoSave instance in closure - Added proper TypeScript typing for autoSave state
This commit is contained in:
parent
7c08daffe8
commit
2d1d344133
1 changed files with 15 additions and 8 deletions
|
|
@ -104,12 +104,17 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// Autosave store (edit mode only)
|
// Autosave store (edit mode only)
|
||||||
const autoSave = mode === 'edit' && album
|
let autoSave = $state<ReturnType<typeof createAutoSaveStore<ReturnType<typeof buildPayload>, Album>> | null>(null)
|
||||||
? createAutoSaveStore({
|
|
||||||
|
$effect(() => {
|
||||||
|
// Create or update autoSave when album becomes available
|
||||||
|
if (mode === 'edit' && album && !autoSave) {
|
||||||
|
const albumId = album.id // Capture album ID to avoid null reference
|
||||||
|
autoSave = createAutoSaveStore({
|
||||||
debounceMs: 2000,
|
debounceMs: 2000,
|
||||||
getPayload: () => (hasLoaded ? buildPayload() : null),
|
getPayload: () => (hasLoaded ? buildPayload() : null),
|
||||||
save: async (payload, { signal }) => {
|
save: async (payload, { signal }) => {
|
||||||
const response = await fetch(`/api/albums/${album.id}`, {
|
const response = await fetch(`/api/albums/${albumId}`, {
|
||||||
method: 'PUT',
|
method: 'PUT',
|
||||||
headers: { 'Content-Type': 'application/json' },
|
headers: { 'Content-Type': 'application/json' },
|
||||||
body: JSON.stringify(payload),
|
body: JSON.stringify(payload),
|
||||||
|
|
@ -126,7 +131,11 @@
|
||||||
if (draftKey) clearDraft(draftKey)
|
if (draftKey) clearDraft(draftKey)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
: null
|
|
||||||
|
// Form guards (navigation protection, Cmd+S, beforeunload)
|
||||||
|
useFormGuards(autoSave)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
// Draft recovery helper
|
// Draft recovery helper
|
||||||
const draftRecovery = useDraftRecovery<ReturnType<typeof buildPayload>>({
|
const draftRecovery = useDraftRecovery<ReturnType<typeof buildPayload>>({
|
||||||
|
|
@ -142,9 +151,6 @@
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
// Form guards (navigation protection, Cmd+S, beforeunload)
|
|
||||||
useFormGuards(autoSave)
|
|
||||||
|
|
||||||
// Watch for album changes and populate form data
|
// Watch for album changes and populate form data
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
if (album && mode === 'edit') {
|
if (album && mode === 'edit') {
|
||||||
|
|
@ -201,7 +207,8 @@
|
||||||
// Cleanup autosave on unmount
|
// Cleanup autosave on unmount
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
if (autoSave) {
|
if (autoSave) {
|
||||||
return () => autoSave.destroy()
|
const instance = autoSave
|
||||||
|
return () => instance.destroy()
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue