Created
July 22, 2019 19:47
-
-
Save richter-alex/eb0e9e52b64fed5d29715ba608241c37 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import ReactDOM from 'react-dom'; | |
import './index.css'; | |
import * as serviceWorker from './serviceWorker'; | |
import '@shopify/polaris/styles.css'; | |
import MyComponent from './MyComponent' | |
import {AppProvider} from '@shopify/polaris' | |
ReactDOM.render( | |
<AppProvider apiKey="foobar" shopOrigin="shop.myshopify.com"> | |
<MyComponent /> | |
</AppProvider>, | |
document.querySelector('#root'), | |
); | |
// If you want your app to work offline and load faster, you can change | |
// unregister() to register() below. Note this comes with some pitfalls. | |
// Learn more about service workers: https://bit.ly/CRA-PWA | |
serviceWorker.unregister(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import PropTypes from 'prop-types'; | |
import {Card} from '@shopify/polaris'; | |
import {Redirect} from '@shopify/app-bridge/actions'; | |
/** | |
* Simple component that makes use of App Bridge. | |
* | |
* Ensure that this component is a child of your `<AppProvider>` component. | |
*/ | |
export default class MyComponent extends React.Component { | |
/** | |
* This line is very important! It tells React to attach the `polaris` object | |
* to `this.context` within your component. | |
*/ | |
static contextTypes = { | |
polaris: PropTypes.object, | |
}; | |
/** | |
* This method grabs the App Bridge app from Polaris, and then allows you to | |
* use the App Bridge actions directly. See: | |
* https://help.shopify.com/en/api/embedded-apps/app-bridge/actions/navigation/redirect | |
*/ | |
redirectToOrders() { | |
const redirect = Redirect.create(this.context.polaris.appBridge); | |
redirect.dispatch(Redirect.Action.ADMIN_SECTION, { | |
section: { | |
name: Redirect.ResourceType.Order, | |
}, | |
}); | |
} | |
/** | |
* The render method ties the Polaris components and App Bridge methods | |
* together. | |
*/ | |
render() { | |
const primaryFooterAction = { | |
content: 'Create Delivery', | |
onAction: () => { | |
this.redirectToOrders(); | |
}, | |
}; | |
return ( | |
<Card sectioned primaryFooterAction={primaryFooterAction}> | |
<p>Hi!</p> | |
</Card> | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment