EES-5934 - FE - Refactoring the changelog page to grab the data for the requested Data Set Version

Author: jack-hive

src/explore-education-statistics-admin/src/pages/release/data/ReleaseApiDataSetChangelogPage.tsx

@@ -20,6 +20,10 @@ import { useQuery } from '@tanstack/react-query';
 import { generatePath, useParams } from 'react-router-dom';
 import React, { useEffect } from 'react';
 import WarningMessage from '@common/components/WarningMessage';
+import { DataSetVersionStatus } from '@admin/services/apiDataSetService';
+
+const dataSetVersionIsDraft = (dataSetVersionStatus: DataSetVersionStatus) =>
+  dataSetVersionStatus === 'Draft';
 
 export default function ReleaseApiDataSetChangelogPage() {
   const { dataSetId, dataSetVersionId, releaseVersionId, publicationId } =
@@ -31,18 +35,20 @@ export default function ReleaseApiDataSetChangelogPage() {
     refetch: refetchDataSet,
   } = useQuery(apiDataSetQueries.get(dataSetId));
 
+  const { data: dataSetVersion, isLoading: isLoadingDataSetVersion } = useQuery(
+    apiDataSetVersionQueries.getVersion(dataSetVersionId),
+  );
+
   const { data: changes, isLoading: isLoadingChanges } = useQuery(
     apiDataSetVersionQueries.getChanges(dataSetVersionId),
   );
 
-  const isDraft = dataSet?.draftVersion?.id === dataSetVersionId;
+  const isDraft = dataSetVersion
+    ? dataSetVersionIsDraft(dataSetVersion.status)
+    : false;
 
   const [showForm, toggleShowForm] = useToggle(false);
 
-  const dataSetVersion = isDraft
-    ? dataSet?.draftVersion
-    : dataSet?.latestLiveVersion;
-
   useEffect(() => {
     if (isDraft && !dataSetVersion?.notes) {
       toggleShowForm.on();
@@ -76,7 +82,11 @@ export default function ReleaseApiDataSetChangelogPage() {
         Back to API data set details
       </Link>
 
-      <LoadingSpinner loading={isLoadingDataSet || isLoadingChanges}>
+      <LoadingSpinner
+        loading={
+          isLoadingDataSet || isLoadingDataSetVersion || isLoadingChanges
+        }
+      >
         {dataSet && dataSetVersion ? (
           <>
             <div className="govuk-grid-row">