Skip to content

Remove duplicate document.body.className effect #2170

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
May 3, 2023
Merged

Remove duplicate document.body.className effect #2170

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e2c28a0
Remove duplicate document.body.className.
lindapaiste Mar 21, 2023
b571ded
Merge branch 'develop' into fix/document-theme
lindapaiste Mar 27, 2023
f005029
Merge branch 'develop' into fix/document-theme
raclim May 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
153 changes: 65 additions & 88 deletions client/modules/User/pages/AccountView.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import PropTypes from 'prop-types';
import React from 'react';
import { connect, useSelector } from 'react-redux';
import { bindActionCreators } from 'redux';
import { useDispatch, useSelector } from 'react-redux';
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import { Helmet } from 'react-helmet';
import { useTranslation, withTranslation } from 'react-i18next';
import { useTranslation } from 'react-i18next';
import { withRouter, browserHistory } from 'react-router';
import { parse } from 'query-string';
import { createApiKey, removeApiKey } from '../actions';
Expand Down Expand Up @@ -45,107 +44,85 @@ function SocialLoginPanel() {
);
}

class AccountView extends React.Component {
componentDidMount() {
document.body.className = this.props.theme;
}
function AccountView({ location }) {
const { t } = useTranslation();

render() {
const queryParams = parse(this.props.location.search);
const showError = !!queryParams.error;
const errorType = queryParams.error;
const accessTokensUIEnabled = window.process.env.UI_ACCESS_TOKEN_ENABLED;
const queryParams = parse(location.search);
const showError = !!queryParams.error;
const errorType = queryParams.error;
const accessTokensUIEnabled = window.process.env.UI_ACCESS_TOKEN_ENABLED;

return (
<div className="account-settings__container">
<Helmet>
<title>{this.props.t('AccountView.Title')}</title>
</Helmet>
<Toast />
const apiKeys = useSelector((state) => state.user.apiKeys);
const dispatch = useDispatch();

<Nav layout="dashboard" />
return (
<div className="account-settings__container">
<Helmet>
<title>{t('AccountView.Title')}</title>
</Helmet>
<Toast />

{showError && (
<Overlay
title={this.props.t('ErrorModal.LinkTitle')}
ariaLabel={this.props.t('ErrorModal.LinkTitle')}
closeOverlay={() => {
browserHistory.push(this.props.location.pathname);
}}
>
<ErrorModal type="oauthError" service={errorType} />
</Overlay>
)}
<Nav layout="dashboard" />

<main className="account-settings">
<header className="account-settings__header">
<h1 className="account-settings__title">
{this.props.t('AccountView.Settings')}
</h1>
</header>
{accessTokensUIEnabled && (
<Tabs className="account__tabs">
<TabList>
<div className="tabs__titles">
{showError && (
<Overlay
title={t('ErrorModal.LinkTitle')}
ariaLabel={t('ErrorModal.LinkTitle')}
closeOverlay={() => {
browserHistory.push(location.pathname);
}}
>
<ErrorModal type="oauthError" service={errorType} />
</Overlay>
)}

<main className="account-settings">
<header className="account-settings__header">
<h1 className="account-settings__title">
{t('AccountView.Settings')}
</h1>
</header>
{accessTokensUIEnabled && (
<Tabs className="account__tabs">
<TabList>
<div className="tabs__titles">
<Tab>
<h4 className="tabs__title">{t('AccountView.AccountTab')}</h4>
</Tab>
{accessTokensUIEnabled && (
<Tab>
<h4 className="tabs__title">
{this.props.t('AccountView.AccountTab')}
{t('AccountView.AccessTokensTab')}
</h4>
</Tab>
{accessTokensUIEnabled && (
<Tab>
<h4 className="tabs__title">
{this.props.t('AccountView.AccessTokensTab')}
</h4>
</Tab>
)}
</div>
</TabList>
<TabPanel>
<SocialLoginPanel />
</TabPanel>
<TabPanel>
<APIKeyForm {...this.props} />
</TabPanel>
</Tabs>
)}
{!accessTokensUIEnabled && <SocialLoginPanel />}
</main>
</div>
);
}
}

function mapStateToProps(state) {
return {
initialValues: state.user, // <- initialValues for reduxForm
previousPath: state.ide.previousPath,
user: state.user,
apiKeys: state.user.apiKeys,
theme: state.preferences.theme
};
}

function mapDispatchToProps(dispatch) {
return bindActionCreators(
{
createApiKey,
removeApiKey
},
dispatch
)}
</div>
</TabList>
<TabPanel>
<SocialLoginPanel />
</TabPanel>
<TabPanel>
<APIKeyForm
// TODO: it makes more sense to connect the APIKeyForm component directly -Linda
apiKeys={apiKeys}
createApiKey={() => dispatch(createApiKey)}
removeApiKey={() => dispatch(removeApiKey)}
t={t}
/>
</TabPanel>
</Tabs>
)}
{!accessTokensUIEnabled && <SocialLoginPanel />}
</main>
</div>
);
}

AccountView.propTypes = {
previousPath: PropTypes.string.isRequired,
theme: PropTypes.string.isRequired,
t: PropTypes.func.isRequired,
location: PropTypes.shape({
search: PropTypes.string.isRequired,
pathname: PropTypes.string.isRequired
}).isRequired
};

export default withTranslation()(
withRouter(connect(mapStateToProps, mapDispatchToProps)(AccountView))
);
export default withRouter(AccountView);
8 changes: 1 addition & 7 deletions client/modules/User/pages/CollectionView.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,6 @@ class CollectionView extends React.Component {
user: null
};

componentDidMount() {
document.body.className = this.props.theme;
}

ownerName() {
if (this.props.params.username) {
return this.props.params.username;
Expand Down Expand Up @@ -69,8 +65,7 @@ class CollectionView extends React.Component {

function mapStateToProps(state) {
return {
user: state.user,
theme: state.preferences.theme
user: state.user
};
}

Expand All @@ -86,7 +81,6 @@ CollectionView.propTypes = {
collection_id: PropTypes.string.isRequired,
username: PropTypes.string.isRequired
}).isRequired,
theme: PropTypes.string.isRequired,
user: PropTypes.shape({
username: PropTypes.string
}),
Expand Down
8 changes: 1 addition & 7 deletions client/modules/User/pages/DashboardView.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,6 @@ class DashboardView extends React.Component {
};
}

componentDidMount() {
document.body.className = this.props.theme;
}

closeAccountPage() {
browserHistory.push(this.props.previousPath);
}
Expand Down Expand Up @@ -174,8 +170,7 @@ class DashboardView extends React.Component {
function mapStateToProps(state) {
return {
previousPath: state.ide.previousPath,
user: state.user,
theme: state.preferences.theme
user: state.user
};
}

Expand All @@ -192,7 +187,6 @@ DashboardView.propTypes = {
username: PropTypes.string.isRequired
}).isRequired,
previousPath: PropTypes.string.isRequired,
theme: PropTypes.string.isRequired,
user: PropTypes.shape({
username: PropTypes.string
}),
Expand Down