diff --git a/assets/js/src/core/modules/asset/editor/shared-tab-manager/tabs/versions/comparison-view/comparison-view.tsx b/assets/js/src/core/modules/asset/editor/shared-tab-manager/tabs/versions/comparison-view/comparison-view.tsx index 67ad3dfd6..2bd160f28 100644 --- a/assets/js/src/core/modules/asset/editor/shared-tab-manager/tabs/versions/comparison-view/comparison-view.tsx +++ b/assets/js/src/core/modules/asset/editor/shared-tab-manager/tabs/versions/comparison-view/comparison-view.tsx @@ -35,6 +35,17 @@ export const ComparisonView = ({ const [gridData, setGridData] = useState([] as object[]) const [versions, setVersions] = useState([]) + const handleImageVersions = (currentVersions: AssetVersionData[], imageUrls: Array): void => { + const imageVersions = currentVersions + + imageVersions.forEach((version, versionIndex) => { + version.previewImageUrl = imageUrls[versionIndex] + }) + + setVersions(imageVersions) + setGridData(versionsDataToTableData(imageVersions)) + } + useEffect(() => { const versionPromises: Array> = [] @@ -48,22 +59,20 @@ export const ComparisonView = ({ Promise.all(versionPromises) .then((responses): void => { - const versions: AssetVersionData[] = [] + const currentVersions: AssetVersionData[] = [] + const imagePromises: Array> = [] + responses.forEach((response, versionIndex) => { const dataRaw = response.data as AssetVersion - versions.push(hydrateVersionData(dataRaw, versionIds[versionIndex].id, versionIds[versionIndex].count)) + + currentVersions.push(hydrateVersionData(dataRaw, versionIds[versionIndex].id, versionIds[versionIndex].count)) imagePromises.push(loadPreviewImage(dataRaw, versionIds[versionIndex].id)) }) Promise.all(imagePromises) .then((imageUrls): void => { - versions.forEach((version, versionIndex) => { - version.previewImageUrl = imageUrls[versionIndex] - }) - - setVersions(versions) - setGridData(versionsDataToTableData(versions)) + handleImageVersions(currentVersions, imageUrls) }) .catch(err => { console.log(err) }) })