fix(period-select): respect system settings for date formats when ren…

…dering Daily periods (#89)

* fix(period-select): respect system settings for date formats when rendering Daily periods

* test: update cypress fixtures

* test(period-select): test formatting of Daily periods

* refactor: use useConfig instead of fetching from system/info endpoint

* revert: "test: update cypress fixtures"

This reverts commit 4805618.

* refactor: expose formatYyyyMmDd option in getFixedPeriodsByTypeAndYear

src/shared/fixed-periods/fixed-periods.js

@@ -548,7 +548,7 @@ const getFinancialAprilPeriodType = (formatYyyyMmDd, fnFilter) => {
     }
 }
 
-const formatYyyyMmDd = date => {
+const defaultFormatYyyyMmDd = date => {
     const y = date.getFullYear()
     let m = String(date.getMonth() + 1)
     let d = String(date.getDate())
@@ -559,7 +559,7 @@ const formatYyyyMmDd = date => {
     return `${y}-${m}-${d}`
 }
 
-const filterFuturePeriods = periods => {
+const defaultFilterFuturePeriods = periods => {
     const array = []
     const now = getCurrentDate()
 
@@ -572,7 +572,10 @@ const filterFuturePeriods = periods => {
     return array
 }
 
-export const getFixedPeriodTypes = () => [
+export const getFixedPeriodTypes = ({
+    formatYyyyMmDd = defaultFormatYyyyMmDd,
+    filterFuturePeriods = defaultFilterFuturePeriods,
+} = {}) => [
     {
         type: DAILY,
         regex: /^([0-9]{4})([0-9]{2})([0-9]{2})$/, // YYYYMMDD
@@ -709,15 +712,20 @@ export const getFixedPeriodTypes = () => [
     },
 ]
 
-export const getFixedPeriodType = periodType => {
+export const getFixedPeriodType = ({
+    periodType,
+    formatYyyyMmDd,
+    filterFuturePeriods,
+}) => {
     if (!isValidPeriodType(periodType)) {
         throw new Error(
             `Invalid period type "${periodType}" supplied to "getFixedPeriodType"`
         )
     }
-    const periodTypeObj = getFixedPeriodTypes().find(
-        ({ type }) => type === periodType
-    )
+    const periodTypeObj = getFixedPeriodTypes({
+        formatYyyyMmDd,
+        filterFuturePeriods,
+    }).find(({ type }) => type === periodType)
 
     if (!periodTypeObj) {
         /**
@@ -742,12 +750,22 @@ export const getYearOffsetFromNow = year => {
     return yearInt - getCurrentDate().getFullYear()
 }
 
-export const getFixedPeriodsByTypeAndYear = (type, year, config) => {
-    const periodType = getFixedPeriodType(type)
+export const getFixedPeriodsByTypeAndYear = ({
+    periodType,
+    year,
+    formatYyyyMmDd,
+    filterFuturePeriods,
+    config,
+}) => {
+    const fixedPeriod = getFixedPeriodType({
+        periodType,
+        formatYyyyMmDd,
+        filterFuturePeriods,
+    })
     const offset = getYearOffsetFromNow(year)
 
-    return periodType && Number.isInteger(offset)
-        ? periodType.getPeriods({ ...config, offset })
+    return fixedPeriod && Number.isInteger(offset)
+        ? fixedPeriod.getPeriods({ ...config, offset })
         : []
 }
 
@@ -790,7 +808,7 @@ export const parsePeriodId = (id, allowedTypes) => {
 const isValidDate = date => !isNaN(date.getTime())
 
 export const getFixedPeriodsForTypeAndDateRange = (
-    type,
+    periodType,
     startDate,
     endDate
 ) => {
@@ -814,7 +832,7 @@ export const getFixedPeriodsForTypeAndDateRange = (
     const convertedPeriods = []
 
     while (!startDateReached) {
-        getFixedPeriodsByTypeAndYear(type, year)
+        getFixedPeriodsByTypeAndYear({ periodType, year })
             .reverse()
             .forEach(period => {
                 const periodEnd = new Date(period.endDate)

src/shared/fixed-periods/fixed-periods.test.js

@@ -19,7 +19,7 @@ describe('Fixed period utilities', () => {
         let periods
 
         beforeAll(() => {
-            const option = getFixedPeriodType('Daily')
+            const option = getFixedPeriodType({ periodType: 'Daily' })
 
             periods = option.getPeriods({
                 offset: 2019 - new Date(Date.now()).getFullYear(),
@@ -58,7 +58,7 @@ describe('Fixed period utilities', () => {
         let periods
 
         beforeAll(() => {
-            const option = getFixedPeriodType('Weekly')
+            const option = getFixedPeriodType({ periodType: 'Weekly' })
 
             periods = option.getPeriods({
                 offset: 2009 - new Date(Date.now()).getFullYear(),
@@ -97,7 +97,9 @@ describe('Fixed period utilities', () => {
 
         describe('-> Weekly Wednesday', () => {
             beforeAll(() => {
-                const option = getFixedPeriodType('WeeklyWednesday')
+                const option = getFixedPeriodType({
+                    periodType: 'WeeklyWednesday',
+                })
 
                 periods = option.getPeriods({
                     offset: 2019 - new Date(Date.now()).getFullYear(),
@@ -125,7 +127,9 @@ describe('Fixed period utilities', () => {
 
         describe('-> Weekly Thursday', () => {
             beforeAll(() => {
-                const option = getFixedPeriodType('WeeklyThursday')
+                const option = getFixedPeriodType({
+                    periodType: 'WeeklyThursday',
+                })
 
                 periods = option.getPeriods({
                     offset: 2019 - new Date(Date.now()).getFullYear(),
@@ -153,7 +157,9 @@ describe('Fixed period utilities', () => {
 
         describe('-> Weekly Saturday', () => {
             beforeAll(() => {
-                const option = getFixedPeriodType('WeeklySaturday')
+                const option = getFixedPeriodType({
+                    periodType: 'WeeklySaturday',
+                })
 
                 periods = option.getPeriods({
                     offset: 2019 - new Date(Date.now()).getFullYear(),
@@ -182,7 +188,9 @@ describe('Fixed period utilities', () => {
 
         describe('-> Weekly Sunday', () => {
             beforeAll(() => {
-                const option = getFixedPeriodType('WeeklySunday')
+                const option = getFixedPeriodType({
+                    periodType: 'WeeklySunday',
+                })
 
                 periods = option.getPeriods({
                     offset: 2019 - new Date(Date.now()).getFullYear(),
@@ -213,7 +221,7 @@ describe('Fixed period utilities', () => {
         let periods
 
         beforeAll(() => {
-            const option = getFixedPeriodType('BiWeekly')
+            const option = getFixedPeriodType({ periodType: 'BiWeekly' })
 
             periods = option.getPeriods({
                 offset: 2019 - new Date(Date.now()).getFullYear(),
@@ -255,7 +263,7 @@ describe('Fixed period utilities', () => {
         let periods
 
         beforeAll(() => {
-            const option = getFixedPeriodType('Monthly')
+            const option = getFixedPeriodType({ periodType: 'Monthly' })
 
             periods = option.getPeriods({
                 offset: 2019 - new Date(Date.now()).getFullYear(),
@@ -293,7 +301,7 @@ describe('Fixed period utilities', () => {
         let periods
 
         beforeAll(() => {
-            const option = getFixedPeriodType('BiMonthly')
+            const option = getFixedPeriodType({ periodType: 'BiMonthly' })
 
             periods = option.getPeriods({
                 offset: 2019 - new Date(Date.now()).getFullYear(),
@@ -341,7 +349,7 @@ describe('Fixed period utilities', () => {
         let periods
 
         beforeAll(() => {
-            const option = getFixedPeriodType('Quarterly')
+            const option = getFixedPeriodType({ periodType: 'Quarterly' })
 
             periods = option.getPeriods({
                 offset: 2019 - new Date(Date.now()).getFullYear(),
@@ -379,7 +387,7 @@ describe('Fixed period utilities', () => {
         let periods
 
         beforeAll(() => {
-            const option = getFixedPeriodType('SixMonthly')
+            const option = getFixedPeriodType({ periodType: 'SixMonthly' })
 
             periods = option.getPeriods({
                 offset: 2019 - new Date(Date.now()).getFullYear(),
@@ -417,7 +425,7 @@ describe('Fixed period utilities', () => {
         let periods
 
         beforeAll(() => {
-            const option = getFixedPeriodType('SixMonthlyApril')
+            const option = getFixedPeriodType({ periodType: 'SixMonthlyApril' })
 
             periods = option.getPeriods({
                 offset: 2019 - new Date(Date.now()).getFullYear(),
@@ -455,7 +463,7 @@ describe('Fixed period utilities', () => {
         let periods
 
         beforeAll(() => {
-            const option = getFixedPeriodType('Yearly')
+            const option = getFixedPeriodType({ periodType: 'Yearly' })
 
             periods = option.getPeriods({
                 offset: 10, // 2020 - 2029
@@ -493,7 +501,7 @@ describe('Fixed period utilities', () => {
         let periods
 
         beforeAll(() => {
-            const option = getFixedPeriodType('FinancialNov')
+            const option = getFixedPeriodType({ periodType: 'FinancialNov' })
 
             periods = option.getPeriods({
                 offset: 9,
@@ -533,7 +541,7 @@ describe('Fixed period utilities', () => {
         let periods
 
         beforeAll(() => {
-            const option = getFixedPeriodType('FinancialOct')
+            const option = getFixedPeriodType({ periodType: 'FinancialOct' })
 
             periods = option.getPeriods({
                 offset: 9,
@@ -573,7 +581,7 @@ describe('Fixed period utilities', () => {
         let periods
 
         beforeAll(() => {
-            const option = getFixedPeriodType('FinancialJuly')
+            const option = getFixedPeriodType({ periodType: 'FinancialJuly' })
 
             periods = option.getPeriods({
                 offset: 9,
@@ -609,7 +617,7 @@ describe('Fixed period utilities', () => {
         let periods
 
         beforeAll(() => {
-            const option = getFixedPeriodType('FinancialApril')
+            const option = getFixedPeriodType({ periodType: 'FinancialApril' })
 
             periods = option.getPeriods({
                 offset: 9,
@@ -761,7 +769,9 @@ describe('Fixed period utilities', () => {
         describe('getFixedPeriodType', () => {
             // Behaviour for valid period tpes is tested via the generators
             it('should throw an error if an invalid period type is provided', () => {
-                expect(() => getFixedPeriodType('INVALID')).toThrowError(
+                expect(() =>
+                    getFixedPeriodType({ periodType: 'INVALID' })
+                ).toThrowError(
                     'Invalid period type "INVALID" supplied to "getFixedPeriodType"'
                 )
             })

src/top-bar/period-select/period-menu.js

@@ -1,4 +1,6 @@
+import { useConfig } from '@dhis2/app-runtime'
 import { Menu, MenuItem } from '@dhis2/ui'
+import moment from 'moment'
 import PropTypes from 'prop-types'
 import React from 'react'
 import { createHref } from '../../navigation/index.js'
@@ -13,8 +15,23 @@ const PeriodMenu = ({ periodType, year }) => {
         orgUnit,
         selectPeriod,
     } = useSelectionContext()
-    const periods = getFixedPeriodsByTypeAndYear(periodType, year, {
-        reversePeriods: true,
+    const {
+        systemInfo: { dateFormat },
+    } = useConfig()
+    const periods = getFixedPeriodsByTypeAndYear({
+        periodType,
+        year,
+        formatYyyyMmDd: date => {
+            if (periodType === 'Daily') {
+                // moment format tokens are case sensitive
+                // see https://momentjs.com/docs/#/parsing/string-format/
+                return moment(date).format(dateFormat.toUpperCase())
+            }
+            return moment(date).format('YYYY-MM-DD')
+        },
+        config: {
+            reversePeriods: true,
+        },
     })
 
     return (