feat: enhance currency caching strategy
- Updated the currency tool to include a timestamp for cached data. - Implemented a 12-hour validity check for cached exchange rates to improve data accuracy and user experience. - Ensured that outdated cache is still displayed while fetching new data in the background.
This commit is contained in:
@@ -99,18 +99,20 @@ const Tool: FC = () => {
|
|||||||
const cached = localStorage.getItem(RATES_CACHE_KEY);
|
const cached = localStorage.getItem(RATES_CACHE_KEY);
|
||||||
if (cached) {
|
if (cached) {
|
||||||
try {
|
try {
|
||||||
const { rates: cachedRates, date: cachedDate } = JSON.parse(cached);
|
const { rates: cachedRates, date: cachedDate, fetchedAt } = JSON.parse(cached);
|
||||||
|
|
||||||
// Check if cached data is from today
|
const now = Date.now();
|
||||||
const today = new Date().toISOString().split('T')[0]; // YYYY-MM-DD
|
const twelveHoursInMs = 12 * 60 * 60 * 1000;
|
||||||
|
|
||||||
if (cachedDate === today) {
|
// Strategy: Use cache if it's recent enough (within 12 hours)
|
||||||
// Cache is valid (same date), use it directly
|
// This handles all edge cases: weekends, holidays, timezone differences
|
||||||
|
// Exchange rates update once per day, so 12-hour cache is reasonable
|
||||||
|
if (fetchedAt && (now - fetchedAt < twelveHoursInMs)) {
|
||||||
setRates(cachedRates);
|
setRates(cachedRates);
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
return;
|
return;
|
||||||
} else {
|
} else {
|
||||||
// Cache is outdated, show old data first then update in background
|
// Cache is older than 12 hours, show it first then update in background
|
||||||
setRates(cachedRates);
|
setRates(cachedRates);
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
// Continue to fetch new data below
|
// Continue to fetch new data below
|
||||||
@@ -134,11 +136,15 @@ const Tool: FC = () => {
|
|||||||
const allRates: Record<string, number> = { USD: 1, ...data.rates };
|
const allRates: Record<string, number> = { USD: 1, ...data.rates };
|
||||||
const apiDate = data.date; // Date from API (YYYY-MM-DD format)
|
const apiDate = data.date; // Date from API (YYYY-MM-DD format)
|
||||||
|
|
||||||
// 3. Update state and cache
|
// 3. Update state and cache (with timestamp)
|
||||||
setRates(allRates);
|
setRates(allRates);
|
||||||
localStorage.setItem(
|
localStorage.setItem(
|
||||||
RATES_CACHE_KEY,
|
RATES_CACHE_KEY,
|
||||||
JSON.stringify({ rates: allRates, date: apiDate })
|
JSON.stringify({
|
||||||
|
rates: allRates,
|
||||||
|
date: apiDate,
|
||||||
|
fetchedAt: Date.now() // Timestamp when we fetched the data
|
||||||
|
})
|
||||||
);
|
);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
// If cache exists, continue using it even if network fails
|
// If cache exists, continue using it even if network fails
|
||||||
|
|||||||
Reference in New Issue
Block a user