fix(DHIS2-19253): fix issue with changelog going into infinite loop for line listing

Author: kabaros

src/components/AppDetails/useChangelog.js

@@ -1,4 +1,5 @@
 import { useDataQuery } from '@dhis2/app-runtime'
+import { useEffect, useState } from 'react'
 
 const changelogQuery = {
     changelog: {
@@ -8,30 +9,35 @@ const changelogQuery = {
 }
 
 const useChangelog = ({ appId, hasChangelog }) => {
-    const { data, refetch: fetchChangelog } = useDataQuery(changelogQuery, {
+    const [changelog, setChangelog] = useState({})
+
+    const { refetch: fetchChangelog } = useDataQuery(changelogQuery, {
         lazy: true,
-        variables: {
-            id: appId,
-        },
-    })
+        onComplete: (data) => {
+            const changelog = new Changelog(data?.changelog?.changelog)
 
-    if (data) {
-        const changelog = new Changelog(data?.changelog?.changelog)
+            const changelogByVersion = changelog?.data?.reduce?.(
+                (acc, item) => {
+                    acc[item.version] = item.rawChangeSummary
 
-        const changelogByVersion = changelog?.data?.reduce?.((acc, item) => {
-            acc[item.version] = item.rawChangeSummary
+                    return acc
+                },
+                {}
+            )
 
-            return acc
-        }, {})
+            setChangelog(changelogByVersion)
+        },
+    })
 
-        return changelogByVersion
-    }
+    useEffect(() => {
+        if (appId && hasChangelog) {
+            fetchChangelog({
+                id: appId,
+            })
+        }
+    }, [appId, fetchChangelog, hasChangelog])
 
-    if (!hasChangelog) {
-        return {}
-    } else {
-        fetchChangelog()
-    }
+    return changelog
 }
 
 class Changelog {

src/core-apps.js

@@ -13,6 +13,7 @@ export const coreApps = [
     { name: 'Event Visualizer', shortName: 'event-visualizer' },
     { name: 'Import/Export', shortName: 'import-export' },
     { name: 'Interpretations', shortName: 'interpretation' },
+    { name: 'Line Listing', shortName: 'line-listing' },
     { name: 'Maintenance', shortName: 'maintenance' },
     { name: 'Maps', shortName: 'maps' },
     { name: 'Menu Management', shortName: 'menu-management' },