fix(period-select): update when periodType changes (#61)

* chore: fix prop-type warnings in tests and runtime * fix(period-select): do not render selection UI if year is unavailable * fix(period-select): update year when periodType changes
dhis2 · Aug 24, 2021 · ab91327 · ab91327
1 parent 5652efe
commit ab91327
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 12 deletions.
diff --git a/src/top-bar/context-select/context-select.js b/src/top-bar/context-select/context-select.js
@@ -75,12 +75,12 @@ const ContextSelect = ({
 }
 
 ContextSelect.propTypes = {
-    children: PropTypes.node.isRequired,
     dataTest: PropTypes.string.isRequired,
     placeholder: PropTypes.string.isRequired,
     prefix: PropTypes.string.isRequired,
     onClose: PropTypes.func.isRequired,
     onOpen: PropTypes.func.isRequired,
+    children: PropTypes.node,
     disabled: PropTypes.bool,
     open: PropTypes.bool,
     popoverMaxWidth: PropTypes.number,

diff --git a/src/top-bar/context-select/context-select.test.js b/src/top-bar/context-select/context-select.test.js
@@ -16,6 +16,7 @@ describe('<ContextSelect>', () => {
         value: 'value',
         onClose: () => {},
         onOpen: () => {},
+        dataTest: 'context-select',
     }
     describe('base state - not open or disabled', () => {
         const onOpen = jest.fn()

diff --git a/src/top-bar/org-unit-select/org-unit-select.js b/src/top-bar/org-unit-select/org-unit-select.js
@@ -60,7 +60,7 @@ const OrgUnitSelect = () => {
                         )}
                     />
                 </div>
-                <Divider margin={0} />
+                <Divider margin="0" />
                 <ApprovalStatusIconsLegend />
             </div>
         </ContextSelect>

diff --git a/src/top-bar/period-select/period-select.js b/src/top-bar/period-select/period-select.js
@@ -29,7 +29,12 @@ const PeriodSelect = () => {
 
     useEffect(() => {
         if (workflow?.periodType) {
-            setMaxYear(computeMaxYear(workflow?.periodType))
+            const newMaxYear = computeMaxYear(workflow?.periodType)
+            setMaxYear(newMaxYear)
+
+            if (!period?.year) {
+                setYear(newMaxYear)
+            }
         }
     }, [workflow?.periodType])
 
@@ -45,15 +50,20 @@ const PeriodSelect = () => {
             onClose={() => setOpenedSelect('')}
             requiredValuesMessage={i18n.t('Choose a workflow first')}
         >
-            <YearNavigator
-                maxYear={maxYear}
-                year={year}
-                onYearChange={year => {
-                    selectPeriod(null)
-                    setYear(year)
-                }}
-            />
-            <PeriodMenu periodType={workflow?.periodType} year={year} />
+            {year && (
+                <>
+                    <YearNavigator
+                        maxYear={maxYear}
+                        year={year}
+                        onYearChange={year => {
+                            selectPeriod(null)
+                            setYear(year)
+                        }}
+                    />
+
+                    <PeriodMenu periodType={workflow?.periodType} year={year} />
+                </>
+            )}
         </ContextSelect>
     )
 }