perf(bookkeeping): fiscal-year pickers and cash accounts read the session cache (#1934)
First consumer migration onto lib/reference-data. FyPicker and
FiscalYearSelector (14 consumer surfaces, 47 fiscal-period fetch sites
before this series) now read useFiscalPeriods(); with the layout seed the
restore of the persisted scope runs in the first effect tick and onReady
fires on mount instead of after a round trip. Their restore rules are
extracted into a pure resolveInitialFiscalScope() (lib/reference-data/
fiscal-scope.ts) so the two pickers cannot drift apart again, and the
restore runs once per company load, not on every background revalidation.
- /reports: the static catalog renders immediately; only the "no fiscal
year" empty state waits for the picker (previously six skeleton bars
until /api/bookkeeping/fiscal-periods resolved).
- JournalEntryList (/bookkeeping): resolves its initial scope from the
cached list instead of its own fetch; the saved-scope shortcut still
unblocks the entries fetch first when nothing is cached, and resolution
is guarded to once per company so a revalidation can never snap a
deep-link "all years" visit back to the stored year.
- /transactions: the account chooser reads useCashAccounts({ enabledOnly })
(seeded) instead of fetching /api/cash-accounts on every visit; the bank
sync button invalidates that entry after a sync.
- STORAGE_KEY_PREFIX / ALL_YEARS_VALUE move to a dependency-free
fiscal-year-storage.ts (re-exported from FiscalYearSelector) so lib/ code
can import them without a React component.
raw-reference-fetch ratchet: 55 -> 51 files.
Co-authored-by: Jakob Wennberg <311770904+jakobwennberg-oss@users.noreply.github.com>
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Jakob Wennberg
co-authored by
Jakob Wennberg
Claude Fable 5
Jakob Wennberg
Claude Fable 5
parent
b436d47b64
commit
9a56b7aff9
@@ -1,6 +1,6 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useEffect, useMemo, useRef } from 'react'
|
||||
import { useTranslations } from 'next-intl'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
@@ -13,12 +13,15 @@ import {
|
||||
} from '@/components/ui/select'
|
||||
import { Lock } from 'lucide-react'
|
||||
import { useCompany } from '@/contexts/CompanyContext'
|
||||
import { STORAGE_KEY_PREFIX, ALL_YEARS_VALUE } from '@/components/common/fiscal-year-storage'
|
||||
import { useFiscalPeriods } from '@/lib/reference-data/hooks'
|
||||
import { prepareFiscalPeriods, resolveInitialFiscalScope } from '@/lib/reference-data/fiscal-scope'
|
||||
import type { FiscalPeriod } from '@/types'
|
||||
|
||||
// Exported so other surfaces (e.g. JournalEntryList's filter dialog) can read
|
||||
// and write the same persisted selection without duplicating the magic string.
|
||||
export const STORAGE_KEY_PREFIX = 'Accounted:fiscal-year:'
|
||||
export const ALL_YEARS_VALUE = '__all__'
|
||||
// Re-exported so other surfaces (e.g. JournalEntryList's filter dialog) can
|
||||
// read and write the same persisted selection without duplicating the magic
|
||||
// string. The values live in fiscal-year-storage.ts (dependency-free).
|
||||
export { STORAGE_KEY_PREFIX, ALL_YEARS_VALUE }
|
||||
|
||||
interface Props {
|
||||
/**
|
||||
@@ -56,13 +59,6 @@ interface Props {
|
||||
initialCompanyId?: string | null
|
||||
}
|
||||
|
||||
function preparePeriods(periods: FiscalPeriod[], hideFuturePeriods: boolean): FiscalPeriod[] {
|
||||
const today = new Date().toISOString().split('T')[0]
|
||||
return periods
|
||||
.filter((period) => !hideFuturePeriods || period.period_start <= today)
|
||||
.sort((a, b) => b.period_start.localeCompare(a.period_start))
|
||||
}
|
||||
|
||||
/**
|
||||
* Shared fiscal-year (räkenskapsår) selector.
|
||||
*
|
||||
@@ -86,11 +82,16 @@ export function FiscalYearSelector({
|
||||
}: Props) {
|
||||
const { company } = useCompany()
|
||||
const t = useTranslations('fiscal_year')
|
||||
// Session-cached and seeded by the dashboard layout (see FyPicker): the
|
||||
// restore runs in the first effect tick on a normal visit, no round trip.
|
||||
const { periods: cachedPeriods, isLoading } = useFiscalPeriods()
|
||||
const canUseInitialPeriods = initialCompanyId === company?.id && initialPeriods !== undefined
|
||||
const [periods, setPeriods] = useState<FiscalPeriod[]>(() =>
|
||||
canUseInitialPeriods ? preparePeriods(initialPeriods, hideFuturePeriods) : [],
|
||||
const periods = useMemo(
|
||||
() => prepareFiscalPeriods(canUseInitialPeriods ? initialPeriods : cachedPeriods, hideFuturePeriods),
|
||||
[canUseInitialPeriods, initialPeriods, cachedPeriods, hideFuturePeriods],
|
||||
)
|
||||
const [loaded, setLoaded] = useState(canUseInitialPeriods)
|
||||
const loaded = canUseInitialPeriods || !isLoading
|
||||
const restoredForRef = useRef<string | null>(null)
|
||||
const effectiveLabel = label === null ? null : (label ?? t('label'))
|
||||
|
||||
useEffect(() => {
|
||||
@@ -100,52 +101,21 @@ export function FiscalYearSelector({
|
||||
onReady?.()
|
||||
return
|
||||
}
|
||||
let cancelled = false
|
||||
;(async () => {
|
||||
let fetched: FiscalPeriod[]
|
||||
if (initialCompanyId === company.id && initialPeriods !== undefined) {
|
||||
fetched = preparePeriods(initialPeriods, hideFuturePeriods)
|
||||
} else {
|
||||
const res = await fetch('/api/bookkeeping/fiscal-periods')
|
||||
if (!res.ok) {
|
||||
if (!cancelled) {
|
||||
setLoaded(true)
|
||||
onReady?.()
|
||||
}
|
||||
return
|
||||
}
|
||||
const { data } = await res.json()
|
||||
fetched = preparePeriods(data || [], hideFuturePeriods)
|
||||
}
|
||||
if (cancelled) return
|
||||
if (!loaded || restoredForRef.current === company.id) return
|
||||
restoredForRef.current = company.id
|
||||
|
||||
setPeriods(fetched)
|
||||
setLoaded(true)
|
||||
|
||||
// Restore last selection (only if caller hasn't already set a value).
|
||||
// localStorage access is guarded because this is a 'use client' component
|
||||
// but still runs during SSR on first render for some setups.
|
||||
if (value === null && typeof window !== 'undefined') {
|
||||
const stored = window.localStorage.getItem(STORAGE_KEY_PREFIX + company.id)
|
||||
if (stored === ALL_YEARS_VALUE) {
|
||||
if (includeAllOption) onChange(null, null)
|
||||
else if (fetched.length > 0) onChange(fetched[0].id, fetched[0])
|
||||
} else if (stored && fetched.some((p) => p.id === stored)) {
|
||||
onChange(stored, fetched.find((p) => p.id === stored) ?? null)
|
||||
} else if (!includeAllOption && fetched.length > 0) {
|
||||
onChange(fetched[0].id, fetched[0])
|
||||
}
|
||||
}
|
||||
|
||||
onReady?.()
|
||||
})()
|
||||
return () => {
|
||||
cancelled = true
|
||||
// Restore last selection (only if caller hasn't already set a value).
|
||||
if (value === null && typeof window !== 'undefined') {
|
||||
const stored = window.localStorage.getItem(STORAGE_KEY_PREFIX + company.id)
|
||||
const pick = resolveInitialFiscalScope(periods, stored, { includeAllOption })
|
||||
if (pick) onChange(pick.periodId, pick.period)
|
||||
}
|
||||
// onReady is intentionally excluded from deps: it's a lifecycle callback that
|
||||
// should fire once per load, not re-trigger if the parent re-creates it.
|
||||
|
||||
onReady?.()
|
||||
// onReady/onChange are lifecycle callbacks that fire once per load, not
|
||||
// again when the parent re-creates them. `value` is read once at restore.
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [company?.id, hideFuturePeriods, includeAllOption, initialCompanyId, initialPeriods])
|
||||
}, [company?.id, loaded, periods])
|
||||
|
||||
const handleChange = (next: string) => {
|
||||
const nextPeriodId = next === ALL_YEARS_VALUE ? null : next
|
||||
|
||||
@@ -1,13 +1,12 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useEffect, useMemo, useRef } from 'react'
|
||||
import { useTranslations } from 'next-intl'
|
||||
import { useCompany } from '@/contexts/CompanyContext'
|
||||
import { ContextPicker } from '@/components/common/ContextPicker'
|
||||
import {
|
||||
STORAGE_KEY_PREFIX,
|
||||
ALL_YEARS_VALUE,
|
||||
} from '@/components/common/FiscalYearSelector'
|
||||
import { STORAGE_KEY_PREFIX, ALL_YEARS_VALUE } from '@/components/common/fiscal-year-storage'
|
||||
import { useFiscalPeriods } from '@/lib/reference-data/hooks'
|
||||
import { prepareFiscalPeriods, resolveInitialFiscalScope } from '@/lib/reference-data/fiscal-scope'
|
||||
import type { FiscalPeriod } from '@/types'
|
||||
|
||||
interface FyPickerProps {
|
||||
@@ -73,13 +72,6 @@ interface FyPickerProps {
|
||||
className?: string
|
||||
}
|
||||
|
||||
function preparePeriods(periods: FiscalPeriod[], hideFuturePeriods: boolean): FiscalPeriod[] {
|
||||
const today = new Date().toISOString().split('T')[0]
|
||||
return periods
|
||||
.filter((p) => !hideFuturePeriods || p.period_start <= today)
|
||||
.sort((a, b) => b.period_start.localeCompare(a.period_start))
|
||||
}
|
||||
|
||||
/**
|
||||
* Fiscal-year context picker (UI-migration plan PR 3): the chip-dropdown
|
||||
* "Räkenskapsår 2026" with a check on the active choice and closed/locked
|
||||
@@ -103,76 +95,48 @@ export function FyPicker({
|
||||
}: FyPickerProps) {
|
||||
const { company } = useCompany()
|
||||
const t = useTranslations('fiscal_year')
|
||||
// Session-cached and seeded by the dashboard layout, so on a normal visit
|
||||
// the list is already here on the first render: the restore below runs in
|
||||
// the first effect tick and onReady fires without a network round trip.
|
||||
// initialPeriods remains an explicit override for server-rendered pages.
|
||||
const { periods: cachedPeriods, isLoading } = useFiscalPeriods()
|
||||
const canUseInitial = initialCompanyId === company?.id && initialPeriods !== undefined
|
||||
const [periods, setPeriods] = useState<FiscalPeriod[]>(() =>
|
||||
canUseInitial ? preparePeriods(initialPeriods, hideFuturePeriods) : [],
|
||||
const periods = useMemo(
|
||||
() => prepareFiscalPeriods(canUseInitial ? initialPeriods : cachedPeriods, hideFuturePeriods),
|
||||
[canUseInitial, initialPeriods, cachedPeriods, hideFuturePeriods],
|
||||
)
|
||||
const [loaded, setLoaded] = useState(canUseInitial)
|
||||
const loaded = canUseInitial || !isLoading
|
||||
// Restore once per company load, not on every background revalidation of
|
||||
// the cached list (which would re-fire onChange/onReady mid-session).
|
||||
const restoredForRef = useRef<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (!company?.id) {
|
||||
onReady?.()
|
||||
return
|
||||
}
|
||||
let cancelled = false
|
||||
;(async () => {
|
||||
let fetched: FiscalPeriod[]
|
||||
if (initialCompanyId === company.id && initialPeriods !== undefined) {
|
||||
fetched = preparePeriods(initialPeriods, hideFuturePeriods)
|
||||
} else {
|
||||
const res = await fetch('/api/bookkeeping/fiscal-periods')
|
||||
if (!res.ok) {
|
||||
if (!cancelled) {
|
||||
setLoaded(true)
|
||||
onReady?.()
|
||||
}
|
||||
return
|
||||
}
|
||||
const { data } = await res.json()
|
||||
fetched = preparePeriods(data || [], hideFuturePeriods)
|
||||
}
|
||||
if (cancelled) return
|
||||
if (!loaded || restoredForRef.current === company.id) return
|
||||
restoredForRef.current = company.id
|
||||
|
||||
setPeriods(fetched)
|
||||
setLoaded(true)
|
||||
|
||||
// Restore last selection (same key as FiscalYearSelector so pages keep
|
||||
// their scope when the picker swaps in).
|
||||
//
|
||||
// requireExplicitChoice gates this WHOLE block, not individual branches:
|
||||
// every path in here ends in an unprompted onChange (restore, the
|
||||
// ALL_YEARS-stored fallback, newest-period, preferLatestEnded), and a
|
||||
// per-branch gate already missed one of them once. Nothing auto-fires;
|
||||
// the picker stays empty until a human picks.
|
||||
if (value === null && !requireExplicitChoice && !suppressAutoRestore && typeof window !== 'undefined') {
|
||||
if (preferLatestEnded) {
|
||||
// Filing surfaces: ignore the shared scope memory and open on the
|
||||
// most recently ended period (fetched is sorted newest-first).
|
||||
const today = new Date().toISOString().split('T')[0]
|
||||
const pick = fetched.find((p) => p.period_end < today) ?? fetched[0]
|
||||
if (pick) onChange(pick.id, pick)
|
||||
} else {
|
||||
const stored = window.localStorage.getItem(storageKeyPrefix + company.id)
|
||||
if (stored === ALL_YEARS_VALUE) {
|
||||
if (includeAllOption) onChange(null, null)
|
||||
else if (fetched.length > 0) onChange(fetched[0].id, fetched[0])
|
||||
} else if (stored && fetched.some((p) => p.id === stored)) {
|
||||
onChange(stored, fetched.find((p) => p.id === stored) ?? null)
|
||||
} else if (!includeAllOption && fetched.length > 0) {
|
||||
onChange(fetched[0].id, fetched[0])
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onReady?.()
|
||||
})()
|
||||
return () => {
|
||||
cancelled = true
|
||||
// Restore last selection (same key as FiscalYearSelector so pages keep
|
||||
// their scope when the picker swaps in).
|
||||
//
|
||||
// requireExplicitChoice gates this WHOLE block, not individual branches:
|
||||
// every path in here ends in an unprompted onChange (restore, the
|
||||
// ALL_YEARS-stored fallback, newest-period, preferLatestEnded), and a
|
||||
// per-branch gate already missed one of them once. Nothing auto-fires;
|
||||
// the picker stays empty until a human picks.
|
||||
if (value === null && !requireExplicitChoice && !suppressAutoRestore && typeof window !== 'undefined') {
|
||||
const stored = window.localStorage.getItem(storageKeyPrefix + company.id)
|
||||
const pick = resolveInitialFiscalScope(periods, stored, { includeAllOption, preferLatestEnded })
|
||||
if (pick) onChange(pick.periodId, pick.period)
|
||||
}
|
||||
// onReady is a lifecycle callback: fire once per load, not on parent
|
||||
// re-renders that re-create it.
|
||||
|
||||
onReady?.()
|
||||
// onReady/onChange are lifecycle callbacks: fire once per load, not on
|
||||
// parent re-renders that re-create them. `value` is read once at restore.
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [company?.id, hideFuturePeriods, includeAllOption, preferLatestEnded, requireExplicitChoice, suppressAutoRestore, initialCompanyId, initialPeriods, storageKeyPrefix])
|
||||
}, [company?.id, loaded, periods])
|
||||
|
||||
const handleChange = (id: string) => {
|
||||
const nextId = id === ALL_YEARS_VALUE ? null : id
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
/**
|
||||
* Persisted fiscal-year scope: the localStorage key prefix (companyId is
|
||||
* appended) and the sentinel for an explicit "all years" choice. Lives in
|
||||
* its own dependency-free module so lib/ code (the reference-data scope
|
||||
* resolver) can import it without pulling a React component along.
|
||||
* FiscalYearSelector re-exports both for existing importers.
|
||||
*/
|
||||
export const STORAGE_KEY_PREFIX = 'Accounted:fiscal-year:'
|
||||
export const ALL_YEARS_VALUE = '__all__'
|
||||
Reference in New Issue
Block a user