update toggle item

Author: LieutenantRoger

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

@@ -93,19 +93,29 @@ 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 local state
+    const { emailPreferences, status } = this.state;
+    emailPreferences[id] = checked;
+    this.setState({
+      emailPreferences,
+      status: checked ? 'subscribed' : status,
+    });
+    // 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/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}
         />