Update asset context to reduce database calls
This commit is contained in:
parent
33d512e7b8
commit
ab9cc9e148
@ -131,18 +131,27 @@ export function AssetURLsProvider({ children }) {
|
|||||||
const [assetURLs, setAssetURLs] = useState({});
|
const [assetURLs, setAssetURLs] = useState({});
|
||||||
const { database } = useDatabase();
|
const { database } = useDatabase();
|
||||||
|
|
||||||
// Keep track of when the asset keys change so we can update the URLs
|
// Keep track of the assets that need to be loaded
|
||||||
const [assetKeys, setAssetKeys] = useState([]);
|
const [assetKeys, setAssetKeys] = useState([]);
|
||||||
|
|
||||||
|
// Load assets after 100ms
|
||||||
|
const loadingDebouncedAssetURLs = useDebounce(assetURLs, 100);
|
||||||
|
|
||||||
|
// Update the asset keys to load when a url is added without an asset attached
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const keys = Object.keys(assetURLs);
|
if (!loadingDebouncedAssetURLs) {
|
||||||
let newKeys = keys.filter((key) => !assetKeys.includes(key));
|
return;
|
||||||
let deletedKeys = assetKeys.filter((key) => !keys.includes(key));
|
|
||||||
if (newKeys.length > 0 || deletedKeys.length > 0) {
|
|
||||||
setAssetKeys((prevKeys) =>
|
|
||||||
[...prevKeys, ...newKeys].filter((key) => !deletedKeys.includes(key))
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}, [assetURLs, assetKeys]);
|
let keysToLoad = [];
|
||||||
|
for (let url of Object.values(loadingDebouncedAssetURLs)) {
|
||||||
|
if (url.url === null) {
|
||||||
|
keysToLoad.push(url.id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (keysToLoad.length > 0) {
|
||||||
|
setAssetKeys(keysToLoad);
|
||||||
|
}
|
||||||
|
}, [loadingDebouncedAssetURLs]);
|
||||||
|
|
||||||
// Get the new assets whenever the keys change
|
// Get the new assets whenever the keys change
|
||||||
const assets = useLiveQuery(
|
const assets = useLiveQuery(
|
||||||
@ -152,9 +161,12 @@ export function AssetURLsProvider({ children }) {
|
|||||||
|
|
||||||
// Update asset URLs when assets are loaded
|
// Update asset URLs when assets are loaded
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!assets) {
|
if (!assets || assets.length === 0) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
// Assets are about to be loaded so clear the keys to load
|
||||||
|
setAssetKeys([]);
|
||||||
|
|
||||||
setAssetURLs((prevURLs) => {
|
setAssetURLs((prevURLs) => {
|
||||||
let newURLs = { ...prevURLs };
|
let newURLs = { ...prevURLs };
|
||||||
for (let asset of assets) {
|
for (let asset of assets) {
|
||||||
@ -172,7 +184,7 @@ export function AssetURLsProvider({ children }) {
|
|||||||
}, [assets]);
|
}, [assets]);
|
||||||
|
|
||||||
// Clean up asset URLs every minute
|
// Clean up asset URLs every minute
|
||||||
const debouncedAssetURLs = useDebounce(assetURLs, 60 * 1000);
|
const cleanUpDebouncedAssetURLs = useDebounce(assetURLs, 60 * 1000);
|
||||||
|
|
||||||
// Revoke url when no more references
|
// Revoke url when no more references
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -190,7 +202,7 @@ export function AssetURLsProvider({ children }) {
|
|||||||
return prevURLs;
|
return prevURLs;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}, [debouncedAssetURLs]);
|
}, [cleanUpDebouncedAssetURLs]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AssetURLsStateContext.Provider value={assetURLs}>
|
<AssetURLsStateContext.Provider value={assetURLs}>
|
||||||
|
Loading…
Reference in New Issue
Block a user