Skip to content

Fix issues of profile enhancements Part 2 #2628

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
merged 4 commits into from
Jun 15, 2019
Merged

Fix issues of profile enhancements Part 2 #2628

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a5184e9
Update validateDates logic as backend and create common function for …
Jun 15, 2019
4531c3d
Merge branch 'feature-profile-enhancements' into feature-profile-enha…
codeMinter Jun 15, 2019
65396d3
fix merging issues
codeMinter Jun 15, 2019
890593f
fix lint issues
codeMinter Jun 15, 2019
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
144 changes: 96 additions & 48 deletions src/shared/components/Settings/Profile/Education/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import ConsentComponent from 'components/Settings/ConsentComponent';
import { PrimaryButton } from 'topcoder-react-ui-kit';
import DatePicker from 'components/challenge-listing/Filters/DatePicker';
import ErrorMessage from 'components/Settings/ErrorMessage';
import { validateStartDate, validateEndDate } from 'utils/settings';
import ConfirmationModal from '../../CofirmationModal';
import EducationList from './List';

Expand All @@ -39,6 +40,10 @@ export default class Education extends ConsentComponent {
const { userTraits } = props;
this.state = {
formInvalid: false,
startDateInvalid: false,
startDateInvalidMsg: '',
endDateInvalid: false,
endDateInvalidMsg: '',
educationTrait: this.loadEducationTrait(userTraits),
personalizationTrait: this.loadPersonalizationTrait(userTraits),
newEducation: {
Expand All @@ -48,7 +53,7 @@ export default class Education extends ConsentComponent {
timePeriodTo: '',
graduated: false,
},
inputChanged: false,
isSubmit: false,
isMobileView: false,
screenSM: 767,
isEdit: false,
Expand All @@ -69,7 +74,11 @@ export default class Education extends ConsentComponent {
educationTrait,
personalizationTrait,
formInvalid: false,
inputChanged: false,
startDateInvalid: false,
startDateInvalidMsg: '',
endDateInvalid: false,
endDateInvalidMsg: '',
isSubmit: false,
newEducation: {
schoolCollegeName: '',
major: '',
Expand All @@ -91,30 +100,24 @@ export default class Education extends ConsentComponent {
*/
onCheckFormValue(newEducation) {
let invalid = false;
const currentDate = new Date().setHours(0, 0, 0, 0);

if (!_.trim(newEducation.schoolCollegeName).length) {
invalid = true;
}

if (!_.isEmpty(newEducation.timePeriodFrom) && _.isEmpty(newEducation.timePeriodTo)) {
const fromDate = new Date(newEducation.timePeriodFrom).setHours(0, 0, 0, 0);

if (fromDate > currentDate) {
invalid = true; // Start Date should be in past or current
}
} else if (!_.isEmpty(newEducation.timePeriodFrom) && !_.isEmpty(newEducation.timePeriodTo)) {
const fromDate = new Date(newEducation.timePeriodFrom).setHours(0, 0, 0, 0);
const toDate = new Date(newEducation.timePeriodTo).setHours(0, 0, 0, 0);

if (fromDate > currentDate // Start Date is in past or current
|| fromDate >= toDate // Start Date is before End Date
|| (newEducation.graduated && toDate > currentDate)) { // End Date is in past or current
invalid = true;
}
}
const fromDateValidResult = validateStartDate(newEducation.graduated,
newEducation.timePeriodFrom, newEducation.timePeriodTo);
const endDateValidResult = validateEndDate(newEducation.graduated,
newEducation.timePeriodFrom, newEducation.timePeriodTo);
const formInvalid = invalid || fromDateValidResult.invalid || endDateValidResult.invalid;

this.setState({ formInvalid: invalid });
this.setState({
formInvalid,
startDateInvalid: fromDateValidResult.invalid,
startDateInvalidMsg: fromDateValidResult.message,
endDateInvalidMsg: endDateValidResult.message,
endDateInvalid: endDateValidResult.invalid,
});
return invalid;
}

Expand Down Expand Up @@ -167,8 +170,7 @@ export default class Education extends ConsentComponent {
result.message = 'End Date should be in past or current';
}
}

return result;
return formInvalid;
}

onHandleDeleteEducation(indexNo) {
Expand All @@ -183,7 +185,7 @@ export default class Education extends ConsentComponent {
const { newEducation: oldEducation } = this.state;
const newEducation = { ...oldEducation };
newEducation[timePeriod] = date;
this.setState({ newEducation, inputChanged: true });
this.setState({ newEducation, isSubmit: false });
}
}

Expand Down Expand Up @@ -215,8 +217,13 @@ export default class Education extends ConsentComponent {
this.setState({
showConfirmation: false,
indexNo: null,
inputChanged: false,
isSubmit: false,
isEdit: false,
formInvalid: false,
startDateInvalid: false,
startDateInvalidMsg: '',
endDateInvalid: false,
endDateInvalidMsg: '',
});
}

Expand All @@ -234,8 +241,14 @@ export default class Education extends ConsentComponent {
timePeriodTo: _.isEmpty(educationTrait.traits.data[indexNo].timePeriodTo) ? '' : educationTrait.traits.data[indexNo].timePeriodTo,
graduated: educationTrait.traits.data[indexNo].graduated,
},
isSubmit: false,
isEdit: true,
indexNo,
formInvalid: false,
startDateInvalid: false,
startDateInvalidMsg: '',
endDateInvalid: false,
endDateInvalidMsg: '',
});
}

Expand Down Expand Up @@ -299,7 +312,7 @@ export default class Education extends ConsentComponent {
newEducation: empty,
isEdit: false,
indexNo: null,
inputChanged: false,
isSubmit: false,
});
// save personalization
if (_.isEmpty(personalizationTrait)) {
Expand Down Expand Up @@ -334,7 +347,7 @@ export default class Education extends ConsentComponent {
}
}

this.setState({ newEducation, inputChanged: true });
this.setState({ newEducation, isSubmit: false });
}

/**
Expand All @@ -346,7 +359,7 @@ export default class Education extends ConsentComponent {
const { newEducation: oldEducation } = this.state;
const newEducation = { ...oldEducation };
newEducation[option.key] = option.name;
this.setState({ newEducation, inputChanged: true });
this.setState({ newEducation, isSubmit: false });
}
}

Expand All @@ -357,7 +370,7 @@ export default class Education extends ConsentComponent {
onHandleAddEducation(e) {
e.preventDefault();
const { newEducation } = this.state;
this.setState({ inputChanged: true });
this.setState({ isSubmit: true });
if (this.onCheckFormValue(newEducation)) {
return;
}
Expand Down Expand Up @@ -394,7 +407,7 @@ export default class Education extends ConsentComponent {
if (isEdit) {
this.setState({
isEdit: false,
inputChanged: false,
isSubmit: false,
indexNo: null,
newEducation: {
schoolCollegeName: '',
Expand All @@ -403,6 +416,11 @@ export default class Education extends ConsentComponent {
timePeriodTo: '',
graduated: false,
},
formInvalid: false,
startDateInvalid: false,
startDateInvalidMsg: '',
endDateInvalid: false,
endDateInvalidMsg: '',
});
}
}
Expand All @@ -417,13 +435,19 @@ export default class Education extends ConsentComponent {
isEdit,
showConfirmation,
indexNo,
formInvalid,
startDateInvalid,
startDateInvalidMsg,
endDateInvalid,
endDateInvalidMsg,
isSubmit,
} = this.state;
const tabs = settingsUI.TABS.PROFILE;
const currentTab = settingsUI.currentProfileTab;
const containerStyle = currentTab === tabs.EDUCATION ? '' : 'hide';
const educationItems = educationTrait.traits
? educationTrait.traits.data.slice() : [];
const { newEducation, inputChanged } = this.state;
const { newEducation } = this.state;


return (
Expand Down Expand Up @@ -478,7 +502,11 @@ export default class Education extends ConsentComponent {
<div styleName="field col-2">
<span styleName="text-required">* Required</span>
<input id="schoolCollegeName" name="schoolCollegeName" type="text" placeholder="Name" onChange={this.onUpdateInput} value={newEducation.schoolCollegeName} maxLength="64" required />
<ErrorMessage invalid={_.isEmpty(newEducation.schoolCollegeName) && inputChanged} message="Name cannot be empty" />
{
isSubmit && formInvalid && (
<ErrorMessage invalid={_.isEmpty(newEducation.schoolCollegeName)} message="Name cannot be empty" />
)
}
</div>
</div>
<div styleName="row">
Expand Down Expand Up @@ -509,10 +537,14 @@ export default class Education extends ConsentComponent {
onDateChange={date => this.onUpdateDate(date, 'timePeriodFrom')}
placeholder="dd/mm/yyyy"
/>
<ErrorMessage
invalid={this.onCheckStartDate(newEducation).invalid && inputChanged}
message={this.onCheckStartDate(newEducation).message}
/>
{
isSubmit && (
<ErrorMessage
invalid={startDateInvalid}
message={startDateInvalidMsg}
/>
)
}
</div>
</div>
<div styleName="row">
Expand Down Expand Up @@ -546,10 +578,14 @@ export default class Education extends ConsentComponent {
/>
)
}
<ErrorMessage
invalid={this.onCheckEndDate(newEducation).invalid && inputChanged}
message={this.onCheckEndDate(newEducation).message}
/>
{
isSubmit && (
<ErrorMessage
invalid={endDateInvalid}
message={endDateInvalidMsg}
/>
)
}
</div>
</div>
<div styleName="row">
Expand Down Expand Up @@ -622,7 +658,11 @@ export default class Education extends ConsentComponent {
<input type="hidden" />
</label>
<input id="schoolCollegeName" name="schoolCollegeName" type="text" placeholder="Name" onChange={this.onUpdateInput} value={newEducation.schoolCollegeName} maxLength="64" required />
<ErrorMessage invalid={_.isEmpty(newEducation.schoolCollegeName) && inputChanged} message="Name cannot be empty" />
{
isSubmit && formInvalid && (
<ErrorMessage invalid={_.isEmpty(newEducation.schoolCollegeName)} message="Name cannot be empty" />
)
}
</div>
<div styleName="field col-3">
<label htmlFor="major">
Expand Down Expand Up @@ -652,10 +692,14 @@ export default class Education extends ConsentComponent {
onDateChange={date => this.onUpdateDate(date, 'timePeriodFrom')}
placeholder="dd/mm/yyyy"
/>
<ErrorMessage
invalid={this.onCheckStartDate(newEducation).invalid && inputChanged}
message={this.onCheckStartDate(newEducation).message}
/>
{
isSubmit && (
<ErrorMessage
invalid={startDateInvalid}
message={startDateInvalidMsg}
/>
)
}
</div>
<div styleName="field col-date">
<label htmlFor="timePeriodTo">
Expand Down Expand Up @@ -685,10 +729,14 @@ export default class Education extends ConsentComponent {
/>
)
}
<ErrorMessage
invalid={this.onCheckEndDate(newEducation).invalid && inputChanged}
message={this.onCheckEndDate(newEducation).message}
/>
{
isSubmit && (
<ErrorMessage
invalid={endDateInvalid}
message={endDateInvalidMsg}
/>
)
}
</div>
<div styleName="field col-checkbox">
<div styleName="tc-checkbox">
Expand Down
Loading