Skip to content
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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

App Bridge: Update to v1.3.0 #1349

Merged
merged 2 commits into from Apr 25, 2019
Merged

App Bridge: Update to v1.3.0 #1349

merged 2 commits into from Apr 25, 2019

Conversation

vividviolet
Copy link
Member

@vividviolet vividviolet commented Apr 24, 2019

WHY are these changes introduced?

Fixes #998
Fixes #1028

Allows apps to subscribe to redirect actions and handle its own redirects. This allows single page apps using its own routing (ex. React Router) to navigate without reloading the app.

Before (iframe is reloaded)

polaris-redirect-before

After (iframe is not reloaded)

polaris-redirect-after

Using a custom handler for app redirects

The following is an example of a component utilizing the App Bridge context from Polaris to subscribe to redirects and add its own handler.

import { RouterProps } from 'react-router';

export default class Section extends React.Component {
  static contextTypes = {
    polaris: PropTypes.object,
  };

  cleanup = () => {};

  componentDidMount() {
    const {
      polaris: { appBridge },
    } = this.context;
    this.cleanup = appBridge.subscribe(Redirect.ActionType.APP, ({ path }) => {
      // Call your own method here with the relative app path
    });
  }

  componentWillUnmount() {
   // Clean up subscriptions when component unmounts
    this.cleanup();
  }
}

WHAT is this pull request doing?

Update to use App Bridge v1.3.0

How to 馃帺

  1. Clone https://github.com/Shopify/app-bridge-test-apps and do cd app-bridge-polaris-react-router
  2. Run dev up
  3. Navigate to the directory containing polaris-react and do yarn build-consumer app-bridge-test-apps/app-bridge-polaris-react-router.
  4. Navigate back to the test app directory and follow the instructions to install the app on either local Shopify or a production store
  5. Open the app and verify that clicking on the secondary navigation redirects to the correct page without reloading the iframe
  6. Verify that clicking on the app name or app icon when NOT on the index page navigates back to the index page without reloading the iframe

@BPScott BPScott temporarily deployed to polaris-react-pr-1349 April 24, 2019 19:51 Inactive
@BPScott BPScott temporarily deployed to polaris-react-pr-1349 April 24, 2019 19:56 Inactive
@BPScott BPScott temporarily deployed to polaris-react-pr-1349 April 24, 2019 20:03 Inactive
Copy link

@MattLiang MattLiang left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

馃帺 Looks good! Can't wait to try it out.

@@ -34,6 +34,8 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f

- Bump react-utilites to remove a transitive dependency on core-js. ([#1343](https://github.com/Shopify/polaris-react/pull/1343))

- Updated App Bridge to version 1.3.3 ([#1349](https://github.com/Shopify/polaris-react/pull/1349))
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Typo here, should be 1.3.0

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My bad! I'll put up another pr to fix it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
5 participants