chore: clean-up

src/components/edit/LayerEdit.js

@@ -9,7 +9,7 @@ import {
     ButtonStrip,
 } from '@dhis2/ui'
 import PropTypes from 'prop-types'
-import React, { useState } from 'react'
+import React, { useState, useRef, useEffect } from 'react'
 import { connect } from 'react-redux'
 import { addLayer, updateLayer, cancelLayer } from '../../actions/layers.js'
 import { EARTH_ENGINE_LAYER } from '../../constants/layers.js'
@@ -46,6 +46,7 @@ const getLayerNames = () => ({
 
 const LayerEdit = ({ layer, addLayer, updateLayer, cancelLayer }) => {
     const [isValidLayer, setIsValidLayer] = useState(false)
+    const modalRef = useRef(null)
     const { systemSettings, periodsSettings } = useCachedDataQuery()
     const orgUnits = useOrgUnits()
 
@@ -74,6 +75,13 @@ const LayerEdit = ({ layer, addLayer, updateLayer, cancelLayer }) => {
     }
 
     useKeyDown('Escape', cancelLayer)
+    useKeyDown('Enter', onValidateLayer)
+
+    useEffect(() => {
+        if (layer && modalRef.current) {
+            modalRef.current.focus()
+        }
+    }, [layer])
 
     if (!layer) {
         return null
@@ -97,7 +105,13 @@ const LayerEdit = ({ layer, addLayer, updateLayer, cancelLayer }) => {
         : i18n.t('Add new {{name}} layer', { name })
 
     return (
-        <Modal position="middle" dataTest="layeredit" large>
+        <Modal
+            position="middle"
+            dataTest="layeredit"
+            large
+            tabIndex={-1}
+            ref={modalRef}
+        >
             <ModalTitle>{title}</ModalTitle>
             <ModalContent>
                 <div className={styles.content}>

src/components/edit/event/EventDialog.js

@@ -277,7 +277,7 @@ class EventDialog extends Component {
                                 <StartEndDate
                                     startDate={startDate}
                                     endDate={endDate}
-                                    //errorText={periodError}
+                                    errorText={periodError}
                                     setStartDate={setStartDate}
                                     setEndDate={setEndDate}
                                     periodsSettings={periodsSettings}

src/components/edit/thematic/ThematicDialog.js

@@ -310,7 +310,6 @@ class ThematicDialog extends Component {
         } = this.state
 
         const periods = getPeriodsFromFilters(filters)
-
         const dataItem = getDataItemFromColumns(columns)
         const dimensions = getDimensionsFromFilters(filters)
 

src/components/layers/LayerCard.js

@@ -31,10 +31,7 @@ const LayerCard = ({
                     })}
                 >
                     <h2>{title}</h2>
-                    {
-                        // TODO Handle long list of periods
-                        subtitle && <h3>{subtitle}</h3>
-                    }
+                    {subtitle && <h3>{subtitle}</h3>}
                 </div>
                 <div className={styles.action}>
                     {isOverlay && <SortableHandle />}

src/components/periods/RenderingStrategy.js

@@ -13,8 +13,8 @@ import {
 } from '../../constants/periods.js'
 import usePrevious from '../../hooks/usePrevious.js'
 import { getPeriodsFromFilters } from '../../util/analytics.js'
-import { Radio, RadioGroup } from '../core/index.js'
 import { countPeriods } from '../../util/periods.js'
+import { Radio, RadioGroup } from '../core/index.js'
 
 const RenderingStrategy = ({
     layerId,
@@ -41,7 +41,9 @@ const RenderingStrategy = ({
     })
 
     useEffect(() => {
-        if (periods === prevPeriods) return
+        if (periods === prevPeriods) {
+            return
+        }
 
         if (
             totalPeriods < MULTIMAP_MIN_PERIODS &&
@@ -54,7 +56,7 @@ const RenderingStrategy = ({
         ) {
             onChange(RENDERING_STRATEGY_SINGLE)
         }
-    }, [value, periods, prevPeriods, onChange])
+    }, [value, periods, prevPeriods, onChange, totalPeriods])
 
     const helpText = useMemo(() => {
         const messages = []

src/components/periods/Timeline.js

@@ -4,11 +4,11 @@ import { scaleTime } from 'd3-scale'
 import { select } from 'd3-selection'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
+import { doubleTicksPeriods } from '../../constants/periods.js'
 import {
     getPeriodTypeFromId,
     getPeriodLevelFromPeriodType,
 } from '../../util/periods.js'
-import { doubleTicksPeriods } from '../../constants/periods.js'
 import timeTicks from '../../util/timeTicks.js'
 import styles from './styles/Timeline.module.css'
 

src/components/periods/__tests__/RenderingStrategy.spec.js

@@ -2,13 +2,13 @@ import { mount } from 'enzyme'
 import React from 'react'
 import { Provider } from 'react-redux'
 import configureMockStore from 'redux-mock-store'
-import RenderingStrategy from '../RenderingStrategy'
 import {
     RENDERING_STRATEGY_SINGLE,
     RENDERING_STRATEGY_TIMELINE,
     RENDERING_STRATEGY_SPLIT_BY_PERIOD,
-} from '../../../constants/layers'
-import { countPeriods } from '../../../util/periods'
+} from '../../../constants/layers.js'
+import { countPeriods } from '../../../util/periods.js'
+import RenderingStrategy from '../RenderingStrategy.js'
 
 const mockStore = configureMockStore()
 
@@ -82,7 +82,7 @@ describe('RenderingStrategy', () => {
 
     it('automatically switches to SINGLE when conditions are not met', () => {
         countPeriods.mockReturnValue(1)
-        const wrapper = renderWithProps(props)
+        renderWithProps(props)
         expect(mockOnChange).toHaveBeenCalledWith(RENDERING_STRATEGY_SINGLE)
     })
 })

src/components/periods/__tests__/Timeline.spec.js

@@ -35,6 +35,15 @@ describe('Timeline', () => {
             endDate: new Date('2019-06-30T24:00:00.000'),
         },
     ]
+    const periodOnChange = {
+        id: '201904',
+        name: 'April 2019',
+        startDate: new Date('2019-04-01T00:00:00.000'),
+        endDate: new Date('2019-04-30T24:00:00.000'),
+        level: 7,
+        levelRank: 0,
+        type: 'MONTHLY',
+    }
     const onChangeSpy = jest.fn()
     let props
 
@@ -69,8 +78,7 @@ describe('Timeline', () => {
     it('should call onChange with the period clicked', () => {
         const wrapper = renderWithProps(props)
         wrapper.find('rect').first().simulate('click')
-        // Update periods[0] to account for the updated sorting logic
-        expect(onChangeSpy).toHaveBeenCalledWith(periods[0])
+        expect(onChangeSpy).toHaveBeenCalledWith(periodOnChange)
     })
 
     it('Should toggle play mode when play/pause button is clicked', () => {
@@ -81,7 +89,7 @@ describe('Timeline', () => {
         playPauseBtn.simulate('click')
         expect(wrapper.state('mode')).toBe('play')
         // Called because current period is the last
-        expect(onChangeSpy).toHaveBeenCalledWith(periods[0])
+        expect(onChangeSpy).toHaveBeenCalledWith(periodOnChange)
         playPauseBtn.simulate('click')
         expect(wrapper.state('mode')).toBe('stop')
     })

src/loaders/thematicLoader.js

@@ -97,10 +97,13 @@ const thematicLoader = async ({ config, engine, nameProperty }) => {
     const isSingleMap = renderingStrategy === RENDERING_STRATEGY_SINGLE
     const isBubbleMap = thematicMapType === THEMATIC_BUBBLE
     const isSingleColor = config.method === CLASSIFICATION_SINGLE_COLOR
-    const presetPeriods = getPeriodsFromFilters(config.filters)
+    const names = getApiResponseNames(data)
+    const presetPeriods = getPeriodsFromFilters(config.filters).map((pe) => {
+        pe.name = names[pe.id]
+        return pe
+    })
     const periods = getPeriodsFromMetaData(data.metaData)
     const dimensions = getValidDimensionsFromFilters(config.filters)
-    const names = getApiResponseNames(data)
     const valuesByPeriod = !isSingleMap ? getValuesByPeriod(data) : null
     const valueById = getValueById(data)
     const valueFeatures = noDataColor
@@ -151,7 +154,7 @@ const thematicLoader = async ({ config, engine, nameProperty }) => {
         title: name,
         period:
             presetPeriods.length > 0
-                ? presetPeriods.map((pe) => names[pe.id] || pe.id).join(', ')
+                ? presetPeriods.map((pe) => pe.name || pe.id).join(', ')
                 : formatStartEndDate(
                       getDateArray(config.startDate),
                       getDateArray(config.endDate)