import _ from ‘lodash’; import * as PropTypes from ‘prop-types’; import React from ‘react’; import ReactRouterPropTypes from ‘react-router-prop-types’; import { History } from ‘@shopify/app-bridge/actions’; import { Page } from ‘@shopify/polaris’;
class EmbeddedPage extends React.Component {
static contextTypes = { polaris: PropTypes.object }; static propTypes = { children: PropTypes.node.isRequired, history: ReactRouterPropTypes.history.isRequired, location: ReactRouterPropTypes.location.isRequired, title: PropTypes.string.isRequired }; componentDidMount() { window.addEventListener('message', this.handleMessage); this.pushHistory(); } componentDidUpdate(prevProps) { if (prevProps.location.pathname !== this.props.location.pathname) { this.pushHistory(); } } componentWillUnmount() { window.removeEventListener('message', this.handleMessage); } pushHistory = () => { const history = History.create(this.context.polaris.appBridge); history.dispatch(History.Action.PUSH, this.props.history.location.pathname); }; handleMessage = e => { if (e.isTrusted) { if (_.isString(e.data)) { const json = JSON.parse(e.data); if (json.message === 'Shopify.API.setWindowLocation') { const url = new URL(json.data); this.props.history.push(url.pathname); } } } }; pushHistory = () => { const history = History.create(this.context.polaris.appBridge); history.dispatch(History.Action.PUSH, this.props.history.location.pathname); }; render() { return ( <Page title={this.props.title} {...this.props}> {this.props.children} </Page> ); }
}
export default EmbeddedPage;