Polaris App Bridge React Model Question

[HunkyBill]

I am sorry, but the whole previous effort was in vain. Nothing in the Shopify codes work for this use case.

I import Modal from '@shopify/app-bridge-react' and load it using the src prop with a form.

As far as showing the form goes, that is simple enough. But how can I use or leverage Context and the App Bridge React to actually have this Modal work?

The close button X works as that is part of Modal so nothing to do there. So showing the modal and closing it using the X work.

But in the Form rendered inside the modal, the content there. How do I use App Bridge, context and whatever to close the Modal once the form submits and all is well in that form? Nothing seems to work. I have a reference to App Bridge context, but nothing I do in there will CLOSE the open Modal. So therefore, I can open it, but never close it based on what happens inside the Modal itself, the form rendered as the src prop.

Example.. in the main component where the Modal is rendered... React hates on not knowing what Modal is:

TypeError: _shopify_app_bridge_react__WEBPACK_IMPORTED_MODULE_2__.Modal.Action is undefined

const [modalOpen, setModalOpen] = useState(false)
  const appBridge = useContext(Context);
  useEffect(() => {
    return appBridge.subscribe(Modal.Action.CLOSE, () => setModalOpen(false));
  }, []);

So subscribing to Modal seems not to work. What else are we supposed to do! I just want to close a fricking Modal!

Having App Bridge context, and doing a dispatch on that for the Modal.Action.CLOSE does not work... what is the secret here to getting control of an App Bridge React Modal??????

[HunkyBill]

I basically had to tell a client the Shopify App Bridge React components do not work as he thinks and to go back to the drawing board. It is a shame as his design was quite nice. Just too bad the Polaris code is not ready for prime-time. 

If anyone can demonstrate a working Modal, I will certainly consider it in the future, but for now I put it in the bin of nice try, does not work for much yet. I get it that as a toy Modal showing a button it works, but not if you load a form into it as a simple example of real-world use case.

Showing off App Bridge code is no use as that Modal does not work properly in the embedded App sense, and fails to cover the whole screen. So only the React version of Modal is my interest here and so far, that puppy does not compute.

[Trish_Ta]

Hi Bill,

Can you paste your full code snippet? The type error seems indicate that you're importing the modal actions from `@shopify/app-bridge-react`, which is not the correct package. I know it's confusing but `@shopify/app-bridge-react` does export the underlying app-bridge actions, it only export React components. In addition, when doing a subscription through the App Bridge context, you need to access the full ActionType instead of the shorthand Action. Your imports should look something like: 

import {Context, Modal} from '@shopify/app-bridge-react';
import {Modal as ModalActions} from  '@shopify/app-bridge/actions';
...
const [modalOpen, setModalOpen] = useState(false)
  const appBridge = useContext(Context);
  useEffect(() => {
    return appBridge.subscribe(ModalActions.ActionType.CLOSE, () => setModalOpen(false));
  }, []);
...

I realize that we're really lacking in docs for this and the developer experience is not ideal. Your feedback is noted and we hope to improve this soon.

[HunkyBill]

I cannot paste the code but I will explain.

<Modal src="/connection" />    ultimately renders an open Modal with a form in it. Everything in that form is great. I process the form, and now, I want close the Modal. So... in that component!!! What do I need to do?

import {Modal as ModalActions} from  '@shopify/app-bridge/actions';

I have never seen that. But OK.. I will see what that does for me.

Nope. Does not work.

  const appBridge = useContext(Context);
  const handleCancel = useCallback(
    () => {
      console.log("Form submit was cancelled")
      appBridge.dispatch(ModalActions.ActionType.CLOSE);
    },
    [],
  )

I get no errors, but the Modal stays open... So that appBridge dispatch does not help me out. What else to try?

[Trish_Ta]

What do you get if you log out the App Bridge context?

const appBridge = useContext(Context);
console.log(appBridge);

[HunkyBill]

I get appBridge object...

So in my cancel code

const handleCancel = useCallback(
    () => {
      console.log("Form submit was cancelled")
      console.log(appBridge);
      appBridge.dispatch(ModalActions.ActionType.CLOSE);
    },
    [],
  )

the console logs are nice...

Form submit was cancelled merchantForm.js:40
{…}
​
dispatch: function dispatch(action)​
error: function error(listener, id)​
featuresAvailable: function featuresAvailable(features)​
getState: function getState(query)​
hooks: Object { map: {…} }
​
localOrigin: "https://foo.test"
​
subscribe: function subscribe()​
<prototype>: Object { … }

[HunkyBill]

This is the HOC... not the form code itself...

import React, {
  useState,
  useContext,
  useEffect,
} from 'react';
import {
  Page,
  Layout,
  Button,
} from '@shopify/polaris';
import { Context, Modal } from '@shopify/app-bridge-react';
import { Modal as ModalActions } from '@shopify/app-bridge/actions';

export default function App() {
  const appBridge = useContext(Context);
  const [modalOpen, setModalOpen] = useState(false)
  useEffect(() => {
    return appBridge.subscribe(ModalActions.ActionType.CLOSE, () => setModalOpen(false));
  }, []);

  return (
    <>
      <Page fullwidth>
        <Layout>
          <Layout.Section>
            <Button onClick={handleChange} primary>Connect to Foo</Button>
            <Modal
              open={modalOpen}
              onClose={() => { setModalOpen(false) }}
              title="Connect to Foo"
              size="Medium"
              src={"/connection"}
            />
          </Layout.Section>
        </Layout>
      </Page>
    </>
  );
}

[Trish_Ta]

Ok, I see the issue, when you dispatch an action through the context it should be an object, not a string. App Bridge exports a close action you can use:

appBridge.dispatch(ModalActions.close());

[HunkyBill]

That generated and error:

TypeError: _shopify_app_bridge_actions__WEBPACK_IMPORTED_MODULE_6__.Modal.close is not a function
2 merchantForm.js:41

[HunkyBill]

But the intellisense said a closeModal() function was available, so I tried that and that worked. Phew. Thanks

[Trish_Ta · Accepted solution]

Oops, my mistake - glad you got that sorted out. I'll bring your feedback back to the team and hopefully we can improve the docs soon.