Fix for race condition

This commit is contained in:
Philip Peterson 2026-06-03 22:21:43 -07:00
parent 8962fc5f0e
commit f882149a37

View file

@ -120,6 +120,7 @@ function Booking({ settings }) {
const initializedRef = useRef(false); const initializedRef = useRef(false);
const autoAdvanceRef = useRef(0); const autoAdvanceRef = useRef(0);
const isFirstServiceRender = useRef(true); const isFirstServiceRender = useRef(true);
const fetchAbortRef = useRef(null);
const initDate = useMemo(nextBusinessDay, []); const initDate = useMemo(nextBusinessDay, []);
function buildEventsUrl(svc) { function buildEventsUrl(svc) {
@ -213,18 +214,22 @@ function Booking({ settings }) {
// ── Fetch events when service or visible range changes ───────────────── // ── Fetch events when service or visible range changes ─────────────────
useEffect(function () { useEffect(function () {
if (!dateRange) return; if (!dateRange) return;
if (fetchAbortRef.current) fetchAbortRef.current.abort();
var controller = new AbortController();
fetchAbortRef.current = controller;
var parts = dateRange.split("/"); var parts = dateRange.split("/");
var url = buildEventsUrl(service) + "&start=" + parts[0] + "&end=" + parts[1]; var url = buildEventsUrl(service) + "&start=" + parts[0] + "&end=" + parts[1];
setFetchLoading(true); setFetchLoading(true);
setFetchedEvents(null); setFetchedEvents(null);
fetch(url) fetch(url, { signal: controller.signal })
.then(function (r) { return r.json(); }) .then(function (r) { return r.json(); })
.then(function (data) { .then(function (data) {
currentEvents = data; currentEvents = data;
setFetchedEvents(data); setFetchedEvents(data);
setFetchLoading(false); setFetchLoading(false);
}) })
.catch(function () { .catch(function (err) {
if (err.name === 'AbortError') return;
currentEvents = []; currentEvents = [];
setFetchedEvents([]); setFetchedEvents([]);
setFetchLoading(false); setFetchLoading(false);
@ -246,8 +251,6 @@ function Booking({ settings }) {
var dates = [...new Set(fetchedEvents.map(function (e) { return e.start.substring(0, 10); }))].sort(); var dates = [...new Set(fetchedEvents.map(function (e) { return e.start.substring(0, 10); }))].sort();
var firstDate = dates[0]; var firstDate = dates[0];
if (firstDate) { if (firstDate) {
initializedRef.current = true;
autoAdvanceRef.current = 0;
var firstSlots = fetchedEvents var firstSlots = fetchedEvents
.filter(function (e) { return e.start.startsWith(firstDate); }) .filter(function (e) { return e.start.startsWith(firstDate); })
.sort(function (a, b) { return a.start < b.start ? -1 : 1; }); .sort(function (a, b) { return a.start < b.start ? -1 : 1; });
@ -255,6 +258,8 @@ function Booking({ settings }) {
selectedDateSlots = firstSlots; selectedDateSlots = firstSlots;
var targetEl = calEl.current.querySelector(".fc-daygrid-day[data-date=\"" + firstDate + "\"]"); var targetEl = calEl.current.querySelector(".fc-daygrid-day[data-date=\"" + firstDate + "\"]");
if (targetEl) { if (targetEl) {
initializedRef.current = true;
autoAdvanceRef.current = 0;
targetEl.classList.add("is-selected"); targetEl.classList.add("is-selected");
setSlots(firstSlots); setSlots(firstSlots);
} }