[Bug Bash] Ca profile bug bash - round 3

src/shared/components/InputSelect/index.jsx

@@ -111,7 +111,7 @@ export default class InputSelect extends Component {
     let i = 0;
     let node = e.target;
     const REG = new RegExp(_id);
-    while (node && i < 5) {
+    while (node && i < 20) {
       if (REG.test(node.className)) {
         return true;
       }
@@ -131,6 +131,7 @@ export default class InputSelect extends Component {
       placeholder,
       labelKey,
       options,
+      onKeyPress,
     } = this.props;
 
     const {
@@ -139,9 +140,10 @@ export default class InputSelect extends Component {
       filterVal,
     } = this.state;
 
+    const escapeRegExp = stringToGoIntoTheRegex => stringToGoIntoTheRegex.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'); /* eslint-disable-line no-useless-escape */
     let fiterList = options;
     if (filterVal) {
-      const REG = new RegExp(filterVal, 'i');
+      const REG = new RegExp(escapeRegExp(filterVal), 'i');
       fiterList = filter(options, o => REG.test(o[labelKey]));
     }
     const list = map(fiterList, o => (
@@ -171,7 +173,7 @@ export default class InputSelect extends Component {
             <div styleName="modal">
               <div styleName="modal-input-container">
 
-                <input type="text" onChange={this.onFilterChange} placeholder="Search" />
+                <input type="text" onChange={this.onFilterChange} placeholder="Search" onKeyPress={onKeyPress} />
               </div>
               <div styleName="modal-list-container" onScroll={this.onLoadMore}>
                 {list}
@@ -195,6 +197,7 @@ InputSelect.defaultProps = {
   isLoading: false,
   onChange: () => {},
   onLoadMore: () => {},
+  onKeyPress: () => {},
 };
 
 InputSelect.propTypes = {
@@ -205,6 +208,7 @@ InputSelect.propTypes = {
   placeholder: PT.string,
   onChange: PT.func,
   onLoadMore: PT.func,
+  onKeyPress: PT.func,
   hasMore: PT.bool,
   isLoading: PT.bool,
   disabled: PT.bool,

src/shared/components/Settings/Account/MyAccount/index.jsx

@@ -585,7 +585,7 @@ export default class MyAccount extends ConsentComponent {
                     </div>
                   </div>
                   {
-                    get(profileState, 'credential.hasPassword', false) === false && (
+                    get(profileState, 'credential.hasPassword') === false && (
                       <div styleName="error-message">
                         Since you joined Topcoder using your &lt;SSO Service&gt; account,
                         any email updates will need to be handled by logging in to

src/shared/components/Settings/Preferences/Email/index.jsx

@@ -72,6 +72,13 @@ const programs = [
 
 export default class EmailPreferences extends React.Component {
   saveEmailPreferences = debounce((id, checked) => {
+    // update local state
+    const { emailPreferences, status } = this.state;
+    emailPreferences[id] = checked;
+    this.setState({
+      emailPreferences,
+      status: checked ? 'subscribed' : status,
+    });
     const { email, saveEmailPreferences } = this.props;
     saveEmailPreferences(email, id, checked);
   }, SAVE_DELAY);
@@ -93,19 +100,22 @@ export default class EmailPreferences extends React.Component {
       }
       const { emailPreferences, status } = this.state;
       const { id, checked } = updated;
-      emailPreferences[id] = checked;
+      if (emailPreferences[id] !== checked) {
+        emailPreferences[id] = checked;
 
-      // eslint-disable-next-line react/no-did-update-set-state
-      this.setState({
-        emailPreferences,
-        status: updated.resubscribe ? 'subscribed' : status,
-      });
+        // eslint-disable-next-line react/no-did-update-set-state
+        this.setState({
+          emailPreferences,
+          status: updated.resubscribe ? 'subscribed' : status,
+        });
+      }
       toastrSuccess('Success! ', 'Your email preferences were updated.');
     }
   }
 
   onChange(id, checked) {
-    document.querySelectorAll(`#pre-onoffswitch-${id}`).forEach((el) => { el.checked = checked; }); // eslint-disable-line no-param-reassign
+    // document.querySelectorAll(`#pre-onoffswitch-${id}`).forEach((el) => { el.checked = checked; }); // eslint-disable-line no-param-reassign
+    // update remote state
     this.saveEmailPreferences(id, checked);
   }
 
@@ -144,7 +154,7 @@ export default class EmailPreferences extends React.Component {
                         checked={checked}
                         primaryText={newsletter.name}
                         secondaryText={newsletter.desc}
-                        onToggle={e => this.onChange(newsletter.id, e.target.checked)}
+                        onToggle={c => this.onChange(newsletter.id, c)}
                         disabled={status !== 'subscribed'}
                       />
                     );
@@ -164,7 +174,7 @@ export default class EmailPreferences extends React.Component {
                         checked={checked}
                         primaryText={program.name}
                         secondaryText={program.desc}
-                        onToggle={e => this.onChange(program.id, e.target.checked)}
+                        onToggle={c => this.onChange(program.id, c)}
                         disabled={status !== 'subscribed'}
                       />
                     );

src/shared/components/Settings/Preferences/Personalization/index.jsx

@@ -2,12 +2,16 @@
  * Personalization component.
  */
 import React from 'react';
+import { debounce } from 'lodash';
+
 import PT from 'prop-types';
 
 import ToggleableItem from 'components/Settings/ToggleableItem';
 
 import './styles.scss';
 
+const SAVE_DELAY = 1000;
+
 export default function Personalization({
   addUserTrait,
   handle,
@@ -51,6 +55,10 @@ export default function Personalization({
     }
   };
 
+  const debounceUpdateConsent = debounce(() => {
+    updateConsent();
+  }, SAVE_DELAY);
+
   return (
     <div styleName="Personalization">
       <div styleName="user-consent-container">
@@ -60,7 +68,7 @@ export default function Personalization({
           checked={getUserConsent()}
           primaryText={primaryText}
           secondaryText={secondaryText}
-          onToggle={updateConsent}
+          onToggle={debounceUpdateConsent}
         />
       </div>
     </div>

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

@@ -244,11 +244,11 @@ export default class Language extends ConsentComponent {
       const newLanguageTrait = _.cloneDeep(languageTrait);
 
       if (isEdit) {
-        newLanguageTrait.traits.data.splice(indexNo, 1);
+        newLanguageTrait.traits.data.splice(indexNo, 1, language);
+      } else {
+        newLanguageTrait.traits.data.push(language);
       }
 
-      newLanguageTrait.traits.data.push(language);
-
       updateUserTrait(handle, 'languages', newLanguageTrait.traits.data, tokenV3);
     } else {
       const newLanguages = [];
@@ -441,7 +441,13 @@ export default class Language extends ConsentComponent {
                   <Select
                     name="spokenLevel"
                     options={dropdowns.spokenLevel}
-                    onChange={this.onUpdateSelect}
+                    onChange={(option) => {
+                      if (option) {
+                        this.onUpdateSelect(option);
+                      } else {
+                        this.onUpdateSelect({ key: 'spokenLevel', name: '' });
+                      }
+                    }}
                     value={newLanguage.spokenLevel}
                     placeholder="Spoken level"
                     labelKey="name"
@@ -461,7 +467,13 @@ export default class Language extends ConsentComponent {
                   <Select
                     name="writtenLevel"
                     options={dropdowns.writtenLevel}
-                    onChange={this.onUpdateSelect}
+                    onChange={(option) => {
+                      if (option) {
+                        this.onUpdateSelect(option);
+                      } else {
+                        this.onUpdateSelect({ key: 'writtenLevel', name: '' });
+                      }
+                    }}
                     value={newLanguage.writtenLevel}
                     placeholder="Written level"
                     labelKey="name"

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

@@ -139,12 +139,10 @@ export default class Work extends ConsentComponent {
   }
 
   onUpdateDate(date, timePeriod) {
-    if (date) {
-      const { newWork: oldWork } = this.state;
-      const newWork = { ...oldWork };
-      newWork[timePeriod] = date;
-      this.setState({ newWork, isSubmit: false });
-    }
+    const { newWork: oldWork } = this.state;
+    const newWork = { ...oldWork };
+    newWork[timePeriod] = date;
+    this.setState({ newWork, isSubmit: false });
   }
 
   /**
@@ -174,6 +172,16 @@ export default class Work extends ConsentComponent {
 
     this.setState({
       showConfirmation: false,
+      newWork: {
+        company: '',
+        position: '',
+        cityTown: '',
+        timePeriodFrom: '',
+        timePeriodTo: '',
+        industry: '',
+        working: false,
+      },
+      isEdit: false,
       indexNo: null,
       isSubmit: false,
       formInvalid: false,
@@ -482,11 +490,13 @@ export default class Work extends ConsentComponent {
                 <div styleName="field col-2">
                   <DatePicker
                     readOnly
+                    showClearDate
                     numberOfMonths={1}
                     isOutsideRange={moment().subtract(1, 'd')}
                     date={newWork.timePeriodFrom}
                     id="date-from1"
                     onDateChange={date => this.onUpdateDate(date, 'timePeriodFrom')}
+                    onClearDate={date => this.onUpdateDate('', 'timePeriodFrom')} // eslint-disable-line no-unused-vars
                     placeholder="dd/mm/yyyy"
                   />
                   {
@@ -509,12 +519,14 @@ export default class Work extends ConsentComponent {
                 <div styleName="field col-2">
                   <DatePicker
                     readOnly
+                    showClearDate
                     disabled={endDateDisabled}
                     numberOfMonths={1}
                     isOutsideRange={moment().subtract(1, 'd')}
                     date={newWork.timePeriodTo}
                     id="date-to1"
                     onDateChange={date => this.onUpdateDate(date, 'timePeriodTo')}
+                    onClearDate={date => this.onUpdateDate('', 'timePeriodTo')} // eslint-disable-line no-unused-vars
                     placeholder="dd/mm/yyyy"
                   />
                   {
@@ -633,11 +645,13 @@ export default class Work extends ConsentComponent {
                   </label>
                   <DatePicker
                     readOnly
+                    showClearDate
                     numberOfMonths={1}
                     isOutsideRange={moment().subtract(1, 'd')}
                     date={newWork.timePeriodFrom}
                     id="date-from2"
                     onDateChange={date => this.onUpdateDate(date, 'timePeriodFrom')}
+                    onClearDate={date => this.onUpdateDate('', 'timePeriodFrom')} // eslint-disable-line no-unused-vars
                     placeholder="dd/mm/yyyy"
                   />
                   {
@@ -656,12 +670,14 @@ export default class Work extends ConsentComponent {
                   </label>
                   <DatePicker
                     readOnly
+                    showClearDate
                     disabled={endDateDisabled}
                     numberOfMonths={1}
                     isOutsideRange={moment().subtract(1, 'd')}
                     date={newWork.timePeriodTo}
                     id="date-to2"
                     onDateChange={date => this.onUpdateDate(date, 'timePeriodTo')}
+                    onClearDate={date => this.onUpdateDate('', 'timePeriodTo')} // eslint-disable-line no-unused-vars
                     placeholder="dd/mm/yyyy"
                   />
                   {

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

@@ -349,6 +349,20 @@ label {
       display: none;
     }
   }
+
+  :global {
+    .SingleDatePickerInput_clearDate {
+      height: 35px;
+      width: 35px;
+      display: flex;
+      align-items: center;
+      top: calc(50% - 5px);
+    }
+
+    .SingleDatePickerInput__showClearDate {
+      padding-right: 0;
+    }
+  }
 }
 
 .button-container {

src/shared/components/Settings/ToggleableItem/index.jsx

@@ -5,7 +5,7 @@
  * text, a gray secondary text and a toggle that triggers a function
  * passed via props.
  */
-import React from 'react';
+import React, { useRef } from 'react';
 import PT from 'prop-types';
 import ReactHtmlParser from 'react-html-parser';
 
@@ -20,6 +20,20 @@ export default function ToggleableItem({
   value,
   disabled,
 }) {
+  const inputRef = useRef();
+  const inputMobileRef = useRef();
+
+  const onChange = () => {
+    if (inputRef.current) {
+      inputRef.current.checked = !inputRef.current.checked;
+      onToggle(inputRef.current.checked);
+    }
+    if (inputMobileRef.current) {
+      inputMobileRef.current.checked = !inputMobileRef.current.checked;
+      onToggle(inputMobileRef.current.checked);
+    }
+  };
+
   return (
     <div styleName="ToggleableItem">
       <div styleName="body">
@@ -32,12 +46,13 @@ export default function ToggleableItem({
       </div>
       <div className="onoffswitch" styleName="onoffswitch-no-padding-right">
         <input
+          ref={inputRef}
           type="checkbox"
           name="eprf-onoffswitch"
           id={`pre-onoffswitch-${id}`}
           value={value}
           checked={checked}
-          onChange={onToggle}
+          onChange={onChange}
           className="onoffswitch-checkbox"
           disabled={disabled}
         />
@@ -49,12 +64,13 @@ export default function ToggleableItem({
       </div>
       <div className="onoffswitch-mobile" styleName="onoffswitch-no-padding-right">
         <input
+          ref={inputMobileRef}
           type="checkbox"
           name="eprf-onoffswitch"
           id={`pre-onoffswitch-${id}`}
           value={value}
           checked={checked}
-          onChange={onToggle}
+          onChange={onChange}
           className="onoffswitch-checkbox"
           disabled={disabled}
         />