Skip to content

fix: Refactor DatePicker component #337

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
chrismanciero merged 1 commit into from
Feb 1, 2019
Merged

fix: Refactor DatePicker component #337

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
183 changes: 32 additions & 151 deletions src/DatePicker/DatePicker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@ export class DatePicker extends Component {

//This is being used only when the user presses enter or clicks outside of the component
formatDate = (date) => {
let regex = /[!$%^&*()_+|~=`{}\[\]:'<>?,.\a-zA-Z]/;
let formatDate = '';
if (this.props.enableRangeSelection) {
if (date.length === 0) {
Expand Down Expand Up @@ -61,125 +60,13 @@ export class DatePicker extends Component {
secondDateDay +
'/' +
secondDateYear;
} else {
//Checks if the type of date doesn't match those types and that it doesn't contain any special character symbols
if (date.toString().search(regex) !== 1) {
return '';
} else {
let month = date[0].getMonth();
let day = date[0].getDate();
let year = date[0].getFullYear();

formatDate = month + '/' + day + '/' + year;
}
}
return formatDate;
}

sendUpdate = (e) => {
let regex = /[!$%^&*()_+|~=`{}\[\]:'<>?,.\a-zA-Z]/;
if (e.key === 'Enter') {
//Checks first if range is enabled
if (this.props.enableRangeSelection) {
//If the formattedDate contains a list of special characters symbols then it will be reset
if (
this.state.formattedDate.search(regex) !== -1 ||
this.state.formattedDate === '' ||
this.state.formattedDate.split('-').length < 2
) {
this.setState({
formattedDate: '',
arrSelectedDates: 'undefined',
hidden: false
});
} else {
//Breaks the input into an array
let dateRange = this.state.formattedDate.split('-');
let dateSeparatedFirstRange = dateRange[0].split('/');
let dateSeparatedSecondRange = dateRange[1].split('/');

//First date
let firstYearRange = parseInt(dateSeparatedFirstRange[2], 10);
let firstDateRange = parseInt(dateSeparatedFirstRange[1], 10);
let firstMonthRange = parseInt(dateSeparatedFirstRange[0], 10);

//Second date
let secondYearRange = parseInt(dateSeparatedSecondRange[2], 10);
let secondDateRange = parseInt(dateSeparatedSecondRange[1], 10);
let secondMonthRange = parseInt(dateSeparatedSecondRange[0], 10);

//Checks if the input is actually numbers and follows the required form
if (
(!isNaN(firstYearRange) ||
!isNaN(firstDateRange) ||
!isNaN(firstMonthRange)) &&
(!isNaN(secondYearRange) ||
!isNaN(secondDateRange) ||
!isNaN(secondMonthRange)) &&
(1 <= firstDateRange && firstDateRange <= 31) &&
(1 < firstMonthRange && firstMonthRange <= 12) &&
firstYearRange <= 3000 &&
(1 <= secondDateRange && secondDateRange <= 31) &&
(1 < secondMonthRange && secondMonthRange <= 12) &&
secondYearRange <= 3000
) {
let firstDate = new Date(
firstYearRange,
firstMonthRange - 1,
firstDateRange
);
let secondDate = new Date(
secondYearRange,
secondMonthRange - 1,
secondDateRange
);
let arrSelected = [];
//Swaps the order in case one date is bigger than the other
firstDate.getTime() > secondDate.getTime()
? (arrSelected = [secondDate, firstDate])
: (arrSelected = [firstDate, secondDate]);

this.setState({
selectedDate: '',
arrSelectedDates: arrSelected
});
} else {
this.setState({
formattedDate: '',
selectedDate: 'undefined',
arrSelectedDates: 'undefined'
});
}
}
} else {
if (this.state.formattedDate.search(regex) !== -1) {
this.setState({
formattedDate: this.formatDate(this.state.selectedDate),
selectedDate: 'undefined'
});
} else {
let dateSeparated = this.state.formattedDate.split('/');
let year = parseInt(dateSeparated[2], 10);
let date = parseInt(dateSeparated[1], 10);
let month = parseInt(dateSeparated[0], 10);

if (
(!isNaN(year) || !isNaN(date) || !isNaN(month)) &&
(1 <= date && date <= 31) &&
(1 < month && month <= 12) &&
year <= 3000
) {
this.setState({
selectedDate: new Date(year, month - 1, date)
});
} else {
this.setState({
selectedDate: 'undefined',
formattedDate: ''
});
}
}
}
this.validateDates();
}
}

Expand All @@ -198,8 +85,9 @@ export class DatePicker extends Component {
this.clickOutside();
};

clickOutside = () => {
validateDates = () => {
let regex = /[!$%^&*()_+|~=`{}\[\]:'<>?,.\a-zA-Z]/;
//Checks first if range is enabled
if (this.props.enableRangeSelection) {
//If the formattedDate contains a list of special characters symbols then it will be reset
if (
Expand All @@ -210,37 +98,31 @@ export class DatePicker extends Component {
this.setState({
formattedDate: '',
arrSelectedDates: 'undefined',
hidden: true
hidden: false
});
} else {
//The range dates being split.
//Breaks the input into an array
let dateRange = this.state.formattedDate.split('-');
let dateSeparatedFirstRange = dateRange[0].split('/');
let dateSeparatedSecondRange = dateRange[1].split('/');

//First date
let firstYearRange = parseInt(dateSeparatedFirstRange[2], 10);
let firstDateRange = parseInt(dateSeparatedFirstRange[1], 10);
let firstMonthRange = parseInt(dateSeparatedFirstRange[0], 10);

//Second date
let secondYearRange = parseInt(dateSeparatedSecondRange[2], 10);
let secondDateRange = parseInt(dateSeparatedSecondRange[1], 10);
let secondMonthRange = parseInt(dateSeparatedSecondRange[0], 10);

if (
(!isNaN(firstYearRange) ||
!isNaN(firstDateRange) ||
!isNaN(firstMonthRange)) &&
(!isNaN(secondYearRange) ||
!isNaN(secondDateRange) ||
!isNaN(secondMonthRange)) &&
(1 <= firstDateRange && firstDateRange <= 31) &&
(1 < firstMonthRange && firstMonthRange <= 12) &&
//Checks if the input is actually numbers and follows the required form
if ((1 <= firstDateRange && firstDateRange <= 31) &&
(1 <= firstMonthRange && firstMonthRange <= 12) &&
firstYearRange <= 3000 &&
(1 <= secondDateRange && secondDateRange <= 31) &&
(1 < secondMonthRange && secondMonthRange <= 12) &&
secondYearRange <= 3000 &&
dateRange[0].search(regex) === -1 &&
dateRange[1].search(regex) === -1
(1 <= secondMonthRange && secondMonthRange <= 12) &&
secondYearRange <= 3000
) {
let firstDate = new Date(
firstYearRange,
Expand All @@ -252,26 +134,23 @@ export class DatePicker extends Component {
secondMonthRange - 1,
secondDateRange
);
let arrSelected = [];
//Swaps the order in case one date is bigger than the other
if (firstDate.getTime() > secondDate.getTime()) {
this.setState({
selectedDate: '',
arrSelectedDates: [secondDate, firstDate]
});
} else {
this.setState({
selectedDate: '',
arrSelectedDates: [firstDate, secondDate]
});
}
firstDate.getTime() > secondDate.getTime()
? (arrSelected = [secondDate, firstDate])
: (arrSelected = [firstDate, secondDate]);

this.setState({
selectedDate: '',
arrSelectedDates: arrSelected
});
} else {
this.setState({
formattedDate: '',
arrSelectedDates: 'undefined',
selectedDate: ''
selectedDate: 'undefined',
arrSelectedDates: 'undefined'
});
}
this.setState({ hidden: true });
}
} else {
if (this.state.formattedDate.search(regex) !== -1) {
Expand All @@ -285,24 +164,26 @@ export class DatePicker extends Component {
let date = parseInt(dateSeparated[1], 10);
let month = parseInt(dateSeparated[0], 10);

if (
(!isNaN(year) || !isNaN(date) || !isNaN(month)) &&
(1 <= date && date <= 31) &&
(1 < month && month <= 12) &&
if ((1 <= date && date <= 31) &&
(1 <= month && month <= 12) &&
year <= 3000
) {
this.setState({
selectedDate: new Date(year, month - 1, date)
});
} else {
this.setState({
formattedDate: '',
selectedDate: 'undefined'
selectedDate: 'undefined',
formattedDate: ''
});
}
}
this.setState({ hidden: true });
}
}

clickOutside = () => {
this.validateDates();
this.setState({ hidden: true });
};

updateDate = (date) => {
Expand Down
37 changes: 28 additions & 9 deletions src/DatePicker/DatePicker.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -202,33 +202,52 @@ describe('<DatePicker />', () => {
let endRangeDate = new Date();
endRangeDate.setDate(endRangeDate.getDate() + 3);

let arrDates = [startRangeDate, endRangeDate];
wrapper.instance().updateDate(arrDates);

let formattedDate = `${startRangeDate.getMonth() +
1}/${startRangeDate.getDate()}/${startRangeDate.getFullYear()}-${endRangeDate.getMonth() +
1}/${endRangeDate.getDate()}/${endRangeDate.getFullYear()}`;

wrapper.find('input[type="text"]')
.simulate('change', { target: { value: formattedDate } });

wrapper.find('input[type="text"]').simulate('keypress', { key: 'Enter' });

expect(wrapper.state('formattedDate')).toEqual(formattedDate);
expect(wrapper.state('arrSelectedDates').length).toEqual(2);
});

wrapper.find('input[type="text"]').simulate('keypress', { key: 'Enter' });
test('pressing enter key on date input where start date > than end date', () => {
wrapper = mount(rangeDatePicker);

// make start date bigger than end date
arrDates = [endRangeDate, startRangeDate];
wrapper.instance().updateDate(arrDates);
let startRangeDate = new Date();
let endRangeDate = new Date();
endRangeDate.setDate(endRangeDate.getDate() + 3);

let switchFormattedDate = `${endRangeDate.getMonth() +
1}/${endRangeDate.getDate()}/${endRangeDate.getFullYear()}-${startRangeDate.getMonth() +
1}/${startRangeDate.getDate()}/${startRangeDate.getFullYear()}`;

wrapper.find('input[type="text"]')
.simulate('change', { target: { value: switchFormattedDate } });

wrapper.find('input[type="text"]').simulate('keypress', { key: 'Enter' });

expect(wrapper.state('formattedDate')).toEqual(switchFormattedDate);
expect(wrapper.state('arrSelectedDates').length).toEqual(2);
});

test('enter a valid date string', () => {
// enter a valid date input
wrapper = mount(defaultDatePicker);
let date = new Date();
let formattedDate = `${date.getMonth() +
1}/${date.getDate()}/${date.getFullYear()}`;
wrapper.find('input[type="text"]')
.simulate('change', { target: { value: formattedDate } });

expect(wrapper.state('formattedDate')).toEqual(formattedDate);
wrapper.find('input[type="text"]').simulate('keypress', { key: 'Enter' });

expect(wrapper.state('formattedDate')).toBe('');
expect(wrapper.state('selectedDate')).toBe('undefined');
expect(wrapper.state('selectedDate')).toEqual(new Date(date.getFullYear(), date.getMonth(), date.getDate()));
});

test('enter an invalid date string', () => {
Expand Down