fix: start screen most viewed updates v36 (DHIS2-11065) (#1712)

* fix: pass username to the favorites endpoint (#1711)
* fix: start screen vis type crash (#1709)

packages/app/src/api/mostViewedVisualizations.js

@@ -3,12 +3,17 @@
 import { EVENT_TYPE } from './dataStatistics'
 
 // most likely is not needed anywhere else
-export const apiFetchMostViewedVisualizations = (dataEngine, pageSize) => {
+export const apiFetchMostViewedVisualizations = (
+    dataEngine,
+    pageSize,
+    username
+) => {
     const visualizationQuery = {
         resource: 'dataStatistics/favorites',
         params: {
             eventType: EVENT_TYPE,
             pageSize: pageSize || 10,
+            ...(username ? { username } : {}),
         },
     }
 

packages/app/src/components/Visualization/StartScreen.js

@@ -12,31 +12,32 @@ import history from '../../modules/history'
 import { VisualizationError, genericErrorTitle } from '../../modules/error'
 import { GenericError } from '../../assets/ErrorIcons'
 import { apiFetchVisualizations } from '../../api/visualization'
+import { matchVisualizationWithType } from './utils'
+import { sGetUsername } from '../../reducers/user'
 
-const StartScreen = ({ error }) => {
+const StartScreen = ({ error, username }) => {
     const [mostViewedVisualizations, setMostViewedVisualizations] = useState([])
     const engine = useDataEngine()
 
     useEffect(() => {
         async function populateMostViewedVisualizations(engine) {
             const mostViewedVisualizationsResult = await apiFetchMostViewedVisualizations(
                 engine,
-                6
+                6,
+                username
             )
-            const visualizations = mostViewedVisualizationsResult.visualization
+            const visualizations = mostViewedVisualizationsResult.visualization // {position: int, views: int, id: string, created: string}
             if (visualizations && visualizations.length) {
                 const visualizationsResult = await apiFetchVisualizations(
                     engine,
-                    visualizations.map(vis => vis.id)
+                    visualizations.map(visualization => visualization.id)
                 )
                 const visualizationsWithType =
-                    visualizationsResult.visualization.visualizations
-                const result = visualizations.map(vis => ({
-                    ...visualizationsWithType.find(
-                        visWithType => visWithType.id === vis.id && visWithType
-                    ),
-                    ...vis,
-                }))
+                    visualizationsResult.visualization.visualizations // {id: string, type: string}
+                const result = matchVisualizationWithType(
+                    visualizations,
+                    visualizationsWithType
+                )
 
                 setMostViewedVisualizations(result)
             }
@@ -134,10 +135,12 @@ const StartScreen = ({ error }) => {
 
 StartScreen.propTypes = {
     error: PropTypes.object,
+    username: PropTypes.string,
 }
 
 const mapStateToProps = state => ({
     error: sGetLoadError(state),
+    username: sGetUsername(state),
 })
 
 export default connect(mapStateToProps)(StartScreen)

packages/app/src/components/Visualization/__tests__/utils.spec.js

@@ -0,0 +1,103 @@
+import { matchVisualizationWithType } from '../utils'
+
+let visualizations
+
+describe('utils', () => {
+    describe('matchVisualizationWithType', () => {
+        beforeEach(() => {
+            visualizations = [
+                {
+                    position: 1,
+                    views: 10,
+                    id: 'aaa111',
+                    created: '2020-01-01',
+                },
+                {
+                    position: 2,
+                    views: 9,
+                    id: 'bbb222',
+                    created: '2020-01-02',
+                },
+                {
+                    position: 3,
+                    views: 8,
+                    id: 'ccc333',
+                    created: '2020-01-03',
+                },
+            ]
+        })
+        it('all visualizations are matched with a type', () => {
+            const types = [
+                {
+                    id: 'aaa111',
+                    type: 'typeX',
+                },
+                {
+                    id: 'bbb222',
+                    type: 'typeY',
+                },
+                {
+                    id: 'ccc333',
+                    type: 'typeZ',
+                },
+            ]
+            const expectedResult = [
+                {
+                    position: 1,
+                    views: 10,
+                    id: 'aaa111',
+                    created: '2020-01-01',
+                    type: 'typeX',
+                },
+                {
+                    position: 2,
+                    views: 9,
+                    id: 'bbb222',
+                    created: '2020-01-02',
+                    type: 'typeY',
+                },
+                {
+                    position: 3,
+                    views: 8,
+                    id: 'ccc333',
+                    created: '2020-01-03',
+                    type: 'typeZ',
+                },
+            ]
+            expect(matchVisualizationWithType(visualizations, types)).toEqual(
+                expectedResult
+            )
+        })
+        it('only visualizations with a type are returned', () => {
+            const types = [
+                {
+                    id: 'aaa111',
+                    type: 'typeX',
+                },
+                {
+                    id: 'bbb222',
+                    type: 'typeY',
+                },
+            ]
+            const expectedResult = [
+                {
+                    position: 1,
+                    views: 10,
+                    id: 'aaa111',
+                    created: '2020-01-01',
+                    type: 'typeX',
+                },
+                {
+                    position: 2,
+                    views: 9,
+                    id: 'bbb222',
+                    created: '2020-01-02',
+                    type: 'typeY',
+                },
+            ]
+            expect(matchVisualizationWithType(visualizations, types)).toEqual(
+                expectedResult
+            )
+        })
+    })
+})

packages/app/src/components/Visualization/utils.js

@@ -0,0 +1,18 @@
+export const matchVisualizationWithType = (
+    visualizations,
+    visualizationsWithType
+) => {
+    const result = []
+    visualizations.forEach(visualization => {
+        const type = visualizationsWithType.find(
+            visWithType => visWithType.id === visualization.id
+        )?.type
+        if (type) {
+            result.push({
+                ...visualization,
+                type,
+            })
+        }
+    })
+    return result
+}