Skip to content

Commit 2fde8b7

Browse files
update toggle item
1 parent 7f46f4b commit 2fde8b7

File tree

3 files changed

+47
-13
lines changed

3 files changed

+47
-13
lines changed

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

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -93,19 +93,29 @@ export default class EmailPreferences extends React.Component {
9393
}
9494
const { emailPreferences, status } = this.state;
9595
const { id, checked } = updated;
96-
emailPreferences[id] = checked;
96+
if (emailPreferences[id] !== checked) {
97+
emailPreferences[id] = checked;
9798

98-
// eslint-disable-next-line react/no-did-update-set-state
99-
this.setState({
100-
emailPreferences,
101-
status: updated.resubscribe ? 'subscribed' : status,
102-
});
99+
// eslint-disable-next-line react/no-did-update-set-state
100+
this.setState({
101+
emailPreferences,
102+
status: updated.resubscribe ? 'subscribed' : status,
103+
});
104+
}
103105
toastrSuccess('Success! ', 'Your email preferences were updated.');
104106
}
105107
}
106108

107109
onChange(id, checked) {
108-
document.querySelectorAll(`#pre-onoffswitch-${id}`).forEach((el) => { el.checked = checked; }); // eslint-disable-line no-param-reassign
110+
// document.querySelectorAll(`#pre-onoffswitch-${id}`).forEach((el) => { el.checked = checked; }); // eslint-disable-line no-param-reassign
111+
// update local state
112+
const { emailPreferences, status } = this.state;
113+
emailPreferences[id] = checked;
114+
this.setState({
115+
emailPreferences,
116+
status: checked ? 'subscribed' : status,
117+
});
118+
// update remote state
109119
this.saveEmailPreferences(id, checked);
110120
}
111121

@@ -144,7 +154,7 @@ export default class EmailPreferences extends React.Component {
144154
checked={checked}
145155
primaryText={newsletter.name}
146156
secondaryText={newsletter.desc}
147-
onToggle={e => this.onChange(newsletter.id, e.target.checked)}
157+
onToggle={c => this.onChange(newsletter.id, c)}
148158
disabled={status !== 'subscribed'}
149159
/>
150160
);
@@ -164,7 +174,7 @@ export default class EmailPreferences extends React.Component {
164174
checked={checked}
165175
primaryText={program.name}
166176
secondaryText={program.desc}
167-
onToggle={e => this.onChange(program.id, e.target.checked)}
177+
onToggle={c => this.onChange(program.id, c)}
168178
disabled={status !== 'subscribed'}
169179
/>
170180
);

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

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,16 @@
22
* Personalization component.
33
*/
44
import React from 'react';
5+
import { debounce } from 'lodash';
6+
57
import PT from 'prop-types';
68

79
import ToggleableItem from 'components/Settings/ToggleableItem';
810

911
import './styles.scss';
1012

13+
const SAVE_DELAY = 1000;
14+
1115
export default function Personalization({
1216
addUserTrait,
1317
handle,
@@ -51,6 +55,10 @@ export default function Personalization({
5155
}
5256
};
5357

58+
const debounceUpdateConsent = debounce(() => {
59+
updateConsent();
60+
}, SAVE_DELAY);
61+
5462
return (
5563
<div styleName="Personalization">
5664
<div styleName="user-consent-container">
@@ -60,7 +68,7 @@ export default function Personalization({
6068
checked={getUserConsent()}
6169
primaryText={primaryText}
6270
secondaryText={secondaryText}
63-
onToggle={updateConsent}
71+
onToggle={debounceUpdateConsent}
6472
/>
6573
</div>
6674
</div>

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

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
* text, a gray secondary text and a toggle that triggers a function
66
* passed via props.
77
*/
8-
import React from 'react';
8+
import React, { useRef } from 'react';
99
import PT from 'prop-types';
1010
import ReactHtmlParser from 'react-html-parser';
1111

@@ -20,6 +20,20 @@ export default function ToggleableItem({
2020
value,
2121
disabled,
2222
}) {
23+
const inputRef = useRef();
24+
const inputMobileRef = useRef();
25+
26+
const onChange = () => {
27+
if (inputRef.current) {
28+
inputRef.current.checked = !inputRef.current.checked;
29+
onToggle(inputRef.current.checked);
30+
}
31+
if (inputMobileRef.current) {
32+
inputMobileRef.current.checked = !inputMobileRef.current.checked;
33+
onToggle(inputMobileRef.current.checked);
34+
}
35+
};
36+
2337
return (
2438
<div styleName="ToggleableItem">
2539
<div styleName="body">
@@ -32,12 +46,13 @@ export default function ToggleableItem({
3246
</div>
3347
<div className="onoffswitch" styleName="onoffswitch-no-padding-right">
3448
<input
49+
ref={inputRef}
3550
type="checkbox"
3651
name="eprf-onoffswitch"
3752
id={`pre-onoffswitch-${id}`}
3853
value={value}
3954
checked={checked}
40-
onChange={onToggle}
55+
onChange={onChange}
4156
className="onoffswitch-checkbox"
4257
disabled={disabled}
4358
/>
@@ -49,12 +64,13 @@ export default function ToggleableItem({
4964
</div>
5065
<div className="onoffswitch-mobile" styleName="onoffswitch-no-padding-right">
5166
<input
67+
ref={inputMobileRef}
5268
type="checkbox"
5369
name="eprf-onoffswitch"
5470
id={`pre-onoffswitch-${id}`}
5571
value={value}
5672
checked={checked}
57-
onChange={onToggle}
73+
onChange={onChange}
5874
className="onoffswitch-checkbox"
5975
disabled={disabled}
6076
/>

0 commit comments

Comments
 (0)