fix: update currentYear on date selection (#363)

* fix: update currentYear on date selection

* removed currentYear prop

Author: chrismanciero

src/Calendar/Calendar.js

@@ -14,7 +14,6 @@ export class Calendar extends Component {
             selectedDate: new Date(0, 0, 0),
             showMonths: false,
             showYears: false,
-            currentYear: new Date(),
             dateClick: false
         };
     }
@@ -193,7 +192,7 @@ export class Calendar extends Component {
 
     generateYears = (yearListProps) => {
 
-        let year = this.state.currentYear.getFullYear();
+        let year = this.state.currentDateDisplayed.getFullYear();
         let years = [year];
         for (let iterations = 1; iterations < 12; iterations++) {
             year = year + 1;
@@ -227,9 +226,9 @@ export class Calendar extends Component {
     next = () => {
 
         if (this.state.showYears) {
-            let copyDate = this.state.currentYear;
+            let copyDate = this.state.currentDateDisplayed;
             copyDate.setFullYear(copyDate.getFullYear() + 12);
-            this.setState({ currentYear: copyDate, dateClick: true });
+            this.setState({ currentDateDisplayed: copyDate, dateClick: true });
         } else {
             let copyDate = this.state.currentDateDisplayed;
             let selectedDate = new Date(this.state.selectedDate.getFullYear(), this.state.selectedDate.getMonth(), this.state.selectedDate.getDate(), 0, 0, 0, 0);
@@ -243,9 +242,9 @@ export class Calendar extends Component {
     previous = () => {
 
         if (this.state.showYears) {
-            let copyDate = this.state.currentYear;
+            let copyDate = this.state.currentDateDisplayed;
             copyDate.setFullYear(copyDate.getFullYear() - 12);
-            this.setState({ currentYear: copyDate, dateClick: true });
+            this.setState({ currentDateDisplayed: copyDate, dateClick: true });
         } else {
             let copyDate = this.state.currentDateDisplayed;
             let selectedDate = new Date(this.state.selectedDate.getFullYear(), this.state.selectedDate.getMonth(), this.state.selectedDate.getDate(), 0, 0, 0, 0);

src/Calendar/Calendar.test.js

@@ -154,6 +154,7 @@ describe('<Calendar />', () => {
 
     test('click year from list', () => {
         let wrapper = mount(defaultCalendar);
+        const currentDateDisplayed = Object.assign(new Date(), wrapper.state('currentDateDisplayed'));
         expect(wrapper.state('showYears')).toBeFalsy();
         wrapper
             .find(
@@ -169,11 +170,9 @@ describe('<Calendar />', () => {
             .at(3)
             .simulate('click');
 
-        // check that April was selected
-        const currentDateDisplayed = wrapper.state('currentDateDisplayed');
-        let currentYearDisplayed = new Date(wrapper.state('currentYear'));
-        expect(currentDateDisplayed.getFullYear()).toEqual(
-            currentYearDisplayed.getFullYear() + 3
+        let newDateDisplayed = new Date(wrapper.state('currentDateDisplayed'));
+        expect(newDateDisplayed.getFullYear()).toEqual(
+            currentDateDisplayed.getFullYear() + 3
         );
     });
 
@@ -203,6 +202,7 @@ describe('<Calendar />', () => {
 
     test('click year from list from range selector', () => {
         let wrapper = mount(rangeSelect);
+        const currentDateDisplayed = Object.assign(new Date(), wrapper.state('currentDateDisplayed'));
         expect(wrapper.state('showYears')).toBeFalsy();
         wrapper
             .find(
@@ -218,29 +218,26 @@ describe('<Calendar />', () => {
             .at(3)
             .simulate('click');
 
-        // check that April was selected
-        const currentDateDisplayed = wrapper.state('currentDateDisplayed');
-        let currentYearDisplayed = new Date(wrapper.state('currentYear'));
-        expect(currentDateDisplayed.getFullYear()).toEqual(
-            currentYearDisplayed.getFullYear() + 3
+        const newDateDisplayed = new Date(wrapper.state('currentDateDisplayed'));
+        expect(newDateDisplayed.getFullYear()).toEqual(
+            currentDateDisplayed.getFullYear() + 3
         );
     });
 
     test('click previous button', () => {
         let wrapper = mount(defaultCalendar);
-        let currentDateDisplayed = new Date(wrapper.state('currentDateDisplayed'));
+        const currentDateDisplayed = Object.assign(new Date(), wrapper.state('currentDateDisplayed'));
 
         wrapper
             .find(
                 'header.fd-calendar__header button.fd-button--light.fd-button--compact'
             )
             .at(0)
             .simulate('click');
-        let newDateDisplayed = wrapper.state('currentDateDisplayed');
-        currentDateDisplayed.setMonth(currentDateDisplayed.getMonth() - 1);
+        const newDateDisplayed = wrapper.state('currentDateDisplayed');
 
         expect(newDateDisplayed.getMonth()).toEqual(
-            currentDateDisplayed.getMonth()
+            currentDateDisplayed.getMonth() - 1
         );
 
         // previous button when year shown
@@ -253,37 +250,33 @@ describe('<Calendar />', () => {
 
         expect(wrapper.state('showYears')).toBeTruthy();
 
-        let currentYearDisplayed = new Date(wrapper.state('currentYear'));
         wrapper
             .find(
                 'header.fd-calendar__header button.fd-button--light.fd-button--compact'
             )
             .at(0)
             .simulate('click');
 
-        let newYearDisplayed = wrapper.state('currentYear');
-        currentYearDisplayed.setFullYear(currentYearDisplayed.getFullYear() - 12);
+        const newYearDisplayed = wrapper.state('currentDateDisplayed');
         expect(newYearDisplayed.getFullYear()).toEqual(
-            currentYearDisplayed.getFullYear()
+            currentDateDisplayed.getFullYear() - 12
         );
     });
 
     test('click next button', () => {
         let wrapper = mount(defaultCalendar);
-        let currentDateDisplayed = new Date(wrapper.state('currentDateDisplayed'));
+        const currentDateDisplayed = Object.assign(new Date(), wrapper.state('currentDateDisplayed'));
 
         wrapper
             .find(
                 'header.fd-calendar__header button.fd-button--light.fd-button--compact'
             )
             .at(3)
             .simulate('click');
-        let newDateDisplayed = wrapper.state('currentDateDisplayed');
-
-        currentDateDisplayed.setMonth(currentDateDisplayed.getMonth() + 1);
+        const newDateDisplayed = wrapper.state('currentDateDisplayed');
 
         expect(newDateDisplayed.getMonth()).toEqual(
-            currentDateDisplayed.getMonth()
+            currentDateDisplayed.getMonth() + 1
         );
 
         // previous button when year shown
@@ -296,20 +289,17 @@ describe('<Calendar />', () => {
 
         expect(wrapper.state('showYears')).toBeTruthy();
 
-        let currentYearDisplayed = new Date(wrapper.state('currentYear'));
-
         wrapper
             .find(
                 'header.fd-calendar__header button.fd-button--light.fd-button--compact'
             )
             .at(3)
             .simulate('click');
 
-        let newYearDisplayed = wrapper.state('currentYear');
+        const newYearDisplayed = wrapper.state('currentDateDisplayed');
 
-        currentYearDisplayed.setFullYear(currentYearDisplayed.getFullYear() + 12);
         expect(newYearDisplayed.getFullYear()).toEqual(
-            currentYearDisplayed.getFullYear()
+            currentDateDisplayed.getFullYear() + 12
         );
     });