Skip to content

Commit ce8b675

Browse files
ThomasKranitsasThomasKranitsas
authored
Merge pull request #2317 from applehit16/fix-settings-notifications-improve
#2096 Fix settings notifications not showing when update user traits
2 parents e20f221 + 5a1df6c commit ce8b675

File tree

11 files changed

+180
-216
lines changed

11 files changed

+180
-216
lines changed

‎__tests__/shared/components/Settings/Account/__snapshots__/index.jsx.snap

Lines changed: 0 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -4,35 +4,6 @@ exports[`renders account setting page correctly 1`] = `
44
<div
55
className="src-shared-components-Settings-Account-___styles__account-container___2rdYG"
66
>
7-
<div
8-
className="src-shared-components-Settings-Account-___styles__mobile-view___s8M3A"
9-
>
10-
<Accordion
11-
icons={
12-
Object {
13-
"linked accounts": <LinkedAccountIcon
14-
height="30"
15-
viewBox="0 0 30 30"
16-
width="30"
17-
xmlns="http://www.w3.org/2000/svg"
18-
/>,
19-
"my account": <MyAccountIcon
20-
height="30"
21-
viewBox="0 0 30 30"
22-
width="30"
23-
xmlns="http://www.w3.org/2000/svg"
24-
/>,
25-
}
26-
}
27-
names={
28-
Array [
29-
"my account",
30-
"linked account",
31-
]
32-
}
33-
renderTabContent={[Function]}
34-
/>
35-
</div>
367
<div
378
className="src-shared-components-Settings-Account-___styles__col-bar___3MCVp"
389
>

‎__tests__/shared/components/Settings/Preferences/__snapshots__/index.jsx.snap

Lines changed: 0 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -4,56 +4,6 @@ exports[`renders preferences setting page correctly 1`] = `
44
<div
55
className="src-shared-components-Settings-Preferences-___styles__preferences-container___m6Zzc"
66
>
7-
<div
8-
className="src-shared-components-Settings-Preferences-___styles__mobile-view___C-Nae"
9-
>
10-
<Accordion
11-
currentSidebarTab="e-mail"
12-
icons={
13-
Object {
14-
"e-mail": <EmailIcon
15-
height="30"
16-
viewBox="0 0 30 30"
17-
width="30"
18-
xmlns="http://www.w3.org/2000/svg"
19-
/>,
20-
"forum": <Forum
21-
height="30"
22-
viewBox="0 0 30 30"
23-
width="30"
24-
xmlns="http://www.w3.org/2000/svg"
25-
/>,
26-
"invitation letter": <Invletter
27-
height="30"
28-
viewBox="0 0 30 30"
29-
width="30"
30-
xmlns="http://www.w3.org/2000/svg"
31-
/>,
32-
"payment": <Payment
33-
viewBox="0 0 34 30"
34-
xmlns="http://www.w3.org/2000/svg"
35-
/>,
36-
"referrals": <Referral
37-
height="30"
38-
viewBox="0 0 30 30"
39-
width="30"
40-
xmlns="http://www.w3.org/2000/svg"
41-
/>,
42-
}
43-
}
44-
names={
45-
Array [
46-
"e-mail",
47-
"forum",
48-
"payment",
49-
"invitation letter",
50-
"referrals",
51-
]
52-
}
53-
renderTabContent={[Function]}
54-
toggleSidebarTab={[Function]}
55-
/>
56-
</div>
577
<div
588
className="src-shared-components-Settings-Preferences-___styles__col-bar___2Fr2T"
599
>

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

Lines changed: 51 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/**
22
* Child component of Settings/Account renders setting page for account.
33
*/
4-
4+
/* eslint-disable no-undef */
55
import React from 'react';
66
import PT from 'prop-types';
77
import _ from 'lodash';
@@ -14,7 +14,7 @@ import SideBar from '../SideBar';
1414
import ComingSoon from '../ComingSoon';
1515
import MyAccount from './MyAccount';
1616
import LinkedAccount from './LinkedAccount';
17-
17+
import { SCREEN_SIZE } from '../constants';
1818
import './styles.scss';
1919

2020
export default class Account extends React.Component {
@@ -26,35 +26,57 @@ export default class Account extends React.Component {
2626
if (this.tablink) {
2727
toggleAccountSideTab(this.tablink);
2828
}
29+
this.state = {
30+
isMobileView: false,
31+
};
32+
this.clearNotifiation = this.clearNotifiation.bind(this);
33+
this.updatePredicate = this.updatePredicate.bind(this);
34+
}
35+
36+
componentDidMount() {
37+
this.clearNotifiation();
38+
this.updatePredicate();
39+
window.addEventListener('resize', this.updatePredicate);
2940
}
3041

3142
componentDidUpdate(prevProps) {
3243
const { settingsUI: { currentAccountTab } } = this.props;
3344
if (prevProps.settingsUI.currentAccountTab !== currentAccountTab) {
3445
window.location.hash = currentAccountTab.replace(' ', '-');
46+
this.clearNotifiation();
47+
}
48+
}
49+
50+
componentWillUnmount() {
51+
this.clearNotifiation();
52+
window.removeEventListener('resize', this.updatePredicate);
53+
}
54+
55+
clearNotifiation() {
56+
const { clearToastrNotification } = this.props;
57+
if (clearToastrNotification) {
58+
clearToastrNotification();
3559
}
3660
}
3761

62+
updatePredicate() {
63+
this.setState({ isMobileView: window.innerWidth <= SCREEN_SIZE.SM });
64+
}
65+
3866
render() {
3967
const {
4068
settingsUI,
4169
toggleAccountSideTab,
42-
clearToastrNotification,
4370
} = this.props;
71+
const { isMobileView } = this.state;
4472
const tabs = settingsUI.TABS.ACCOUNT;
4573
const names = Object.keys(tabs).map(key => tabs[key]);
4674
const currentTab = this.tablink || settingsUI.currentAccountTab;
47-
4875
const icons = {
4976
'my account': <MyAccountIcon />,
5077
'linked accounts': <LinkedAccountIcon />,
5178
};
52-
let previousSelectedTab = null;
5379
const renderTabContent = (tab) => {
54-
if (previousSelectedTab !== tab && clearToastrNotification) {
55-
clearToastrNotification();
56-
}
57-
previousSelectedTab = tab;
5880
switch (tab) {
5981
case 'my account':
6082
return <MyAccount {...this.props} />;
@@ -67,15 +89,17 @@ export default class Account extends React.Component {
6789

6890
return (
6991
<div styleName="account-container">
70-
<div styleName="mobile-view">
71-
<Accordion
72-
icons={icons}
73-
names={names}
74-
currentSidebarTab={currentTab}
75-
renderTabContent={renderTabContent}
76-
toggleSidebarTab={toggleAccountSideTab}
77-
/>
78-
</div>
92+
{isMobileView && (
93+
<div styleName="mobile-view">
94+
<Accordion
95+
icons={icons}
96+
names={names}
97+
currentSidebarTab={currentTab}
98+
renderTabContent={renderTabContent}
99+
toggleSidebarTab={toggleAccountSideTab}
100+
/>
101+
</div>
102+
)}
79103
<div styleName="col-bar">
80104
<SideBar
81105
icons={icons}
@@ -84,11 +108,15 @@ export default class Account extends React.Component {
84108
toggle={toggleAccountSideTab}
85109
/>
86110
</div>
87-
<div styleName="col-content">
88-
<ErrorWrapper>
89-
{ renderTabContent(currentTab) }
90-
</ErrorWrapper>
91-
</div>
111+
{
112+
!isMobileView && (
113+
<div styleName="col-content">
114+
<ErrorWrapper>
115+
{ renderTabContent(currentTab) }
116+
</ErrorWrapper>
117+
</div>
118+
)
119+
}
92120
</div>
93121
);
94122
}

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

Lines changed: 53 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import Referral from 'assets/images/preferences/referral.svg';
1818
import SideBar from 'components/Settings/SideBar';
1919
import ErrorWrapper from 'components/Settings/ErrorWrapper';
2020
import Email from './Email';
21+
import { SCREEN_SIZE } from '../constants';
2122

2223
import './styles.scss';
2324

@@ -40,42 +41,54 @@ const icons = {
4041
export default class Preferences extends React.Component {
4142
constructor(props) {
4243
super(props);
43-
44-
this.toggleTab = this.toggleTab.bind(this);
45-
this.renderTabContent = this.renderTabContent.bind(this);
46-
4744
this.state = {
4845
currentTab: 'e-mail',
46+
isMobileView: false,
4947
};
48+
this.previousTab = null;
49+
this.toggleTab = this.toggleTab.bind(this);
50+
this.renderTabContent = this.renderTabContent.bind(this);
51+
this.clearNotifiation = this.clearNotifiation.bind(this);
52+
this.updatePredicate = this.updatePredicate.bind(this);
5053
}
5154

5255
componentDidMount() {
53-
const {
54-
clearToastrNotification,
55-
} = this.props;
56-
clearToastrNotification();
56+
this.clearNotifiation();
57+
this.updatePredicate();
58+
window.addEventListener('resize', this.updatePredicate);
59+
}
60+
61+
componentDidUpdate() {
62+
const { currentTab } = this.state;
63+
if (currentTab !== this.previousTab) {
64+
this.clearNotifiation();
65+
}
5766
}
5867

5968
componentWillUnmount() {
60-
const {
61-
clearToastrNotification,
62-
} = this.props;
63-
clearToastrNotification();
69+
this.clearNotifiation();
70+
window.removeEventListener('resize', this.updatePredicate);
71+
}
72+
73+
clearNotifiation() {
74+
const { clearToastrNotification } = this.props;
75+
if (clearToastrNotification) {
76+
clearToastrNotification();
77+
}
78+
}
79+
80+
updatePredicate() {
81+
this.setState({ isMobileView: window.innerWidth <= SCREEN_SIZE.SM });
6482
}
6583

6684
/* Add this to resolve checkbox checked issue when switch mobile to other device */
6785
toggleTab(tab) {
86+
const { currentTab } = this.state;
87+
this.previousTab = currentTab;
6888
this.setState({ currentTab: tab });
6989
}
7090

7191
renderTabContent(tab) {
72-
const {
73-
clearToastrNotification,
74-
} = this.props;
75-
if (this.previousSelectedTab !== tab && clearToastrNotification) {
76-
clearToastrNotification();
77-
}
78-
this.previousSelectedTab = tab;
7992
switch (tab) {
8093
case 'e-mail':
8194
return <Email {...this.props} />;
@@ -95,21 +108,24 @@ export default class Preferences extends React.Component {
95108
render() {
96109
const {
97110
currentTab,
111+
isMobileView,
98112
} = this.state;
99113

100114
const names = Object.keys(tabs).map(key => tabs[key]);
101115

102116
return (
103117
<div styleName="preferences-container">
104-
<div styleName="mobile-view">
105-
<Accordion
106-
icons={icons}
107-
names={names}
108-
currentSidebarTab={currentTab}
109-
renderTabContent={this.renderTabContent}
110-
toggleSidebarTab={this.toggleTab}
111-
/>
112-
</div>
118+
{isMobileView && (
119+
<div styleName="mobile-view">
120+
<Accordion
121+
icons={icons}
122+
names={names}
123+
currentSidebarTab={currentTab}
124+
renderTabContent={this.renderTabContent}
125+
toggleSidebarTab={this.toggleTab}
126+
/>
127+
</div>
128+
)}
113129
<div styleName="col-bar">
114130
<SideBar
115131
icons={icons}
@@ -118,11 +134,15 @@ export default class Preferences extends React.Component {
118134
toggle={this.toggleTab}
119135
/>
120136
</div>
121-
<div styleName="col-content">
122-
<ErrorWrapper>
123-
{ this.renderTabContent(currentTab) }
124-
</ErrorWrapper>
125-
</div>
137+
{
138+
!isMobileView && (
139+
<div styleName="col-content">
140+
<ErrorWrapper>
141+
{ this.renderTabContent(currentTab) }
142+
</ErrorWrapper>
143+
</div>
144+
)
145+
}
126146
</div>
127147
);
128148
}

0 commit comments

Comments
 (0)