Lucien Cartier-Tilet
d54aabd621
All checks were successful
deploy / deploy (push) Successful in 2m24s
This commit removes dependency on rxjs. It also implements better composables to handle data fetching from remote APIs and caching these values more transparently. This commit also switches from yarn to npm It also switches to the official Umami plugin
63 lines
1.9 KiB
TypeScript
63 lines
1.9 KiB
TypeScript
import { Ref, computed, ref, watchEffect } from 'vue';
|
|
|
|
interface CacheOptions {
|
|
lifetime?: number;
|
|
timestampSuffix?: string;
|
|
forceUpdate?: boolean;
|
|
}
|
|
|
|
/**
|
|
* Cache data in local storage.
|
|
*
|
|
* The cache is updated if:
|
|
* - cache data does not exist
|
|
* - cached data is outdated and `data` is not null
|
|
* - or `options.forceUpdate` is true, regardless of the value of `data`
|
|
*
|
|
* Otherwise, data is retrieved from cache.
|
|
*
|
|
* @param {string} name Name of the cached value in local storage
|
|
* @param {Ref<T>} data Data to cache
|
|
* @param {CacheOptions} options Tweaks to the behaviour of the function
|
|
*/
|
|
export const useCache = <T>(
|
|
name: string,
|
|
data: Ref<T>,
|
|
options: CacheOptions,
|
|
) => {
|
|
const error = ref<string>(null);
|
|
const timestampName = name + (options?.timestampSuffix || '-timestamp');
|
|
const lifetime = options?.lifetime || 1000 * 60 * 60; // one hour in milliseconds
|
|
const lastUpdated: number = +localStorage.getItem(timestampName);
|
|
const cacheAge: number = Date.now() - lastUpdated;
|
|
const isDataOutdated = computed(() => {
|
|
return cacheAge > lifetime;
|
|
});
|
|
const shouldUpdate = computed(
|
|
() => options?.forceUpdate || (isDataOutdated.value && data.value != null),
|
|
);
|
|
|
|
const setData = () => {
|
|
console.log('Setting data in cache with name', name);
|
|
localStorage.setItem(name, JSON.stringify(data.value));
|
|
localStorage.setItem(timestampName, `${Date.now()}`);
|
|
};
|
|
|
|
const getData = () => {
|
|
console.log('Getting data from cache with name', name);
|
|
const cached = localStorage.getItem(name);
|
|
console.log('Value from storage:', cached);
|
|
try {
|
|
data.value = JSON.parse(cached);
|
|
} catch (err) {
|
|
console.error('Failed to parse cached data:', err);
|
|
data.value = null;
|
|
error.value = err;
|
|
}
|
|
};
|
|
|
|
getData();
|
|
watchEffect(() => (shouldUpdate.value ? setData() : getData()));
|
|
return { error, isDataOutdated };
|
|
};
|