0

I am trying to make 2 react app versions communicate with each other (react 16 to 15). I want to pass a message from my react16 app to my react15 in a one-way manner. I did not find it viable to upgrade the old app to a newer version since I only need something to work for the meantime while we develop a newer version.

So what my react 16 app does basically is it already sends a message to a chrome extension and the extension will, in turn, return a dataUrl. An the dataUrl would then be rendered to a canvas then after editing the image it would send it to firebase using axios for storage. Firebase will then have a response that I would want to be sent to the react 15 app using an event listener.

What I tried is that when the image is successfully sent to the database the react 16 app will do a window.postMessage(). The older app has an eventlistener on componentDidMount() which supposedly should catch the message.

When I make this run It won't work though. The postMessage is okay but it seems like the eventListener isn't catching it.

Any help would be appreciated. Thanks!

React 16 app ImageContainer.js

...
        axios.post('/screenshots.json', submittedImage)
            .then(response => {
                this.setState({ showPrompt: false })

                response.status === 200 ? this.props.notify(true, "Screenshot Saved! ") : this.props.notify(false)

                this.props.storeImageToArrayHandler(submittedImage)
                let firebaseId = response.data.name                 // This will be used for single querying the image from firebase

                let feedBackButton = document.getElementById('feedback-button');

                feedBackButton.click();

                var data = { type: "FROM_REACT16", text: "Enter Image ID" };
                console.log("[ImageContainer] Sending Message...")
                window.postMessage(data, "*");
                this.setState({ showImageContainer: false })

            })
            .catch(error => {
                this.setState({ showPrompt: false })
                this.props.notify(false, "Unable to save Screenshot. " + error)
                this.props.storeImageToArrayHandler("")
            })
...

React 15 app MainContainer.js

...
componentDidMount() {
    console.log("[componentDidMount] MainContainer.js")

    window.addEventListener("image_interceptor", function (event) { //listen for messages from react app
      console.log("[MainContainer] Listening for messages...")
      if (event.data.type && (event.data.type === "FROM_REACT16")) {
        console.log('I got the message');
      }
      return true;
    });

    window.mainContainer = {
      addStateValidator: this.addStateValidator,
    };
    this.props.start();
  }
...

index.html

...
<BODY>
<div style=" width: 100%; height:100%; position: absolute;; top:0; left:0; bottom:0; right:0;">
    <div id="notification" style="display:inline;">
      <p>Extension not detected.
        You can download the extension <a
          href="www.link-to-extension.com">here</a>
        .
      </p>

    </div>
</div>
<div id="root"></div>                             //REACT 15
<div id="screenshot"></div>                       //REACT 16

<script src="feedback/feedback-main.js" type="text/javascript" charset="utf-8"></script>
<script src="feedback/bundle.js" type="text/javascript" charset="utf-8"></script>
</BODY>
</HTML>
NoobNewb
  • 583
  • 2
  • 10
  • 21
  • 3
    as I understand postMessage is intended to communicate between windows. In your case maybe it is enough to use global objects – duc mai Apr 02 '19 at 20:58
  • I think this should work for my use case but this topic mentions that I should avoid using it: https://stackoverflow.com/questions/45080011/global-variable-for-react Thanks for your suggestion – NoobNewb Apr 02 '19 at 21:32
  • 1
    it is not actually like that. In this case you need to communicate between two apps. you can take a look at my answer at another thread about global things, https://stackoverflow.com/questions/55433913/should-global-variables-in-javascript-be-always-avoided/55439714#55439714. – duc mai Apr 02 '19 at 21:36

0 Answers0