Scrum4Me/stores/user-settings/store.ts
Madhura68 bb6a898233 feat(PBI-76): user-settings zustand store with optimistic flow
Hydrate from prop (SSR-correct), setPref via path with optimistic
update + rollback on server error, applyServerPatch for SSE-driven
cross-tab updates. Demo accounts skip server-write entirely.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-10 11:36:35 +02:00

116 lines
3.2 KiB
TypeScript

import { create } from 'zustand'
import { immer } from 'zustand/middleware/immer'
import {
DEFAULT_USER_SETTINGS,
mergeSettings,
type UserSettings,
} from '@/lib/user-settings'
import { updateUserSettingsAction } from '@/actions/user-settings'
type SettingsPath = readonly (string | number)[]
interface PendingMutation {
id: number
prev: UserSettings
}
interface UserSettingsState {
entities: { settings: UserSettings }
context: {
hydrated: boolean
isDemo: boolean
}
pendingMutations: Record<number, PendingMutation>
}
interface UserSettingsActions {
hydrate: (initial: UserSettings, isDemo: boolean) => void
setPref: (path: SettingsPath, value: unknown) => Promise<void>
applyServerPatch: (patch: Partial<UserSettings>) => void
}
let nextMutationId = 1
function patchFromPath(path: SettingsPath, value: unknown): Partial<UserSettings> {
if (path.length === 0) {
if (value && typeof value === 'object' && !Array.isArray(value)) {
return value as Partial<UserSettings>
}
return {}
}
const out: Record<string, unknown> = {}
let cursor: Record<string, unknown> = out
for (let i = 0; i < path.length - 1; i++) {
const key = String(path[i])
cursor[key] = {}
cursor = cursor[key] as Record<string, unknown>
}
cursor[String(path[path.length - 1])] = value
return out as Partial<UserSettings>
}
export const useUserSettingsStore = create<UserSettingsState & UserSettingsActions>()(
immer((set, get) => ({
entities: { settings: DEFAULT_USER_SETTINGS },
context: { hydrated: false, isDemo: false },
pendingMutations: {},
hydrate: (initial, isDemo) => {
set((draft) => {
draft.entities.settings = initial as UserSettings
draft.context.hydrated = true
draft.context.isDemo = isDemo
})
},
applyServerPatch: (patch) => {
set((draft) => {
draft.entities.settings = mergeSettings(
draft.entities.settings as UserSettings,
patch,
) as UserSettings
})
},
setPref: async (path, value) => {
const patch = patchFromPath(path, value)
// Demo: lokale merge zonder server-call.
if (get().context.isDemo) {
set((draft) => {
draft.entities.settings = mergeSettings(
draft.entities.settings as UserSettings,
patch,
) as UserSettings
})
return
}
const mutationId = nextMutationId++
const prev = get().entities.settings as UserSettings
// Optimistic.
set((draft) => {
draft.entities.settings = mergeSettings(
draft.entities.settings as UserSettings,
patch,
) as UserSettings
draft.pendingMutations[mutationId] = { id: mutationId, prev }
})
const result = await updateUserSettingsAction(patch)
set((draft) => {
delete draft.pendingMutations[mutationId]
if ('error' in result) {
// Rollback alleen als geen latere mutatie de waarde alweer heeft overschreven.
draft.entities.settings = prev as UserSettings
} else {
// Settle: server-merge is autoritatief.
draft.entities.settings = result.settings as UserSettings
}
})
},
})),
)