Arnike/duty-teller
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 14 Wiki Activity

feat: implement pending month handling in calendar components

Browse Source 
- Introduced a new `pendingMonth` state in the app store to manage month transitions without clearing current data, enhancing user experience during month navigation.
- Updated `useMonthData` hook to load data for the `pendingMonth` when set, preventing empty-frame flicker and ensuring smooth month switching.
- Modified `CalendarPage` and `CalendarGrid` components to utilize the new `pendingMonth` state, improving the rendering logic during month changes.
- Enhanced `DutyList` to display a loading skeleton while data is being fetched, providing better feedback to users.
- Updated relevant tests to cover the new loading behavior and state management for month transitions.
This commit is contained in:
Nikolay Tatarinov
2026-03-03 17:20:23 +03:00
parent fd527917e0
commit 6e2188787e
5 changed files with 53 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
webapp-next/src/hooks/use-month-data.ts
View File

@@ -27,20 +27,18 @@ export interface UseMonthDataOptions {
}
/**
* Fetches duties and calendar events for store.currentMonth when enabled.
* Fetches duties and calendar events for the displayed month when enabled.
* When pendingMonth is set (user clicked next/prev), loads that month without clearing
* current data; on success updates currentMonth and data in one batch (no empty-frame flicker).
* Cancels in-flight request when month changes or component unmounts.
* On ACCESS_DENIED, shows access denied and retries once after RETRY_AFTER_ACCESS_DENIED_MS.
* Returns retry() to manually trigger a reload.
*
* The load callback is stabilized (empty dependency array) and reads latest
* options from a ref and currentMonth/lang from Zustand getState(), so the
* effect that calls load only re-runs when enabled, currentMonth, lang, or
* initDataRaw actually change.
*/
export function useMonthData(options: UseMonthDataOptions): { retry: () => void } {
const { initDataRaw, enabled } = options;
const currentMonth = useAppStore((s) => s.currentMonth);
const pendingMonth = useAppStore((s) => s.pendingMonth);
const lang = useAppStore((s) => s.lang);
const abortRef = useRef<AbortController | null>(null);
@@ -61,18 +59,26 @@ export function useMonthData(options: UseMonthDataOptions): { retry: () => void
const load = useCallback(() => {
const { initDataRaw: initDataRawOpt, enabled: enabledOpt, lang: langOpt } = optionsRef.current;
if (!enabledOpt) return;
if (!enabledOpt) {
useAppStore.getState().batchUpdate({ pendingMonth: null });
return;
}
const initData = initDataRawOpt ?? "";
if (!initData && typeof window !== "undefined") {
const h = window.location.hostname;
if (h !== "localhost" && h !== "127.0.0.1" && h !== "") return;
if (h !== "localhost" && h !== "127.0.0.1" && h !== "") {
useAppStore.getState().batchUpdate({ pendingMonth: null });
return;
}
}
const store = useAppStore.getState();
const currentMonthNow = store.currentMonth;
const monthKey = `${currentMonthNow.getFullYear()}-${String(currentMonthNow.getMonth() + 1).padStart(2, "0")}`;
const pending = store.pendingMonth;
const monthToLoad = pending ?? store.currentMonth;
const monthKey = `${monthToLoad.getFullYear()}-${String(monthToLoad.getMonth() + 1).padStart(2, "0")}`;
const dataForMonthKey = store.dataForMonthKey;
const isNewMonth = dataForMonthKey !== monthKey;
const isDeferredSwitch = pending !== null;
const isNewMonth = !isDeferredSwitch && dataForMonthKey !== monthKey;
if (abortRef.current) abortRef.current.abort();
abortRef.current = new AbortController();
@@ -88,7 +94,7 @@ export function useMonthData(options: UseMonthDataOptions): { retry: () => void
: {}),
});
const first = firstDayOfMonth(currentMonthNow);
const first = firstDayOfMonth(monthToLoad);
const start = getMonday(first);
const gridEnd = new Date(start);
gridEnd.setDate(gridEnd.getDate() + 41);
@@ -103,14 +109,23 @@ export function useMonthData(options: UseMonthDataOptions): { retry: () => void
fetchCalendarEvents(from, to, initData, langOpt, signal),
]);
const last = lastDayOfMonth(currentMonthNow);
const last = lastDayOfMonth(monthToLoad);
const firstKey = localDateString(first);
const lastKey = localDateString(last);
const dutiesInMonth = duties.filter((d) =>
dutyOverlapsLocalRange(d, firstKey, lastKey)
);
const storeAfter = useAppStore.getState();
const switchedMonth =
storeAfter.currentMonth.getFullYear() !== monthToLoad.getFullYear() ||
storeAfter.currentMonth.getMonth() !== monthToLoad.getMonth();
useAppStore.getState().batchUpdate({
...(switchedMonth
? { currentMonth: new Date(monthToLoad.getFullYear(), monthToLoad.getMonth(), 1) }
: {}),
pendingMonth: null,
duties: dutiesInMonth,
calendarEvents: events,
dataForMonthKey: monthKey,
@@ -118,13 +133,20 @@ export function useMonthData(options: UseMonthDataOptions): { retry: () => void
error: null,
});
} catch (e) {
if ((e as Error).name === "AbortError") return;
if ((e as Error).name === "AbortError") {
useAppStore.getState().batchUpdate({
loading: false,
pendingMonth: null,
});
return;
}
if (e instanceof AccessDeniedError) {
logger.warn("Access denied in loadMonth", e.serverDetail);
useAppStore.getState().batchUpdate({
accessDenied: true,
accessDeniedDetail: e.serverDetail ?? null,
loading: false,
pendingMonth: null,
});
if (!initDataRetriedRef.current) {
initDataRetriedRef.current = true;
@@ -147,6 +169,7 @@ export function useMonthData(options: UseMonthDataOptions): { retry: () => void
useAppStore.getState().batchUpdate({
error: translate(langOpt, "error_generic"),
loading: false,
pendingMonth: null,
});
}
};
@@ -169,7 +192,7 @@ export function useMonthData(options: UseMonthDataOptions): { retry: () => void
if (abortRef.current) abortRef.current.abort();
abortRef.current = null;
};
}, [enabled, load, currentMonth, lang, initDataRaw]);
}, [enabled, load, currentMonth, pendingMonth, lang, initDataRaw]);
useEffect(() => {
if (!enabled) return;