Fix issues of Topcoder Member Profile UI Fixes and Enhancements - Part 2

src/shared/components/Settings/Profile/Education/List/Item/index.jsx

@@ -32,6 +32,51 @@ export default function Item(props) {
     return true;
   };
 
+  const getDate = () => {
+    let start = '';
+    if (!_.isEmpty(education.timePeriodFrom)) {
+      start = moment(education.timePeriodFrom).format('YYYY');
+    }
+    let end = '';
+    if (!_.isEmpty(education.timePeriodTo)) {
+      end = moment(education.timePeriodTo).format('YYYY');
+    }
+
+    if (_.isEmpty(start) && _.isEmpty(end)) {
+      return '';
+    }
+
+    if (!_.isEmpty(start) && !_.isEmpty(end)) {
+      return `${start} - ${end} `;
+    }
+
+    if (!_.isEmpty(start) && _.isEmpty(end)) {
+      return `${start} `;
+    }
+
+    if (_.isEmpty(start) && !_.isEmpty(end)) {
+      return `${end} `;
+    }
+
+    return '';
+  };
+
+  const getGraduated = () => {
+    const date = getDate();
+    if (!_.isEmpty(date)) {
+      if (education.graduated) {
+        return '| Graduated';
+      }
+
+      return '';
+    }
+
+    if (education.graduated) {
+      return 'Graduated';
+    }
+    return '';
+  };
+
   return (
     <div styleName="container">
       <div styleName="education-info">
@@ -47,20 +92,14 @@ export default function Item(props) {
               <React.Fragment>
                 <div styleName="parameter-second-line">
                   {
-                    `${!_.isEmpty(education.timePeriodFrom) && !_.isEmpty(education.timePeriodTo) && !education.graduated ? `${moment(education.timePeriodFrom).format('YYYY')} - ${moment(education.timePeriodTo).format('YYYY')}` : ''}`
-                  }
-                  {
-                    _.isEmpty(education.timePeriodFrom) && _.isEmpty(education.timePeriodTo) && `${education.graduated ? 'Graduated' : ''}`
-                  }
-                  {
-                    !_.isEmpty(education.timePeriodFrom) && !_.isEmpty(education.timePeriodTo) && education.graduated && `${moment(education.timePeriodFrom).format('YYYY')} - ${moment(education.timePeriodTo).format('YYYY')} | Graduated`
+                    `${getDate()}${getGraduated()}`
                   }
                 </div>
                 <div styleName="parameter-second-line-mobile">
                   {
-                    !_.isEmpty(education.timePeriodFrom) && !_.isEmpty(education.timePeriodTo) && (
+                    !_.isEmpty(getDate()) && (
                       <p>
-                        {`${moment(education.timePeriodFrom).format('YYYY')} - ${moment(education.timePeriodTo).format('YYYY')}`}
+                        {`${getDate()}`}
                       </p>
                     )
                   }

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

@@ -91,43 +91,41 @@ export default class Education extends ConsentComponent {
    */
   onCheckFormValue(newEducation) {
     let invalid = false;
-    let haveDate = false;
     const currentDate = new Date().setHours(0, 0, 0, 0);
 
     if (!_.trim(newEducation.schoolCollegeName).length) {
       invalid = true;
     }
 
-
-    if (!_.isEmpty(newEducation.timePeriodFrom) && !_.isEmpty(newEducation.timePeriodTo)) {
+    if (_.isEmpty(newEducation.timePeriodFrom) && !_.isEmpty(newEducation.timePeriodTo)) {
+      // If enter End Date, the other becomes mandatory.
+      // Not as per requirement, both are optional
+      invalid = true;
+    } 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 > toDate) {
-        haveDate = true;
+      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) {
-        haveDate = true;
+        invalid = true; // Start Date should be in past or current
       }
 
-      if ((toDate > currentDate) && newEducation.graduated) {
-        haveDate = true;
-      }
-    }
-
-    if (!haveDate
-      && !(_.isEmpty(newEducation.timePeriodFrom) && _.isEmpty(newEducation.timePeriodTo))) {
-      if (!_.trim(newEducation.timePeriodFrom).length) {
+      if (fromDate >= toDate) { // Start Date should be before End Date
         invalid = true;
       }
 
-      if (!_.trim(newEducation.timePeriodTo).length) {
-        invalid = true;
+      if (newEducation.graduated) {
+        if (toDate > currentDate) {
+          invalid = true; // End Date should be in past or current
+        }
       }
     }
 
-
     this.setState({ formInvalid: invalid });
     return invalid;
   }
@@ -140,26 +138,32 @@ export default class Education extends ConsentComponent {
       message: '',
     };
 
-    if (!_.isEmpty(newEducation.timePeriodFrom) && !_.isEmpty(newEducation.timePeriodTo)) {
-      let fromDate = new Date(newEducation.timePeriodFrom);
-      fromDate = fromDate.setHours(0, 0, 0, 0);
-      let toDate = new Date(newEducation.timePeriodTo);
-      toDate = toDate.setHours(0, 0, 0, 0);
 
-      if (fromDate > toDate) {
+    if (_.isEmpty(newEducation.timePeriodFrom) && !_.isEmpty(newEducation.timePeriodTo)) {
+      // If enter End Date, the other becomes mandatory.
+      // Not as per requirement, both are optional
+      result.invalid = true;
+      result.message = 'Start Date cannot be empty';
+    } else if (!_.isEmpty(newEducation.timePeriodFrom) && _.isEmpty(newEducation.timePeriodTo)) {
+      const fromDate = new Date(newEducation.timePeriodFrom).setHours(0, 0, 0, 0);
+
+      if (fromDate > currentDate) {
         result.invalid = true;
-        result.message = 'Start Date should be before End Date';
+        result.message = '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) {
         result.invalid = true;
-        result.message = result.message.length > 0 ? `${result.message} and in past or current` : 'Start Date should be in past or current';
+        result.message = 'Start Date should be in past or current';
       }
-    }
 
-    if (_.isEmpty(newEducation.timePeriodFrom) && !_.isEmpty(newEducation.timePeriodTo)) {
-      result.invalid = true;
-      result.message = 'Due to End Date has date, Start Date should be input';
+      if (fromDate >= toDate) {
+        result.invalid = true;
+        result.message = 'Start Date should be before End Date';
+      }
     }
 
     return result;
@@ -176,17 +180,12 @@ export default class Education extends ConsentComponent {
     if (!_.isEmpty(newEducation.timePeriodFrom) && !_.isEmpty(newEducation.timePeriodTo)) {
       const toDate = new Date(newEducation.timePeriodTo).setHours(0, 0, 0, 0);
 
-      if ((toDate > currentDate) && newEducation.graduated) {
+      if (newEducation.graduated && (toDate > currentDate)) {
         result.invalid = true;
-        result.message = 'End Date (or expected) should be in past or current';
+        result.message = 'End Date should be in past or current';
       }
     }
 
-    if (!_.isEmpty(newEducation.timePeriodFrom) && _.isEmpty(newEducation.timePeriodTo)) {
-      result.invalid = true;
-      result.message = 'Due to Start Date has date, End Date should be input';
-    }
-
     return result;
   }
 
@@ -235,6 +234,7 @@ export default class Education extends ConsentComponent {
       showConfirmation: false,
       indexNo: null,
       inputChanged: false,
+      isEdit: false,
     });
   }
 
@@ -295,7 +295,7 @@ export default class Education extends ConsentComponent {
     }
 
     if (educationTrait.traits && educationTrait.traits.data.length > 0) {
-      const newEducationTrait = { ...educationTrait };
+      const newEducationTrait = _.cloneDeep(educationTrait);
       if (isEdit) {
         newEducationTrait.traits.data.splice(indexNo, 1);
       }
@@ -343,9 +343,6 @@ export default class Education extends ConsentComponent {
       newEducation[e.target.name] = e.target.value;
     } else {
       newEducation[e.target.name] = e.target.checked;
-      if (e.target.checked) {
-        newEducation.timePeriodTo = '';
-      }
     }
 
     this.setState({ newEducation, inputChanged: true });
@@ -507,13 +504,18 @@ export default class Education extends ConsentComponent {
                 </div>
               </div>
               <div styleName="row">
-                <div styleName="field col-1-no-padding">
+                <div styleName={`field ${_.isEmpty(newEducation.timePeriodTo) ? 'col-1-no-padding' : 'col-1'}`}>
                   <label htmlFor="timePeriodFrom">
                     Start Date
                     <input type="hidden" />
                   </label>
                 </div>
                 <div styleName="field col-2">
+                  {
+                    !_.isEmpty(newEducation.timePeriodTo) && (
+                      <span styleName="text-required">* Required</span>
+                    )
+                  }
                   <DatePicker
                     readOnly
                     numberOfMonths={1}
@@ -650,6 +652,11 @@ export default class Education extends ConsentComponent {
                 <div styleName="field col-date">
                   <label htmlFor="timePeriodFrom">
                     Start Date
+                    {
+                      !_.isEmpty(newEducation.timePeriodTo) && (
+                        <span styleName="text-required">* Required</span>
+                      )
+                    }
                     <input type="hidden" />
                   </label>
                   <DatePicker

src/shared/components/Settings/Profile/Hobby/index.jsx

@@ -164,7 +164,7 @@ export default class Hobby extends ConsentComponent {
 
     // save hobby
     if (hobbyTrait.traits && hobbyTrait.traits.data.length > 0) {
-      const newHobbyTrait = { ...hobbyTrait };
+      const newHobbyTrait = _.cloneDeep(hobbyTrait);
       if (isEdit) {
         newHobbyTrait.traits.data.splice(indexNo, 1);
       }

src/shared/components/Settings/Profile/Language/index.jsx

@@ -206,7 +206,7 @@ export default class Language extends ConsentComponent {
       delete language.writtenLevel;
     }
     if (languageTrait.traits && languageTrait.traits.data.length > 0) {
-      const newLanguageTrait = { ...languageTrait };
+      const newLanguageTrait = _.cloneDeep(languageTrait);
 
       if (isEdit) {
         newLanguageTrait.traits.data.splice(indexNo, 1);

src/shared/components/Settings/Profile/Skills/index.jsx

@@ -93,7 +93,7 @@ export default class Skills extends ConsentComponent {
       totalPage: 0,
       isMobileView: false,
       screenSM: 767,
-      deleteSKill: null,
+      deleteSkill: null,
       deleteSelector: null,
       showConfirmation: false,
       inputChanged: false,
@@ -401,7 +401,7 @@ export default class Skills extends ConsentComponent {
     newSkill[category] = result.length > 0 ? result.slice() : [];
     deleteUserSkill(handle, skill, tokenV3);
     this.setState({
-      deleteSKill: null,
+      deleteSkill: null,
       deleteSelector: null,
       showConfirmation: false,
       inputChanged: false,

src/shared/components/Settings/Profile/Work/List/Item/index.jsx

@@ -25,7 +25,7 @@ export default function Item(props) {
 
   const hasSecondLine = () => {
     if (_.isEmpty(work.timePeriodFrom) && _.isEmpty(work.timePeriodTo)
-      && _.isEmpty(work.position)) {
+      && _.isEmpty(work.position) && !work.working) {
       return false;
     }
 
@@ -43,15 +43,27 @@ export default function Item(props) {
             { `${work.company}${_.isEmpty(work.industry) ? '' : ` | ${work.industry}`}${_.isEmpty(work.cityTown) ? '' : ` | ${work.cityTown}`}` }
           </div>
           <div styleName="parameter-second-line">
-            { `${!_.isEmpty(work.timePeriodFrom) ? moment(work.timePeriodFrom).format('YYYY') : ''}${!_.isEmpty(work.timePeriodTo) ? ` - ${moment(work.timePeriodTo).format('YYYY')}` : ''}${!_.isEmpty(work.position) && (!_.isEmpty(work.timePeriodTo) || !_.isEmpty(work.timePeriodFrom)) ? ' | ' : ''}${!_.isEmpty(work.position) ? `${work.position}` : ''}${work.working ? ' Current' : ''}` }
+            { `${!_.isEmpty(work.timePeriodFrom) ? moment(work.timePeriodFrom).format('YYYY') : ''}${!_.isEmpty(work.timePeriodTo) ? ` - ${moment(work.timePeriodTo).format('YYYY')}` : ''}${!_.isEmpty(work.position) && (!_.isEmpty(work.timePeriodTo) || !_.isEmpty(work.timePeriodFrom)) ? ' | ' : ''}${!_.isEmpty(work.position) ? `${work.position}` : ''}` }
           </div>
+          {
+            work.working && (
+              <div styleName="parameter-second-line">
+                Current
+              </div>
+            )
+          }
           <div styleName="parameter-second-line-mobile">
             <p>
               {`${!_.isEmpty(work.timePeriodFrom) ? moment(work.timePeriodFrom).format('YYYY') : ''}${!_.isEmpty(work.timePeriodTo) ? ` - ${moment(work.timePeriodTo).format('YYYY')}` : ''}`}
             </p>
             <p>
-              {`${!_.isEmpty(work.position) ? `${work.position}` : ''}${work.working ? ' Current' : ''}`}
+              {`${!_.isEmpty(work.position) ? `${work.position}` : ''}`}
             </p>
+            {
+              work.working && (
+                <p>Current</p>
+              )
+            }
           </div>
         </div>
       </div>

src/shared/components/Settings/Profile/Work/List/Item/styles.scss

@@ -58,7 +58,8 @@
   }
 }
 
-.parameter-second-line {
+.parameter-second-line,
+.parameter-third-line {
   color: $tc-gray-50;
   font-weight: 400;
   word-break: break-all;