Skip to content

Commit 514405d

Browse files
codeMintercodeMinter
authored
Merge pull request #2628 from nauhil/feature-profile-enhancements
Fix issues of profile enhancements Part 2
2 parents b20631f + 890593f commit 514405d

File tree

10 files changed

+463
-255
lines changed

10 files changed

+463
-255
lines changed

‎src/shared/components/Settings/Profile/Education/index.jsx

Lines changed: 96 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import ConsentComponent from 'components/Settings/ConsentComponent';
1414
import { PrimaryButton } from 'topcoder-react-ui-kit';
1515
import DatePicker from 'components/challenge-listing/Filters/DatePicker';
1616
import ErrorMessage from 'components/Settings/ErrorMessage';
17+
import { validateStartDate, validateEndDate } from 'utils/settings';
1718
import ConfirmationModal from '../../CofirmationModal';
1819
import EducationList from './List';
1920

@@ -39,6 +40,10 @@ export default class Education extends ConsentComponent {
3940
const { userTraits } = props;
4041
this.state = {
4142
formInvalid: false,
43+
startDateInvalid: false,
44+
startDateInvalidMsg: '',
45+
endDateInvalid: false,
46+
endDateInvalidMsg: '',
4247
educationTrait: this.loadEducationTrait(userTraits),
4348
personalizationTrait: this.loadPersonalizationTrait(userTraits),
4449
newEducation: {
@@ -48,7 +53,7 @@ export default class Education extends ConsentComponent {
4853
timePeriodTo: '',
4954
graduated: false,
5055
},
51-
inputChanged: false,
56+
isSubmit: false,
5257
isMobileView: false,
5358
screenSM: 767,
5459
isEdit: false,
@@ -69,7 +74,11 @@ export default class Education extends ConsentComponent {
6974
educationTrait,
7075
personalizationTrait,
7176
formInvalid: false,
72-
inputChanged: false,
77+
startDateInvalid: false,
78+
startDateInvalidMsg: '',
79+
endDateInvalid: false,
80+
endDateInvalidMsg: '',
81+
isSubmit: false,
7382
newEducation: {
7483
schoolCollegeName: '',
7584
major: '',
@@ -91,30 +100,24 @@ export default class Education extends ConsentComponent {
91100
*/
92101
onCheckFormValue(newEducation) {
93102
let invalid = false;
94-
const currentDate = new Date().setHours(0, 0, 0, 0);
95103

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

100-
if (!_.isEmpty(newEducation.timePeriodFrom) && _.isEmpty(newEducation.timePeriodTo)) {
101-
const fromDate = new Date(newEducation.timePeriodFrom).setHours(0, 0, 0, 0);
102-
103-
if (fromDate > currentDate) {
104-
invalid = true; // Start Date should be in past or current
105-
}
106-
} else if (!_.isEmpty(newEducation.timePeriodFrom) && !_.isEmpty(newEducation.timePeriodTo)) {
107-
const fromDate = new Date(newEducation.timePeriodFrom).setHours(0, 0, 0, 0);
108-
const toDate = new Date(newEducation.timePeriodTo).setHours(0, 0, 0, 0);
109-
110-
if (fromDate > currentDate // Start Date is in past or current
111-
|| fromDate >= toDate // Start Date is before End Date
112-
|| (newEducation.graduated && toDate > currentDate)) { // End Date is in past or current
113-
invalid = true;
114-
}
115-
}
108+
const fromDateValidResult = validateStartDate(newEducation.graduated,
109+
newEducation.timePeriodFrom, newEducation.timePeriodTo);
110+
const endDateValidResult = validateEndDate(newEducation.graduated,
111+
newEducation.timePeriodFrom, newEducation.timePeriodTo);
112+
const formInvalid = invalid || fromDateValidResult.invalid || endDateValidResult.invalid;
116113

117-
this.setState({ formInvalid: invalid });
114+
this.setState({
115+
formInvalid,
116+
startDateInvalid: fromDateValidResult.invalid,
117+
startDateInvalidMsg: fromDateValidResult.message,
118+
endDateInvalidMsg: endDateValidResult.message,
119+
endDateInvalid: endDateValidResult.invalid,
120+
});
118121
return invalid;
119122
}
120123

@@ -167,8 +170,7 @@ export default class Education extends ConsentComponent {
167170
result.message = 'End Date should be in past or current';
168171
}
169172
}
170-
171-
return result;
173+
return formInvalid;
172174
}
173175

174176
onHandleDeleteEducation(indexNo) {
@@ -183,7 +185,7 @@ export default class Education extends ConsentComponent {
183185
const { newEducation: oldEducation } = this.state;
184186
const newEducation = { ...oldEducation };
185187
newEducation[timePeriod] = date;
186-
this.setState({ newEducation, inputChanged: true });
188+
this.setState({ newEducation, isSubmit: false });
187189
}
188190
}
189191

@@ -215,8 +217,13 @@ export default class Education extends ConsentComponent {
215217
this.setState({
216218
showConfirmation: false,
217219
indexNo: null,
218-
inputChanged: false,
220+
isSubmit: false,
219221
isEdit: false,
222+
formInvalid: false,
223+
startDateInvalid: false,
224+
startDateInvalidMsg: '',
225+
endDateInvalid: false,
226+
endDateInvalidMsg: '',
220227
});
221228
}
222229

@@ -234,8 +241,14 @@ export default class Education extends ConsentComponent {
234241
timePeriodTo: _.isEmpty(educationTrait.traits.data[indexNo].timePeriodTo) ? '' : educationTrait.traits.data[indexNo].timePeriodTo,
235242
graduated: educationTrait.traits.data[indexNo].graduated,
236243
},
244+
isSubmit: false,
237245
isEdit: true,
238246
indexNo,
247+
formInvalid: false,
248+
startDateInvalid: false,
249+
startDateInvalidMsg: '',
250+
endDateInvalid: false,
251+
endDateInvalidMsg: '',
239252
});
240253
}
241254

@@ -299,7 +312,7 @@ export default class Education extends ConsentComponent {
299312
newEducation: empty,
300313
isEdit: false,
301314
indexNo: null,
302-
inputChanged: false,
315+
isSubmit: false,
303316
});
304317
// save personalization
305318
if (_.isEmpty(personalizationTrait)) {
@@ -334,7 +347,7 @@ export default class Education extends ConsentComponent {
334347
}
335348
}
336349

337-
this.setState({ newEducation, inputChanged: true });
350+
this.setState({ newEducation, isSubmit: false });
338351
}
339352

340353
/**
@@ -346,7 +359,7 @@ export default class Education extends ConsentComponent {
346359
const { newEducation: oldEducation } = this.state;
347360
const newEducation = { ...oldEducation };
348361
newEducation[option.key] = option.name;
349-
this.setState({ newEducation, inputChanged: true });
362+
this.setState({ newEducation, isSubmit: false });
350363
}
351364
}
352365

@@ -357,7 +370,7 @@ export default class Education extends ConsentComponent {
357370
onHandleAddEducation(e) {
358371
e.preventDefault();
359372
const { newEducation } = this.state;
360-
this.setState({ inputChanged: true });
373+
this.setState({ isSubmit: true });
361374
if (this.onCheckFormValue(newEducation)) {
362375
return;
363376
}
@@ -394,7 +407,7 @@ export default class Education extends ConsentComponent {
394407
if (isEdit) {
395408
this.setState({
396409
isEdit: false,
397-
inputChanged: false,
410+
isSubmit: false,
398411
indexNo: null,
399412
newEducation: {
400413
schoolCollegeName: '',
@@ -403,6 +416,11 @@ export default class Education extends ConsentComponent {
403416
timePeriodTo: '',
404417
graduated: false,
405418
},
419+
formInvalid: false,
420+
startDateInvalid: false,
421+
startDateInvalidMsg: '',
422+
endDateInvalid: false,
423+
endDateInvalidMsg: '',
406424
});
407425
}
408426
}
@@ -417,13 +435,19 @@ export default class Education extends ConsentComponent {
417435
isEdit,
418436
showConfirmation,
419437
indexNo,
438+
formInvalid,
439+
startDateInvalid,
440+
startDateInvalidMsg,
441+
endDateInvalid,
442+
endDateInvalidMsg,
443+
isSubmit,
420444
} = this.state;
421445
const tabs = settingsUI.TABS.PROFILE;
422446
const currentTab = settingsUI.currentProfileTab;
423447
const containerStyle = currentTab === tabs.EDUCATION ? '' : 'hide';
424448
const educationItems = educationTrait.traits
425449
? educationTrait.traits.data.slice() : [];
426-
const { newEducation, inputChanged } = this.state;
450+
const { newEducation } = this.state;
427451

428452

429453
return (
@@ -478,7 +502,11 @@ export default class Education extends ConsentComponent {
478502
<div styleName="field col-2">
479503
<span styleName="text-required">* Required</span>
480504
<input id="schoolCollegeName" name="schoolCollegeName" type="text" placeholder="Name" onChange={this.onUpdateInput} value={newEducation.schoolCollegeName} maxLength="64" required />
481-
<ErrorMessage invalid={_.isEmpty(newEducation.schoolCollegeName) && inputChanged} message="Name cannot be empty" />
505+
{
506+
isSubmit && formInvalid && (
507+
<ErrorMessage invalid={_.isEmpty(newEducation.schoolCollegeName)} message="Name cannot be empty" />
508+
)
509+
}
482510
</div>
483511
</div>
484512
<div styleName="row">
@@ -509,10 +537,14 @@ export default class Education extends ConsentComponent {
509537
onDateChange={date => this.onUpdateDate(date, 'timePeriodFrom')}
510538
placeholder="dd/mm/yyyy"
511539
/>
512-
<ErrorMessage
513-
invalid={this.onCheckStartDate(newEducation).invalid && inputChanged}
514-
message={this.onCheckStartDate(newEducation).message}
515-
/>
540+
{
541+
isSubmit && (
542+
<ErrorMessage
543+
invalid={startDateInvalid}
544+
message={startDateInvalidMsg}
545+
/>
546+
)
547+
}
516548
</div>
517549
</div>
518550
<div styleName="row">
@@ -546,10 +578,14 @@ export default class Education extends ConsentComponent {
546578
/>
547579
)
548580
}
549-
<ErrorMessage
550-
invalid={this.onCheckEndDate(newEducation).invalid && inputChanged}
551-
message={this.onCheckEndDate(newEducation).message}
552-
/>
581+
{
582+
isSubmit && (
583+
<ErrorMessage
584+
invalid={endDateInvalid}
585+
message={endDateInvalidMsg}
586+
/>
587+
)
588+
}
553589
</div>
554590
</div>
555591
<div styleName="row">
@@ -622,7 +658,11 @@ export default class Education extends ConsentComponent {
622658
<input type="hidden" />
623659
</label>
624660
<input id="schoolCollegeName" name="schoolCollegeName" type="text" placeholder="Name" onChange={this.onUpdateInput} value={newEducation.schoolCollegeName} maxLength="64" required />
625-
<ErrorMessage invalid={_.isEmpty(newEducation.schoolCollegeName) && inputChanged} message="Name cannot be empty" />
661+
{
662+
isSubmit && formInvalid && (
663+
<ErrorMessage invalid={_.isEmpty(newEducation.schoolCollegeName)} message="Name cannot be empty" />
664+
)
665+
}
626666
</div>
627667
<div styleName="field col-3">
628668
<label htmlFor="major">
@@ -652,10 +692,14 @@ export default class Education extends ConsentComponent {
652692
onDateChange={date => this.onUpdateDate(date, 'timePeriodFrom')}
653693
placeholder="dd/mm/yyyy"
654694
/>
655-
<ErrorMessage
656-
invalid={this.onCheckStartDate(newEducation).invalid && inputChanged}
657-
message={this.onCheckStartDate(newEducation).message}
658-
/>
695+
{
696+
isSubmit && (
697+
<ErrorMessage
698+
invalid={startDateInvalid}
699+
message={startDateInvalidMsg}
700+
/>
701+
)
702+
}
659703
</div>
660704
<div styleName="field col-date">
661705
<label htmlFor="timePeriodTo">
@@ -685,10 +729,14 @@ export default class Education extends ConsentComponent {
685729
/>
686730
)
687731
}
688-
<ErrorMessage
689-
invalid={this.onCheckEndDate(newEducation).invalid && inputChanged}
690-
message={this.onCheckEndDate(newEducation).message}
691-
/>
732+
{
733+
isSubmit && (
734+
<ErrorMessage
735+
invalid={endDateInvalid}
736+
message={endDateInvalidMsg}
737+
/>
738+
)
739+
}
692740
</div>
693741
<div styleName="field col-checkbox">
694742
<div styleName="tc-checkbox">

0 commit comments

Comments
 (0)