I have a website which communicates with a third party iframe.

There are 3 methods: login, sign and get information. They all work similar. I embed the third party iframe and send a message to it via `window.postMessage(...)` to it. After I have sent a message to the iframe I get back a response.

I can't come up with a clean architecture to encapsulate the communication.

Current idea:

```
class iFrameCommunicator{
  init() { 
      window.addEventListener('message', (message) => {
         if (message == "login_success"){
           setGlobalLoginState(true)
        }
        if (message == "sign_success"){
           setGlobalSignState(true)
        }
      })
    }
  }
  login() {
    window.postMessage({command: "login"})
  }

  sign(payload) {
    window.postMessage({command: "sign", payload: payload})
  }
}

```

Login page

```
<button onClick={() => iFrameCommunicator.login()}>Login</button>

```

With this approach I have to monitor the `GlobalLoginState` to see if the login call was successful. I would like the login function (and the other functions) to return a Promise instead.

Is there a way to refactor the code so that every function which communicates with the iframe returns a Promise without having to setup an `addEventListener` for every function call?