Skip to content

Commit 5471f8a

Browse files
raclimraclim
authored
Merge pull request #2170 from lindapaiste/fix/document-theme
Remove duplicate `document.body.className` effect
2 parents aa99cdd + f005029 commit 5471f8a

File tree

3 files changed

+67
-102
lines changed

3 files changed

+67
-102
lines changed

‎client/modules/User/pages/AccountView.jsx

Lines changed: 65 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import PropTypes from 'prop-types';
22
import React from 'react';
3-
import { connect, useSelector } from 'react-redux';
4-
import { bindActionCreators } from 'redux';
3+
import { useDispatch, useSelector } from 'react-redux';
54
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
65
import { Helmet } from 'react-helmet';
7-
import { useTranslation, withTranslation } from 'react-i18next';
6+
import { useTranslation } from 'react-i18next';
87
import { withRouter, browserHistory } from 'react-router';
98
import { parse } from 'query-string';
109
import { createApiKey, removeApiKey } from '../actions';
@@ -45,107 +44,85 @@ function SocialLoginPanel() {
4544
);
4645
}
4746

48-
class AccountView extends React.Component {
49-
componentDidMount() {
50-
document.body.className = this.props.theme;
51-
}
47+
function AccountView({ location }) {
48+
const { t } = useTranslation();
5249

53-
render() {
54-
const queryParams = parse(this.props.location.search);
55-
const showError = !!queryParams.error;
56-
const errorType = queryParams.error;
57-
const accessTokensUIEnabled = window.process.env.UI_ACCESS_TOKEN_ENABLED;
50+
const queryParams = parse(location.search);
51+
const showError = !!queryParams.error;
52+
const errorType = queryParams.error;
53+
const accessTokensUIEnabled = window.process.env.UI_ACCESS_TOKEN_ENABLED;
5854

59-
return (
60-
<div className="account-settings__container">
61-
<Helmet>
62-
<title>{this.props.t('AccountView.Title')}</title>
63-
</Helmet>
64-
<Toast />
55+
const apiKeys = useSelector((state) => state.user.apiKeys);
56+
const dispatch = useDispatch();
6557

66-
<Nav layout="dashboard" />
58+
return (
59+
<div className="account-settings__container">
60+
<Helmet>
61+
<title>{t('AccountView.Title')}</title>
62+
</Helmet>
63+
<Toast />
6764

68-
{showError && (
69-
<Overlay
70-
title={this.props.t('ErrorModal.LinkTitle')}
71-
ariaLabel={this.props.t('ErrorModal.LinkTitle')}
72-
closeOverlay={() => {
73-
browserHistory.push(this.props.location.pathname);
74-
}}
75-
>
76-
<ErrorModal type="oauthError" service={errorType} />
77-
</Overlay>
78-
)}
65+
<Nav layout="dashboard" />
7966

80-
<main className="account-settings">
81-
<header className="account-settings__header">
82-
<h1 className="account-settings__title">
83-
{this.props.t('AccountView.Settings')}
84-
</h1>
85-
</header>
86-
{accessTokensUIEnabled && (
87-
<Tabs className="account__tabs">
88-
<TabList>
89-
<div className="tabs__titles">
67+
{showError && (
68+
<Overlay
69+
title={t('ErrorModal.LinkTitle')}
70+
ariaLabel={t('ErrorModal.LinkTitle')}
71+
closeOverlay={() => {
72+
browserHistory.push(location.pathname);
73+
}}
74+
>
75+
<ErrorModal type="oauthError" service={errorType} />
76+
</Overlay>
77+
)}
78+
79+
<main className="account-settings">
80+
<header className="account-settings__header">
81+
<h1 className="account-settings__title">
82+
{t('AccountView.Settings')}
83+
</h1>
84+
</header>
85+
{accessTokensUIEnabled && (
86+
<Tabs className="account__tabs">
87+
<TabList>
88+
<div className="tabs__titles">
89+
<Tab>
90+
<h4 className="tabs__title">{t('AccountView.AccountTab')}</h4>
91+
</Tab>
92+
{accessTokensUIEnabled && (
9093
<Tab>
9194
<h4 className="tabs__title">
92-
{this.props.t('AccountView.AccountTab')}
95+
{t('AccountView.AccessTokensTab')}
9396
</h4>
9497
</Tab>
95-
{accessTokensUIEnabled && (
96-
<Tab>
97-
<h4 className="tabs__title">
98-
{this.props.t('AccountView.AccessTokensTab')}
99-
</h4>
100-
</Tab>
101-
)}
102-
</div>
103-
</TabList>
104-
<TabPanel>
105-
<SocialLoginPanel />
106-
</TabPanel>
107-
<TabPanel>
108-
<APIKeyForm {...this.props} />
109-
</TabPanel>
110-
</Tabs>
111-
)}
112-
{!accessTokensUIEnabled && <SocialLoginPanel />}
113-
</main>
114-
</div>
115-
);
116-
}
117-
}
118-
119-
function mapStateToProps(state) {
120-
return {
121-
initialValues: state.user, // <- initialValues for reduxForm
122-
previousPath: state.ide.previousPath,
123-
user: state.user,
124-
apiKeys: state.user.apiKeys,
125-
theme: state.preferences.theme
126-
};
127-
}
128-
129-
function mapDispatchToProps(dispatch) {
130-
return bindActionCreators(
131-
{
132-
createApiKey,
133-
removeApiKey
134-
},
135-
dispatch
98+
)}
99+
</div>
100+
</TabList>
101+
<TabPanel>
102+
<SocialLoginPanel />
103+
</TabPanel>
104+
<TabPanel>
105+
<APIKeyForm
106+
// TODO: it makes more sense to connect the APIKeyForm component directly -Linda
107+
apiKeys={apiKeys}
108+
createApiKey={() => dispatch(createApiKey)}
109+
removeApiKey={() => dispatch(removeApiKey)}
110+
t={t}
111+
/>
112+
</TabPanel>
113+
</Tabs>
114+
)}
115+
{!accessTokensUIEnabled && <SocialLoginPanel />}
116+
</main>
117+
</div>
136118
);
137119
}
138120

139121
AccountView.propTypes = {
140-
previousPath: PropTypes.string.isRequired,
141-
theme: PropTypes.string.isRequired,
142-
t: PropTypes.func.isRequired,
143122
location: PropTypes.shape({
144123
search: PropTypes.string.isRequired,
145124
pathname: PropTypes.string.isRequired
146125
}).isRequired
147126
};
148127

149-
export default withTranslation()(
150-
withRouter(connect(mapStateToProps, mapDispatchToProps)(AccountView))
151-
);
128+
export default withRouter(AccountView);

‎client/modules/User/pages/CollectionView.jsx

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,6 @@ class CollectionView extends React.Component {
1414
user: null
1515
};
1616

17-
componentDidMount() {
18-
document.body.className = this.props.theme;
19-
}
20-
2117
ownerName() {
2218
if (this.props.params.username) {
2319
return this.props.params.username;
@@ -69,8 +65,7 @@ class CollectionView extends React.Component {
6965

7066
function mapStateToProps(state) {
7167
return {
72-
user: state.user,
73-
theme: state.preferences.theme
68+
user: state.user
7469
};
7570
}
7671

@@ -86,7 +81,6 @@ CollectionView.propTypes = {
8681
collection_id: PropTypes.string.isRequired,
8782
username: PropTypes.string.isRequired
8883
}).isRequired,
89-
theme: PropTypes.string.isRequired,
9084
user: PropTypes.shape({
9185
username: PropTypes.string
9286
}),

‎client/modules/User/pages/DashboardView.jsx

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,6 @@ class DashboardView extends React.Component {
3939
};
4040
}
4141

42-
componentDidMount() {
43-
document.body.className = this.props.theme;
44-
}
45-
4642
closeAccountPage() {
4743
browserHistory.push(this.props.previousPath);
4844
}
@@ -174,8 +170,7 @@ class DashboardView extends React.Component {
174170
function mapStateToProps(state) {
175171
return {
176172
previousPath: state.ide.previousPath,
177-
user: state.user,
178-
theme: state.preferences.theme
173+
user: state.user
179174
};
180175
}
181176

@@ -192,7 +187,6 @@ DashboardView.propTypes = {
192187
username: PropTypes.string.isRequired
193188
}).isRequired,
194189
previousPath: PropTypes.string.isRequired,
195-
theme: PropTypes.string.isRequired,
196190
user: PropTypes.shape({
197191
username: PropTypes.string
198192
}),

0 commit comments

Comments
 (0)