Skip to content

ref: Convert app.jsx to ES6 #13798

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.

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 1 commit into from
Jun 25, 2019
Merged
Changes from all commits
Commits
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
71 changes: 37 additions & 34 deletions src/sentry/static/sentry/app/views/app.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,8 @@ import {injectGlobal} from 'emotion';
import Cookies from 'js-cookie';
import PropTypes from 'prop-types';
import React from 'react';
import Reflux from 'reflux';
import createReactClass from 'create-react-class';
import keydown from 'react-keydown';
import {isEqual} from 'lodash';

import {openCommandPalette} from 'app/actionCreators/modal';
import {t} from 'app/locale';
Expand All @@ -27,6 +26,7 @@ import OrganizationsStore from 'app/stores/organizationsStore';
import getRouteStringFromRoutes from 'app/utils/getRouteStringFromRoutes';
import theme from 'app/utils/theme';
import withApi from 'app/utils/withApi';
import withConfig from 'app/utils/withConfig';

function getAlertTypeForProblem(problem) {
switch (problem.severity) {
Expand All @@ -37,35 +37,33 @@ function getAlertTypeForProblem(problem) {
}
}

const App = createReactClass({
displayName: 'App',

propTypes: {
class App extends React.Component {
static propTypes = {
api: PropTypes.object.isRequired,
routes: PropTypes.array,
},
config: PropTypes.object.isRequired,
};

childContextTypes: {
static childContextTypes = {
location: PropTypes.object,
},

mixins: [Reflux.listenTo(ConfigStore, 'onConfigStoreChange')],
};

getInitialState() {
constructor(props) {
super(props);
const user = ConfigStore.get('user');
return {
this.state = {
loading: false,
error: false,
needsUpgrade: user && user.isSuperuser && ConfigStore.get('needsUpgrade'),
newsletterConsentPrompt: user && user.flags.newsletter_consent_prompt,
};
},
}

getChildContext() {
return {
location: this.props.location,
};
},
}

componentWillMount() {
this.props.api.request('/organizations/', {
Expand Down Expand Up @@ -144,26 +142,31 @@ const App = createReactClass({
if (user) {
HookStore.get('analytics:init-user').map(cb => cb(user));
}
},
}

componentDidMount() {
this.updateTracing();
},
}

componentDidUpdate(prevProps) {
const {config} = this.props;
if (!isEqual(config, prevProps.config)) {
this.handleConfigStoreChange(config);
}

componentDidUpdate() {
this.updateTracing();
},
}

componentWillUnmount() {
OrganizationsStore.load([]);
},
}

updateTracing() {
const route = getRouteStringFromRoutes(this.props.routes);
Tracing.startTrace(getCurrentHub(), route);
},
}

onConfigStoreChange(config) {
handleConfigStoreChange(config) {
const newState = {};
if (config.needsUpgrade !== undefined) {
newState.needsUpgrade = config.needsUpgrade;
Expand All @@ -174,27 +177,27 @@ const App = createReactClass({
if (Object.keys(newState).length > 0) {
this.setState(newState);
}
},
}

@keydown('meta+shift+p', 'meta+k')
openCommandPalette(e) {
openCommandPalette();
e.preventDefault();
e.stopPropagation();
},
}

onConfigured() {
this.setState({needsUpgrade: false});
},
}

onNewsletterConsent() {
handleNewsletterConsent = () => {
// this is somewhat hackish
this.setState({
newsletterConsentPrompt: false,
});
},
};

handleGlobalModalClose() {
handleGlobalModalClose = () => {
if (!this.mainContainerRef) {
return;
}
Expand All @@ -204,7 +207,7 @@ const App = createReactClass({

// Focus the main container to get hotkeys to keep working after modal closes
this.mainContainerRef.focus();
},
};

renderBody() {
const {needsUpgrade, newsletterConsentPrompt} = this.state;
Expand All @@ -213,11 +216,11 @@ const App = createReactClass({
}

if (newsletterConsentPrompt) {
return <NewsletterConsent onSubmitSuccess={this.onNewsletterConsent} />;
return <NewsletterConsent onSubmitSuccess={this.handleNewsletterConsent} />;
}

return this.props.children;
},
}

render() {
if (this.state.loading) {
Expand All @@ -243,10 +246,10 @@ const App = createReactClass({
</div>
</ThemeProvider>
);
},
});
}
}

export default withApi(App);
export default withApi(withConfig(App));

injectGlobal`
body {
Expand Down