From ac3df988f2327f9deec82e15a278e0ffbb7b4c1d Mon Sep 17 00:00:00 2001
From: Guri <guri.topcoder@gmail.com>
Date: Tue, 28 May 2019 19:26:53 +0530
Subject: [PATCH 1/2] PR with changes from F2F for Language / Work and
 Education

---
 .../Settings/Profile/Education/index.jsx      | 54 ++++++++++++++++--
 .../Settings/Profile/Education/styles.scss    |  4 +-
 .../Settings/Profile/Work/index.jsx           | 55 +++++++++++++++++--
 .../Settings/Profile/Work/styles.scss         |  4 +-
 src/shared/reducers/page/ui/settings.js       |  8 +--
 5 files changed, 109 insertions(+), 16 deletions(-)

diff --git a/src/shared/components/Settings/Profile/Education/index.jsx b/src/shared/components/Settings/Profile/Education/index.jsx
index 5a37110216..24c8cd0bb4 100644
--- a/src/shared/components/Settings/Profile/Education/index.jsx
+++ b/src/shared/components/Settings/Profile/Education/index.jsx
@@ -9,9 +9,11 @@
 import React from 'react';
 import PT from 'prop-types';
 import _ from 'lodash';
+import moment from 'moment';
 import Select from 'components/Select';
 import ConsentComponent from 'components/Settings/ConsentComponent';
 import { PrimaryButton } from 'topcoder-react-ui-kit';
+import DatePicker from 'components/challenge-listing/Filters/DatePicker';
 import dropdowns from './dropdowns.json';
 import EducationList from './List';
 
@@ -30,6 +32,7 @@ export default class Education extends ConsentComponent {
     this.onAddEducation = this.onAddEducation.bind(this);
     this.loadPersonalizationTrait = this.loadPersonalizationTrait.bind(this);
     this.updatePredicate = this.updatePredicate.bind(this);
+    this.onUpdateDate = this.onUpdateDate.bind(this);
 
     const { userTraits } = props;
     this.state = {
@@ -138,7 +141,7 @@ export default class Education extends ConsentComponent {
 
 
     if (errorMessage.length > 0) {
-      errorMessage = `${errorMessage}. ${dateError}`;
+      errorMessage = `${errorMessage}. \n${dateError}`;
     } else if (dateError.length > 0) {
       errorMessage = dateError;
       invalid = dateInvalid;
@@ -152,6 +155,15 @@ export default class Education extends ConsentComponent {
     this.showConsent(this.onDeleteEducation.bind(this, indexNo));
   }
 
+  onUpdateDate(date, timePeriod) {
+    if (date) {
+      const { newEducation: oldEducation } = this.state;
+      const newEducation = { ...oldEducation };
+      newEducation[timePeriod] = date;
+      this.setState({ newEducation });
+    }
+  }
+
   /**
    * Delete education by index
    * @param indexNo the education index no
@@ -398,7 +410,15 @@ export default class Education extends ConsentComponent {
                 </div>
                 <div styleName="field col-2">
                   <span styleName="text-required">* Required</span>
-                  <input id="timePeriodFrom" styleName="date-input" name="timePeriodFrom" type="date" onChange={this.onUpdateInput} value={newEducation.timePeriodFrom} required />
+                  <DatePicker
+                    readOnly
+                    numberOfMonths={1}
+                    isOutsideRange={moment()}
+                    date={newEducation.timePeriodFrom}
+                    id="date-from1"
+                    onDateChange={date => this.onUpdateDate(date, 'timePeriodFrom')}
+                    placeholder="dd/mm/yyy"
+                  />
                 </div>
               </div>
               <div styleName="row">
@@ -410,7 +430,15 @@ export default class Education extends ConsentComponent {
                 </div>
                 <div styleName="field col-2">
                   <span styleName="text-required">* Required</span>
-                  <input id="timePeriodTo" styleName="date-input" name="timePeriodTo" type="date" onChange={this.onUpdateInput} value={newEducation.timePeriodTo} required />
+                  <DatePicker
+                    readOnly
+                    numberOfMonths={1}
+                    isOutsideRange={moment()}
+                    date={newEducation.timePeriodTo}
+                    id="date-to1"
+                    onDateChange={date => this.onUpdateDate(date, 'timePeriodTo')}
+                    placeholder="dd/mm/yyy"
+                  />
                 </div>
               </div>
               <div styleName="row">
@@ -493,14 +521,30 @@ export default class Education extends ConsentComponent {
                     From
                     <input type="hidden" />
                   </label>
-                  <input id="timePeriodFrom" styleName="date-input" name="timePeriodFrom" type="date" onChange={this.onUpdateInput} value={newEducation.timePeriodFrom} required />
+                  <DatePicker
+                    readOnly
+                    numberOfMonths={1}
+                    isOutsideRange={moment()}
+                    date={newEducation.timePeriodFrom}
+                    id="date-from2"
+                    onDateChange={date => this.onUpdateDate(date, 'timePeriodFrom')}
+                    placeholder="dd/mm/yyy"
+                  />
                 </div>
                 <div styleName="field col-date">
                   <label htmlFor="timePeriodTo">
                     To
                     <input type="hidden" />
                   </label>
-                  <input id="timePeriodTo" styleName="date-input" name="timePeriodTo" type="date" onChange={this.onUpdateInput} value={newEducation.timePeriodTo} required />
+                  <DatePicker
+                    readOnly
+                    numberOfMonths={1}
+                    isOutsideRange={moment()}
+                    date={newEducation.timePeriodTo}
+                    id="date-to2"
+                    onDateChange={date => this.onUpdateDate(date, 'timePeriodTo')}
+                    placeholder="dd/mm/yyy"
+                  />
                 </div>
                 <div styleName="field col-checkbox">
                   <div styleName="tc-checkbox">
diff --git a/src/shared/components/Settings/Profile/Education/styles.scss b/src/shared/components/Settings/Profile/Education/styles.scss
index 8d8827ffd2..46d598c983 100644
--- a/src/shared/components/Settings/Profile/Education/styles.scss
+++ b/src/shared/components/Settings/Profile/Education/styles.scss
@@ -70,8 +70,10 @@ $checkbox-bg-selected: $tc-dark-blue;
     background-color: $tc-red-10;
     color: $tc-red-110;
     font-size: 15px;
-    padding: 15px;
+    line-height: 21px;
+    padding: 12px 15px;
     margin-bottom: 15px;
+    white-space: pre-line;
   }
 }
 
diff --git a/src/shared/components/Settings/Profile/Work/index.jsx b/src/shared/components/Settings/Profile/Work/index.jsx
index 51f10faaf9..d7682d3eda 100644
--- a/src/shared/components/Settings/Profile/Work/index.jsx
+++ b/src/shared/components/Settings/Profile/Work/index.jsx
@@ -9,8 +9,10 @@
 import React from 'react';
 import PT from 'prop-types';
 import _ from 'lodash';
+import moment from 'moment';
 import ConsentComponent from 'components/Settings/ConsentComponent';
 import { PrimaryButton } from 'topcoder-react-ui-kit';
+import DatePicker from 'components/challenge-listing/Filters/DatePicker';
 import WorkList from './List';
 
 import './styles.scss';
@@ -27,6 +29,8 @@ export default class Work extends ConsentComponent {
     this.onAddWork = this.onAddWork.bind(this);
     this.loadPersonalizationTrait = this.loadPersonalizationTrait.bind(this);
     this.updatePredicate = this.updatePredicate.bind(this);
+    this.onUpdateDate = this.onUpdateDate.bind(this);
+
     const { userTraits } = props;
     this.state = {
       formInvalid: false,
@@ -153,7 +157,7 @@ export default class Work extends ConsentComponent {
 
 
     if (errorMessage.length > 0) {
-      errorMessage = `${errorMessage}. ${dateError}`;
+      errorMessage = `${errorMessage}. \n${dateError}`;
     } else if (dateError.length > 0) {
       errorMessage = dateError;
       invalid = dateInvalid;
@@ -167,6 +171,15 @@ export default class Work extends ConsentComponent {
     this.showConsent(this.onDeleteWork.bind(this, indexNo));
   }
 
+  onUpdateDate(date, timePeriod) {
+    if (date) {
+      const { newWork: oldWork } = this.state;
+      const newWork = { ...oldWork };
+      newWork[timePeriod] = date;
+      this.setState({ newWork });
+    }
+  }
+
   /**
    * Delete work by index
    * @param indexNo the work index no
@@ -376,7 +389,15 @@ export default class Work extends ConsentComponent {
                 </div>
                 <div styleName="field col-2">
                   <span styleName="text-required">* Required</span>
-                  <input id="timePeriodFrom" styleName="date-input" name="timePeriodFrom" type="date" onChange={this.onUpdateInput} value={newWork.timePeriodFrom} required />
+                  <DatePicker
+                    readOnly
+                    numberOfMonths={1}
+                    isOutsideRange={moment()}
+                    date={newWork.timePeriodFrom}
+                    id="date-from1"
+                    onDateChange={date => this.onUpdateDate(date, 'timePeriodFrom')}
+                    placeholder="dd/mm/yyy"
+                  />
                 </div>
               </div>
               <div styleName="row">
@@ -388,7 +409,15 @@ export default class Work extends ConsentComponent {
                 </div>
                 <div styleName="field col-2">
                   <span styleName="text-required">* Required</span>
-                  <input id="timePeriodTo" styleName="date-input" name="timePeriodTo" type="date" onChange={this.onUpdateInput} value={newWork.timePeriodTo} required />
+                  <DatePicker
+                    readOnly
+                    numberOfMonths={1}
+                    isOutsideRange={moment()}
+                    date={newWork.timePeriodTo}
+                    id="date-to1"
+                    onDateChange={date => this.onUpdateDate(date, 'timePeriodTo')}
+                    placeholder="dd/mm/yyy"
+                  />
                 </div>
               </div>
             </form>
@@ -444,14 +473,30 @@ export default class Work extends ConsentComponent {
                     From
                     <input type="hidden" />
                   </label>
-                  <input id="timePeriodFrom" styleName="date-input" name="timePeriodFrom" type="date" onChange={this.onUpdateInput} value={newWork.timePeriodFrom} required />
+                  <DatePicker
+                    readOnly
+                    numberOfMonths={1}
+                    isOutsideRange={moment()}
+                    date={newWork.timePeriodFrom}
+                    id="date-from2"
+                    onDateChange={date => this.onUpdateDate(date, 'timePeriodFrom')}
+                    placeholder="dd/mm/yyy"
+                  />
                 </div>
                 <div styleName="field col-date">
                   <label htmlFor="timePeriodTo">
                     To
                     <input type="hidden" />
                   </label>
-                  <input id="timePeriodTo" styleName="date-input" name="timePeriodTo" type="date" onChange={this.onUpdateInput} value={newWork.timePeriodTo} required />
+                  <DatePicker
+                    readOnly
+                    numberOfMonths={1}
+                    isOutsideRange={moment()}
+                    date={newWork.timePeriodTo}
+                    id="date-to2"
+                    onDateChange={date => this.onUpdateDate(date, 'timePeriodTo')}
+                    placeholder="dd/mm/yyy"
+                  />
                 </div>
               </div>
             </form>
diff --git a/src/shared/components/Settings/Profile/Work/styles.scss b/src/shared/components/Settings/Profile/Work/styles.scss
index cd87cb90dd..2bb6ef2d58 100644
--- a/src/shared/components/Settings/Profile/Work/styles.scss
+++ b/src/shared/components/Settings/Profile/Work/styles.scss
@@ -66,8 +66,10 @@ $checkbox-bg-selected: $tc-dark-blue;
     background-color: $tc-red-10;
     color: $tc-red-110;
     font-size: 15px;
-    padding: 15px;
     margin-bottom: 15px;
+    line-height: 21px;
+    padding: 12px 15px;
+    white-space: pre-line;
   }
 }
 
diff --git a/src/shared/reducers/page/ui/settings.js b/src/shared/reducers/page/ui/settings.js
index b4271aa531..16d69c61f0 100644
--- a/src/shared/reducers/page/ui/settings.js
+++ b/src/shared/reducers/page/ui/settings.js
@@ -9,11 +9,11 @@ import settingsActions from 'actions/page/ui/settings';
 const TABS = {
   PROFILE: {
     BASIC: 'basic info',
-    // LANGUAGE: 'language',
-    SKILL: 'skills',
-    // EDUCATION: 'education',
-    // WORK: 'work',
+    LANGUAGE: 'language',
+    EDUCATION: 'education',
+    WORK: 'work',
     // ORGANIZATION: 'organization',
+    SKILL: 'skills',
     HOBBY: 'hobbies',
     COMMUNITY: 'communities',
   },

From 84544c6d65d5e7df10a5b7254dd15a7f3b1ec28a Mon Sep 17 00:00:00 2001
From: Guri <guri.topcoder@gmail.com>
Date: Wed, 29 May 2019 11:46:39 +0530
Subject: [PATCH 2/2] fix yyy display for date fields

---
 .../components/Settings/Profile/Education/index.jsx       | 8 ++++----
 src/shared/components/Settings/Profile/Work/index.jsx     | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/shared/components/Settings/Profile/Education/index.jsx b/src/shared/components/Settings/Profile/Education/index.jsx
index 24c8cd0bb4..326ce05fc5 100644
--- a/src/shared/components/Settings/Profile/Education/index.jsx
+++ b/src/shared/components/Settings/Profile/Education/index.jsx
@@ -417,7 +417,7 @@ export default class Education extends ConsentComponent {
                     date={newEducation.timePeriodFrom}
                     id="date-from1"
                     onDateChange={date => this.onUpdateDate(date, 'timePeriodFrom')}
-                    placeholder="dd/mm/yyy"
+                    placeholder="dd/mm/yyyy"
                   />
                 </div>
               </div>
@@ -437,7 +437,7 @@ export default class Education extends ConsentComponent {
                     date={newEducation.timePeriodTo}
                     id="date-to1"
                     onDateChange={date => this.onUpdateDate(date, 'timePeriodTo')}
-                    placeholder="dd/mm/yyy"
+                    placeholder="dd/mm/yyyy"
                   />
                 </div>
               </div>
@@ -528,7 +528,7 @@ export default class Education extends ConsentComponent {
                     date={newEducation.timePeriodFrom}
                     id="date-from2"
                     onDateChange={date => this.onUpdateDate(date, 'timePeriodFrom')}
-                    placeholder="dd/mm/yyy"
+                    placeholder="dd/mm/yyyy"
                   />
                 </div>
                 <div styleName="field col-date">
@@ -543,7 +543,7 @@ export default class Education extends ConsentComponent {
                     date={newEducation.timePeriodTo}
                     id="date-to2"
                     onDateChange={date => this.onUpdateDate(date, 'timePeriodTo')}
-                    placeholder="dd/mm/yyy"
+                    placeholder="dd/mm/yyyy"
                   />
                 </div>
                 <div styleName="field col-checkbox">
diff --git a/src/shared/components/Settings/Profile/Work/index.jsx b/src/shared/components/Settings/Profile/Work/index.jsx
index d7682d3eda..c3ad06f23a 100644
--- a/src/shared/components/Settings/Profile/Work/index.jsx
+++ b/src/shared/components/Settings/Profile/Work/index.jsx
@@ -396,7 +396,7 @@ export default class Work extends ConsentComponent {
                     date={newWork.timePeriodFrom}
                     id="date-from1"
                     onDateChange={date => this.onUpdateDate(date, 'timePeriodFrom')}
-                    placeholder="dd/mm/yyy"
+                    placeholder="dd/mm/yyyy"
                   />
                 </div>
               </div>
@@ -416,7 +416,7 @@ export default class Work extends ConsentComponent {
                     date={newWork.timePeriodTo}
                     id="date-to1"
                     onDateChange={date => this.onUpdateDate(date, 'timePeriodTo')}
-                    placeholder="dd/mm/yyy"
+                    placeholder="dd/mm/yyyy"
                   />
                 </div>
               </div>
@@ -480,7 +480,7 @@ export default class Work extends ConsentComponent {
                     date={newWork.timePeriodFrom}
                     id="date-from2"
                     onDateChange={date => this.onUpdateDate(date, 'timePeriodFrom')}
-                    placeholder="dd/mm/yyy"
+                    placeholder="dd/mm/yyyy"
                   />
                 </div>
                 <div styleName="field col-date">
@@ -495,7 +495,7 @@ export default class Work extends ConsentComponent {
                     date={newWork.timePeriodTo}
                     id="date-to2"
                     onDateChange={date => this.onUpdateDate(date, 'timePeriodTo')}
-                    placeholder="dd/mm/yyy"
+                    placeholder="dd/mm/yyyy"
                   />
                 </div>
               </div>