1.7.1
Split code into smaller sections and fix things that broke along the way
This commit is contained in:
fraxle
@@ -0,0 +1,442 @@
|
||||
// ------------------------------------------------------------------------
|
||||
// hooks/useAppState.js - All state and side-effect logic for UTCIForecast.
|
||||
//
|
||||
// Extracted from app.js to keep the main component under the AI edit
|
||||
// safe-zone. This hook owns every useState, useEffect, useCallback and
|
||||
// useRef that app.js needs, returning them as a single flat object.
|
||||
//
|
||||
// Usage in app.js:
|
||||
// const state = useAppState();
|
||||
// const { forecast, isPro, visibleCols, ... } = state;
|
||||
//
|
||||
// Reading order:
|
||||
// 1. Location + search
|
||||
// 2. Day-tab scroll refs
|
||||
// 3. Pro tier
|
||||
// 4. Profile + column visibility
|
||||
// 5. Skin, vehicle, indoor, pollen
|
||||
// 6. Table refs
|
||||
// 7. Column popup + table scroll hooks
|
||||
// 8. Geocoding search effect
|
||||
// 9. Computation - rows, days, current row
|
||||
// 10. Banner - events, snooze, slideshow
|
||||
// ------------------------------------------------------------------------
|
||||
|
||||
import { useState, useEffect, useRef, useCallback } from '../../vendor/preact-hooks.js';
|
||||
import {
|
||||
FREE_DAYS, FILTER_PROFILES, OUTDOORS_VARIANTS,
|
||||
profileButtonOrder, variantIcons,
|
||||
activityVariantKeys, placeVariantKeys,
|
||||
} from '../config.js';
|
||||
import { utciCategory } from '../utils.js';
|
||||
import { buildHourlyRows } from '../compute.js';
|
||||
import { useForecast } from './useForecast.js';
|
||||
import { useColumnPopup } from './useColumnPopup.js';
|
||||
import { useTableScroll } from './useTableScroll.js';
|
||||
import { getActiveEvents, getLensEvent } from '../events.js';
|
||||
|
||||
export function useAppState() {
|
||||
|
||||
// ── 1. LOCATION ──────────────────────────────────────────────────────
|
||||
const [location, setLocation] = useState(() => {
|
||||
try {
|
||||
const saved = localStorage.getItem('sunscope_last_location');
|
||||
if (saved) return JSON.parse(saved);
|
||||
} catch (e) { /* ignore */ }
|
||||
return { name: 'Pangbourne, Berkshire', lat: 51.4839, lon: -1.0725, country: 'GB' };
|
||||
});
|
||||
|
||||
const setLocationAndSave = (loc) => {
|
||||
try { localStorage.setItem('sunscope_last_location', JSON.stringify(loc)); } catch (e) { /* ignore */ }
|
||||
setLocation(loc);
|
||||
};
|
||||
|
||||
const { forecast, airQuality, loading, error, now } = useForecast(location);
|
||||
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [searchResults, setSearchResults] = useState([]);
|
||||
const [searching, setSearching] = useState(false);
|
||||
const [selectedDay, setSelectedDay] = useState(0);
|
||||
const [proPromptDay, setProPromptDay] = useState(null);
|
||||
const [proPromptSource, setProPromptSource] = useState('day');
|
||||
|
||||
// ── 2. DAY-TAB SCROLL ────────────────────────────────────────────────
|
||||
const dayTabsRef = useRef(null);
|
||||
const [canScrollLeft, setCanScrollLeft] = useState(false);
|
||||
const [canScrollRight, setCanScrollRight] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const el = dayTabsRef.current;
|
||||
if (!el) return;
|
||||
const update = () => {
|
||||
setCanScrollLeft(el.scrollLeft > 1);
|
||||
setCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
|
||||
};
|
||||
update();
|
||||
el.addEventListener('scroll', update, { passive: true });
|
||||
window.addEventListener('resize', update);
|
||||
let ro = null;
|
||||
if (typeof ResizeObserver !== 'undefined') {
|
||||
ro = new ResizeObserver(update);
|
||||
ro.observe(el);
|
||||
}
|
||||
return () => {
|
||||
el.removeEventListener('scroll', update);
|
||||
window.removeEventListener('resize', update);
|
||||
if (ro) ro.disconnect();
|
||||
};
|
||||
}, [forecast]);
|
||||
|
||||
useEffect(() => {
|
||||
const el = dayTabsRef.current;
|
||||
if (!el) return;
|
||||
const activeTab = el.querySelector('.utci-day-tab.active');
|
||||
if (!activeTab) return;
|
||||
const elRect = el.getBoundingClientRect();
|
||||
const tabRect = activeTab.getBoundingClientRect();
|
||||
if (tabRect.left < elRect.left + 8) {
|
||||
el.scrollBy({ left: tabRect.left - elRect.left - 24, behavior: 'smooth' });
|
||||
} else if (tabRect.right > elRect.right - 8) {
|
||||
el.scrollBy({ left: tabRect.right - elRect.right + 24, behavior: 'smooth' });
|
||||
}
|
||||
}, [selectedDay]);
|
||||
|
||||
const scrollDayTabs = (dir) => {
|
||||
const el = dayTabsRef.current;
|
||||
if (!el) return;
|
||||
el.scrollBy({ left: dir * 200, behavior: 'smooth' });
|
||||
};
|
||||
|
||||
// ── 3. PRO TIER ──────────────────────────────────────────────────────
|
||||
const [isPro, setIsPro] = useState(() => {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
if (params.get('pro') === '1') {
|
||||
localStorage.setItem('sunscope_pro', '1');
|
||||
window.history.replaceState({}, '', window.location.pathname);
|
||||
return true;
|
||||
}
|
||||
return localStorage.getItem('sunscope_pro') === '1';
|
||||
});
|
||||
|
||||
// ── 4. PROFILE + COLUMN VISIBILITY ───────────────────────────────────
|
||||
const [activeProfile, setActiveProfile] = useState(() => {
|
||||
try { return localStorage.getItem('sunscope_profile') || 'basic'; } catch (e) { return 'basic'; }
|
||||
});
|
||||
|
||||
const [visibleCols, setVisibleCols] = useState(() => {
|
||||
try {
|
||||
const saved = localStorage.getItem('sunscope_profile') || 'basic';
|
||||
// If saved profile is outdoors. read columns from the saved variant - Beach. Running. etc.
|
||||
// so the column buttons match the autoloaded variant on startup.
|
||||
if (saved === 'outdoors') {
|
||||
const savedVariant = localStorage.getItem('sunscope_outdoors_variant') || 'urban';
|
||||
const variantCols = OUTDOORS_VARIANTS[savedVariant]?.cols
|
||||
?? FILTER_PROFILES.outdoors.cols;
|
||||
return { ...variantCols };
|
||||
}
|
||||
return { ...(FILTER_PROFILES[saved]?.cols ?? FILTER_PROFILES.basic.cols) };
|
||||
} catch (e) { return { ...FILTER_PROFILES.basic.cols }; }
|
||||
});
|
||||
|
||||
const toggleCol = (col) => setVisibleCols(prev => ({ ...prev, [col]: !prev[col] }));
|
||||
|
||||
const activateProfile = (key) => {
|
||||
const profile = FILTER_PROFILES[key];
|
||||
try { localStorage.setItem('sunscope_profile', key); } catch (e) { /* ignore */ }
|
||||
setActiveProfile(key);
|
||||
if (key !== 'custom') {
|
||||
setVisibleCols({ ...profile.cols });
|
||||
const hasIndoor = profile.cols['indoorT'] || profile.cols['managedT'];
|
||||
setIndoorMode(hasIndoor ? 'on' : 'off');
|
||||
setIndoorManaged(false);
|
||||
}
|
||||
};
|
||||
|
||||
// ── 5. SKIN, VEHICLE, INDOOR, POLLEN ─────────────────────────────────
|
||||
const [skinType, setSkinType] = useState('II');
|
||||
const [vehicleType, setVehicleType] = useState('car');
|
||||
const [vehicleVent, setVehicleVent] = useState(false);
|
||||
|
||||
const [outdoorsVariant, setOutdoorsVariant] = useState(() => {
|
||||
try { return localStorage.getItem('sunscope_outdoors_variant') || 'urban'; } catch (e) { return 'urban'; }
|
||||
});
|
||||
const setOutdoorsVariantAndSave = (v) => {
|
||||
try { localStorage.setItem('sunscope_outdoors_variant', v); } catch (e) { /* ignore */ }
|
||||
setOutdoorsVariant(v);
|
||||
// Sync the column toggle buttons to the variants own cols so the UI matches
|
||||
// the autoloaded selection - eg Beach selects Dew. Sun. UV-B and Running selects RH. Pollen. UTCI.
|
||||
const variantCols = OUTDOORS_VARIANTS[v]?.cols;
|
||||
if (variantCols) {
|
||||
setVisibleCols({ ...variantCols });
|
||||
const hasIndoor = variantCols['indoorT'] || variantCols['managedT'];
|
||||
setIndoorMode(hasIndoor ? 'on' : 'off');
|
||||
}
|
||||
};
|
||||
|
||||
const activeCols = activeProfile === 'outdoors'
|
||||
? (OUTDOORS_VARIANTS[outdoorsVariant]?.cols ?? FILTER_PROFILES.outdoors.cols)
|
||||
: (FILTER_PROFILES[activeProfile]?.cols ?? FILTER_PROFILES.basic.cols);
|
||||
|
||||
const [buildingType, setBuildingType] = useState('brick');
|
||||
const [indoorManaged, setIndoorManaged] = useState(false);
|
||||
const [indoorMode, setIndoorMode] = useState(() => {
|
||||
try {
|
||||
const saved = localStorage.getItem('sunscope_profile') || 'basic';
|
||||
const cols = FILTER_PROFILES[saved]?.cols ?? FILTER_PROFILES.basic.cols;
|
||||
return (cols['indoorT'] || cols['managedT']) ? 'on' : 'off';
|
||||
} catch (e) { return 'off'; }
|
||||
});
|
||||
|
||||
const [pollenType, setPollenType] = useState(() => {
|
||||
try { return localStorage.getItem('sunscope_pollen_type') || 'all_pollen'; } catch (e) { return 'all_pollen'; }
|
||||
});
|
||||
const setPollenTypeAndSave = (v) => {
|
||||
try { localStorage.setItem('sunscope_pollen_type', v); } catch (e) { /* ignore */ }
|
||||
setPollenType(v);
|
||||
};
|
||||
|
||||
const searchTimeout = useRef(null);
|
||||
|
||||
// Derived selectors used by profile controls
|
||||
const activityOptions = [
|
||||
{
|
||||
value: 'farming',
|
||||
label: `${FILTER_PROFILES.farming.icon} ${FILTER_PROFILES.farming.label}`,
|
||||
},
|
||||
...activityVariantKeys.map((k) => {
|
||||
const v = OUTDOORS_VARIANTS[k];
|
||||
return {
|
||||
value: k,
|
||||
label: `${variantIcons[k]} ${v.name}${v.proOnly && !isPro ? ' 🔒' : ''}`,
|
||||
};
|
||||
}),
|
||||
];
|
||||
const placeOptions = placeVariantKeys.map((k) => {
|
||||
const v = OUTDOORS_VARIANTS[k];
|
||||
return {
|
||||
value: k,
|
||||
label: `${variantIcons[k]} ${v.name}${v.proOnly && !isPro ? ' 🔒' : ''}`,
|
||||
};
|
||||
});
|
||||
|
||||
const activityValue = activeProfile === 'farming'
|
||||
? 'farming'
|
||||
: activeProfile === 'outdoors' && activityVariantKeys.includes(outdoorsVariant)
|
||||
? outdoorsVariant
|
||||
: 'off';
|
||||
const activityLabel = activityOptions.find((o) => o.value === activityValue)?.label;
|
||||
const placeValue = activeProfile === 'outdoors' && placeVariantKeys.includes(outdoorsVariant)
|
||||
? outdoorsVariant
|
||||
: 'off';
|
||||
const placeLabel = placeOptions.find((o) => o.value === placeValue)?.label;
|
||||
|
||||
// ── 6. TABLE REFS ────────────────────────────────────────────────────
|
||||
const headStickyRef = useRef(null);
|
||||
const headTrackRef = useRef(null);
|
||||
const headTableRef = useRef(null);
|
||||
const bodyScrollRef = useRef(null);
|
||||
const bodyTableRef = useRef(null);
|
||||
const tableWrapRef = useRef(null);
|
||||
|
||||
// ── 7. COLUMN POPUP + TABLE SCROLL ───────────────────────────────────
|
||||
const {
|
||||
colPopup, colPopupRef,
|
||||
handleThClick, handleThEnter, handleThLeave,
|
||||
handlePopupEnter, handlePopupLeave,
|
||||
eventTagPopup, eventTagPopupRef,
|
||||
evSlideIndex, evTransition, evSlideTo,
|
||||
handleEventTagClick, handleEventTagEnter, handleEventTagLeave,
|
||||
handleEventTagPopupEnter, handleEventTagPopupLeave,
|
||||
closePopup, closeEventTagPopup,
|
||||
} = useColumnPopup();
|
||||
|
||||
const {
|
||||
tableCanScrollLeft,
|
||||
tableCanScrollRight,
|
||||
handleBodyScroll,
|
||||
} = useTableScroll({
|
||||
headTableRef, bodyTableRef, bodyScrollRef, headTrackRef,
|
||||
forecast, visibleCols, selectedDay, skinType, vehicleType,
|
||||
indoorMode, indoorManaged,
|
||||
});
|
||||
|
||||
// ── 8. GEOCODING SEARCH ───────────────────────────────────────────────
|
||||
useEffect(() => {
|
||||
if (searchQuery.length < 2) { setSearchResults([]); return; }
|
||||
if (searchTimeout.current) clearTimeout(searchTimeout.current);
|
||||
searchTimeout.current = setTimeout(async () => {
|
||||
setSearching(true);
|
||||
try {
|
||||
const r = await fetch(
|
||||
`https://geocoding-api.open-meteo.com/v1/search?name=${encodeURIComponent(searchQuery)}&count=6&language=en&format=json`
|
||||
);
|
||||
const j = await r.json();
|
||||
setSearchResults(j.results || []);
|
||||
} catch { setSearchResults([]); }
|
||||
finally { setSearching(false); }
|
||||
}, 300);
|
||||
}, [searchQuery]);
|
||||
|
||||
// ── 9. COMPUTATION ───────────────────────────────────────────────────
|
||||
const { hourlyRows, days, utcOffsetMs } = buildHourlyRows({
|
||||
forecast, airQuality, location, vehicleType, vehicleVent, buildingType,
|
||||
});
|
||||
|
||||
const visible = days[selectedDay]?.rows || [];
|
||||
|
||||
const nowLocalISO = new Date(now.getTime() + utcOffsetMs).toISOString().slice(0, 13);
|
||||
const currentRow = hourlyRows.length > 0
|
||||
? (hourlyRows.find(row => row.iso.slice(0, 13) === nowLocalISO)
|
||||
?? hourlyRows.reduce((best, row) =>
|
||||
Math.abs(row.dt - now) < Math.abs(best.dt - now) ? row : best))
|
||||
: null;
|
||||
const currentCat = currentRow
|
||||
? utciCategory(currentRow.utciAdj)
|
||||
: { bg: '#4a4228', fg: '#ede4cc', label: 'No data' };
|
||||
|
||||
// ── 10. BANNER + EVENTS ───────────────────────────────────────────────
|
||||
const [dismissedEventIds, setDismissedEventIds] = useState([]);
|
||||
|
||||
const BANNER_SNOOZE_HOURS = 6;
|
||||
const BANNER_SNOOZE_MS = BANNER_SNOOZE_HOURS * 60 * 60 * 1000;
|
||||
const BANNER_SNOOZE_KEY = id => `sunscope.banner.snoozed.${id}`;
|
||||
|
||||
const [bannerIndex, setBannerIndex] = useState(0);
|
||||
const [bannerTransition, setBannerTransition] = useState(null);
|
||||
const [bannerPrevIndex, setBannerPrevIndex] = useState(null);
|
||||
const [bannerVisible, setBannerVisible] = useState(false);
|
||||
const bannerIndexRef = useRef(0);
|
||||
const bannerStageRef = useRef(null);
|
||||
|
||||
useEffect(() => { bannerIndexRef.current = bannerIndex; }, [bannerIndex]);
|
||||
|
||||
const isSnoozed = id => {
|
||||
try {
|
||||
const ts = localStorage.getItem(BANNER_SNOOZE_KEY(id));
|
||||
return ts && (Date.now() - Number(ts)) < BANNER_SNOOZE_MS;
|
||||
} catch (e) { return false; }
|
||||
};
|
||||
|
||||
const todayRows = days[0]?.rows || [];
|
||||
const activeEvents = getActiveEvents(todayRows, location)
|
||||
.filter(ev => !dismissedEventIds.includes(ev.id) && !isSnoozed(ev.id));
|
||||
const lensEvent = getLensEvent(activeEvents);
|
||||
const selectedDayEvents = getActiveEvents(visible, location);
|
||||
|
||||
// Only show banner when events first appear - not on every re-render
|
||||
// Using a ref to track previous length avoids re-showing during dismiss animation
|
||||
const prevActiveEventsLenRef = useRef(0);
|
||||
useEffect(() => {
|
||||
const prev = prevActiveEventsLenRef.current;
|
||||
prevActiveEventsLenRef.current = activeEvents.length;
|
||||
if (activeEvents.length > 0 && prev === 0) setBannerVisible(true);
|
||||
}, [activeEvents.length]);
|
||||
|
||||
const bannerSlideTo = useCallback((next) => {
|
||||
const stage = bannerStageRef.current;
|
||||
if (stage) {
|
||||
stage.style.height = stage.offsetHeight + 'px';
|
||||
stage.style.transition = 'height 0.45s cubic-bezier(0.4,0,0.2,1)';
|
||||
}
|
||||
setBannerPrevIndex(bannerIndexRef.current);
|
||||
setBannerIndex(next);
|
||||
setBannerTransition('crossfading');
|
||||
setTimeout(() => {
|
||||
if (stage) {
|
||||
const incoming = stage.querySelector('.event-banner:not(.event-banner--outgoing)');
|
||||
if (incoming) stage.style.height = incoming.offsetHeight + 'px';
|
||||
}
|
||||
}, 16);
|
||||
setTimeout(() => {
|
||||
setBannerTransition(null);
|
||||
setBannerPrevIndex(null);
|
||||
if (stage) { stage.style.height = ''; stage.style.transition = ''; }
|
||||
}, 460);
|
||||
}, []);
|
||||
|
||||
const dismissBanner = useCallback((evId) => {
|
||||
// Do NOT write the snooze to localStorage yet. activeEvents filters out snoozed events
|
||||
// synchronously on the very next render. so writing here would cause the banner to be
|
||||
// unmounted before the fade animation can start - which is what made it snap closed.
|
||||
// We snooze AFTER the animation finishes inside the setTimeout below.
|
||||
requestAnimationFrame(() => {
|
||||
setBannerVisible(false);
|
||||
setTimeout(() => {
|
||||
try { localStorage.setItem(BANNER_SNOOZE_KEY(evId), String(Date.now())); } catch (e) {}
|
||||
setDismissedEventIds(ids => [...ids, evId]);
|
||||
setBannerIndex(0);
|
||||
}, 500);
|
||||
});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (activeEvents.length <= 1) { setBannerIndex(0); return; }
|
||||
const id = setInterval(() => {
|
||||
const next = (bannerIndexRef.current + 1) % activeEvents.length;
|
||||
bannerSlideTo(next);
|
||||
}, 10000);
|
||||
return () => clearInterval(id);
|
||||
}, [activeEvents.length, activeEvents.map(e => e.id).join(','), bannerSlideTo]);
|
||||
|
||||
useEffect(() => {
|
||||
if (bannerIndex >= activeEvents.length) setBannerIndex(0);
|
||||
}, [activeEvents.length]);
|
||||
|
||||
// ── RETURN ALL STATE + HANDLERS ───────────────────────────────────────
|
||||
return {
|
||||
// location
|
||||
location, setLocationAndSave,
|
||||
// forecast
|
||||
forecast, airQuality, loading, error, now,
|
||||
// search
|
||||
searchQuery, setSearchQuery,
|
||||
searchResults, setSearchResults,
|
||||
searching,
|
||||
// day selection
|
||||
selectedDay, setSelectedDay,
|
||||
proPromptDay, setProPromptDay,
|
||||
proPromptSource, setProPromptSource,
|
||||
// day-tab scroll
|
||||
dayTabsRef, canScrollLeft, canScrollRight, scrollDayTabs,
|
||||
// pro
|
||||
isPro, setIsPro,
|
||||
// profile
|
||||
activeProfile, setActiveProfile,
|
||||
activateProfile, activeCols,
|
||||
visibleCols, setVisibleCols, toggleCol,
|
||||
activityOptions, placeOptions,
|
||||
activityValue, activityLabel,
|
||||
placeValue, placeLabel,
|
||||
// skin, vehicle, indoor, pollen
|
||||
skinType, setSkinType,
|
||||
vehicleType, setVehicleType,
|
||||
vehicleVent, setVehicleVent,
|
||||
outdoorsVariant, setOutdoorsVariantAndSave,
|
||||
buildingType, setBuildingType,
|
||||
indoorManaged, setIndoorManaged,
|
||||
indoorMode, setIndoorMode,
|
||||
pollenType, setPollenTypeAndSave,
|
||||
// table refs
|
||||
headStickyRef, headTrackRef, headTableRef,
|
||||
bodyScrollRef, bodyTableRef, tableWrapRef,
|
||||
// column popup
|
||||
colPopup, colPopupRef,
|
||||
handleThClick, handleThEnter, handleThLeave,
|
||||
handlePopupEnter, handlePopupLeave,
|
||||
eventTagPopup, eventTagPopupRef,
|
||||
evSlideIndex, evTransition, evSlideTo,
|
||||
handleEventTagClick, handleEventTagEnter, handleEventTagLeave,
|
||||
handleEventTagPopupEnter, handleEventTagPopupLeave,
|
||||
closePopup, closeEventTagPopup,
|
||||
// table scroll
|
||||
tableCanScrollLeft, tableCanScrollRight, handleBodyScroll,
|
||||
// computation
|
||||
hourlyRows, days, utcOffsetMs,
|
||||
visible, nowLocalISO, currentRow, currentCat,
|
||||
// banner + events
|
||||
activeEvents, lensEvent, selectedDayEvents,
|
||||
bannerIndex, bannerTransition, bannerPrevIndex,
|
||||
bannerVisible, bannerStageRef,
|
||||
bannerSlideTo, dismissBanner,
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user