Promise Based Dialog Actions

Dialog.js

import { Button } from './Button'

export const Dialog = props => h('article', {
  id: 'my-dialog',
  content: Button({
    textContent: 'Hey',
    onclick: props.onSuccessClick
  })
})

make-dialog.hof.js

import { h } from '../uihelpers'

const withContext = (fn) => {
  const rootID = '__dialog-context__'
  const root = h('div', { id: rootID })
  const query = document.querySelector(`#${rootID}`)
  
  if (query) {
    return query
  } else {
    return fn(document.body.appendChild(root))
  }
}

export const makeDialog = Dialog => withContext(DialogContext => {
  return new Promise(resolve => {
    DialogContext.appendChild(Dialog({
      onSuccessClick: e => resolve(true)
    }))
  })
})

MyView.js

import { makeDialog } from '../hofs/make-dialog.hof'
import { Dialog } from '../components/'

async function MyView() {
  const confirm = await makeDialog(Dialog)  
  return confirm ? console.log('Hello') : console.log('Nope')
}