From ab91327b0b101f269bb6dc623a31530e17733ec8 Mon Sep 17 00:00:00 2001
From: Hendrik de Graaf <HendrikThePendric@users.noreply.github.com>
Date: Tue, 24 Aug 2021 16:00:17 +0200
Subject: [PATCH] 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
---
 src/top-bar/context-select/context-select.js  |  2 +-
 .../context-select/context-select.test.js     |  1 +
 .../org-unit-select/org-unit-select.js        |  2 +-
 src/top-bar/period-select/period-select.js    | 30 ++++++++++++-------
 4 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/src/top-bar/context-select/context-select.js b/src/top-bar/context-select/context-select.js
index 5119a690..1d983b13 100644
--- 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
index 1450f85d..33a315b3 100644
--- 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
index 1e359057..9caac841 100644
--- 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
index 1a961eaf..ec50a7be 100644
--- 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>
     )
 }