From eb8cd5f83d8cbab5a394369b6b09642d317485ba Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sun, 8 Apr 2018 16:56:20 -0700
Subject: [PATCH] simplify and refactor dialogs using event bus

---
 .../AccountProfileOptionsDialog.html          | 35 ++++++------
 .../{ => components}/ComposeDialog.html       | 32 +++++------
 .../{ => components}/ConfirmationDialog.html  | 32 ++++++-----
 .../dialog/{ => components}/EmojiDialog.html  | 19 +++----
 .../{ => components}/GenericDialogList.html   |  0
 .../dialog/{ => components}/ImageDialog.html  | 21 ++++----
 .../dialog/{ => components}/ModalDialog.html  | 54 ++++++++++---------
 .../{ => components}/PostPrivacyDialog.html   | 21 ++++----
 .../{ => components}/StatusOptionsDialog.html | 23 ++++----
 .../dialog/{ => components}/VideoDialog.html  | 18 +++----
 .../showAccountProfileOptionsDialog.js        |  6 ++-
 .../dialog/creators/showComposeDialog.js      | 14 +++++
 .../{ => creators}/showConfirmationDialog.js  |  6 ++-
 .../dialog/{ => creators}/showEmojiDialog.js  |  6 ++-
 .../dialog/{ => creators}/showImageDialog.js  |  6 ++-
 .../{ => creators}/showPostPrivacyDialog.js   |  6 ++-
 .../{ => creators}/showStatusOptionsDialog.js |  6 ++-
 .../dialog/{ => creators}/showVideoDialog.js  |  6 ++-
 routes/_components/dialog/dialogs.js          | 16 +++---
 .../_components/dialog/helpers/closeDialog.js |  6 +++
 .../{ => helpers}/createDialogElement.js      |  0
 .../dialog/helpers/createDialogId.js          |  5 ++
 .../dialog/helpers/onCreateDialog.js          | 12 +++++
 .../_components/dialog/helpers/showDialog.js  |  6 +++
 .../_components/dialog/showComposeDialog.js   | 12 -----
 tests/spec/108-compose-dialog.js              | 22 ++++++++
 26 files changed, 237 insertions(+), 153 deletions(-)
 rename routes/_components/dialog/{ => components}/AccountProfileOptionsDialog.html (64%)
 rename routes/_components/dialog/{ => components}/ComposeDialog.html (54%)
 rename routes/_components/dialog/{ => components}/ConfirmationDialog.html (69%)
 rename routes/_components/dialog/{ => components}/EmojiDialog.html (84%)
 rename routes/_components/dialog/{ => components}/GenericDialogList.html (100%)
 rename routes/_components/dialog/{ => components}/ImageDialog.html (67%)
 rename routes/_components/dialog/{ => components}/ModalDialog.html (82%)
 rename routes/_components/dialog/{ => components}/PostPrivacyDialog.html (74%)
 rename routes/_components/dialog/{ => components}/StatusOptionsDialog.html (83%)
 rename routes/_components/dialog/{ => components}/VideoDialog.html (70%)
 rename routes/_components/dialog/{ => creators}/showAccountProfileOptionsDialog.js (51%)
 create mode 100644 routes/_components/dialog/creators/showComposeDialog.js
 rename routes/_components/dialog/{ => creators}/showConfirmationDialog.js (50%)
 rename routes/_components/dialog/{ => creators}/showEmojiDialog.js (52%)
 rename routes/_components/dialog/{ => creators}/showImageDialog.js (59%)
 rename routes/_components/dialog/{ => creators}/showPostPrivacyDialog.js (52%)
 rename routes/_components/dialog/{ => creators}/showStatusOptionsDialog.js (52%)
 rename routes/_components/dialog/{ => creators}/showVideoDialog.js (58%)
 create mode 100644 routes/_components/dialog/helpers/closeDialog.js
 rename routes/_components/dialog/{ => helpers}/createDialogElement.js (100%)
 create mode 100644 routes/_components/dialog/helpers/createDialogId.js
 create mode 100644 routes/_components/dialog/helpers/onCreateDialog.js
 create mode 100644 routes/_components/dialog/helpers/showDialog.js
 delete mode 100644 routes/_components/dialog/showComposeDialog.js

diff --git a/routes/_components/dialog/AccountProfileOptionsDialog.html b/routes/_components/dialog/components/AccountProfileOptionsDialog.html
similarity index 64%
rename from routes/_components/dialog/AccountProfileOptionsDialog.html
rename to routes/_components/dialog/components/AccountProfileOptionsDialog.html
index 9a925a6..65d68b9 100644
--- a/routes/_components/dialog/AccountProfileOptionsDialog.html
+++ b/routes/_components/dialog/components/AccountProfileOptionsDialog.html
@@ -1,20 +1,27 @@
 <ModalDialog
+  :id
   :label
-  :shown
-  :closed
   :title
   background="var(--main-bg)"
-  on:destroyDialog="destroy()"
 >
   <GenericDialogList :items on:click="onClick(event)"/>
 </ModalDialog>
 <script>
 import ModalDialog from './ModalDialog.html'
-import { store } from '../../_store/store'
+import { store } from '../../../_store/store'
 import GenericDialogList from './GenericDialogList.html'
-import { importDialogs } from '../../_utils/asyncModules'
+import { importDialogs } from '../../../_utils/asyncModules'
+import { createDialogId } from '../helpers/createDialogId'
+import { show } from '../helpers/showDialog'
+import { close } from '../helpers/closeDialog'
+import { oncreate } from '../helpers/onCreateDialog'
 
 export default {
+  oncreate,
+  store: () => store,
+  data: () => ({
+    id: createDialogId()
+  }),
   computed: {
     items: (account) => (
       [
@@ -26,15 +33,9 @@ export default {
       ]
     )
   },
-  components: {
-    ModalDialog,
-    GenericDialogList
-  },
-  store: () => store,
   methods: {
-    async show() {
-      this.set({shown: true})
-    },
+    show,
+    close,
     async onClick() {
       let account = this.get('account')
       this.store.setComposeData('dialog', {
@@ -42,8 +43,12 @@ export default {
       })
       let dialogs = await importDialogs()
       dialogs.showComposeDialog()
-      this.set({closed: true})
+      this.close()
     }
-  }
+  },
+  components: {
+    ModalDialog,
+    GenericDialogList
+  },
 }
 </script>
\ No newline at end of file
diff --git a/routes/_components/dialog/ComposeDialog.html b/routes/_components/dialog/components/ComposeDialog.html
similarity index 54%
rename from routes/_components/dialog/ComposeDialog.html
rename to routes/_components/dialog/components/ComposeDialog.html
index eb947cc..4b0f466 100644
--- a/routes/_components/dialog/ComposeDialog.html
+++ b/routes/_components/dialog/components/ComposeDialog.html
@@ -1,41 +1,37 @@
 <ModalDialog
+  :id
   :label
-  :shown
-  :closed
   :title
   background="var(--main-bg)"
-  on:destroyDialog="destroy()"
 >
   <ComposeBox realm="dialog" size="slim" autoFocus="true" />
 </ModalDialog>
 <script>
   import ModalDialog from './ModalDialog.html'
-  import ComposeBox from '../compose/ComposeBox.html'
-  import { on } from '../../_utils/eventBus'
+  import ComposeBox from '../../compose/ComposeBox.html'
+  import { on } from '../../../_utils/eventBus'
+  import { show } from '../helpers/showDialog'
+  import { oncreate as onCreateDialog } from '../helpers/onCreateDialog'
+  import { close } from '../helpers/closeDialog'
 
   export default {
     oncreate() {
       on('postedStatus', this, this.onPostedStatus)
-    },
-    components: {
-      ModalDialog,
-      ComposeBox
+      onCreateDialog.call(this)
     },
     methods: {
-      async show() {
-        this.set({shown: true})
-      },
+      show,
+      close,
       onPostedStatus(realm) {
         if (realm !== 'dialog') {
           return
         }
-        try {
-          this.set({closed: true})
-        } catch (e) {
-          // TODO: this seems to error sometimes, not sure why
-          console.error(e)
-        }
+        this.close()
       }
+    },
+    components: {
+      ModalDialog,
+      ComposeBox
     }
   }
 </script>
\ No newline at end of file
diff --git a/routes/_components/dialog/ConfirmationDialog.html b/routes/_components/dialog/components/ConfirmationDialog.html
similarity index 69%
rename from routes/_components/dialog/ConfirmationDialog.html
rename to routes/_components/dialog/components/ConfirmationDialog.html
index ff72f0d..f678878 100644
--- a/routes/_components/dialog/ConfirmationDialog.html
+++ b/routes/_components/dialog/components/ConfirmationDialog.html
@@ -1,9 +1,7 @@
 <ModalDialog
+  :id
   :label
-  :shown
-  :closed background="var(--main-bg)"
-  on:close="onClose()"
-  on:destroyDialog="destroy()"
+  background="var(--main-bg)"
 >
   <form class="confirmation-dialog-form">
     <p>
@@ -36,16 +34,23 @@
 </style>
 <script>
   import ModalDialog from './ModalDialog.html'
+  import { show } from '../helpers/showDialog'
+  import { close } from '../helpers/closeDialog'
+  import { on } from '../../../_utils/eventBus'
+  import { oncreate as onCreateDialog } from '../helpers/onCreateDialog'
 
   export default {
-    components: {
-      ModalDialog
+    oncreate() {
+      on('destroyDialog', this, this.onDestroyDialog)
+      onCreateDialog.call(this)
     },
     methods: {
-      show() {
-        this.set({shown: true})
-      },
-      onClose() {
+      show,
+      close,
+      onDestroyDialog(id) {
+        if (id !== this.get('id')) {
+          return
+        }
         if (this.get('positiveResult')) {
           if (this.get('onPositive')) {
             this.get('onPositive')()
@@ -58,11 +63,14 @@
       },
       onPositive() {
         this.set({positiveResult: true})
-        this.set({closed: true})
+        this.close()
       },
       onNegative() {
-        this.set({closed: true})
+        this.close()
       }
+    },
+    components: {
+      ModalDialog
     }
   }
 </script>
\ No newline at end of file
diff --git a/routes/_components/dialog/EmojiDialog.html b/routes/_components/dialog/components/EmojiDialog.html
similarity index 84%
rename from routes/_components/dialog/EmojiDialog.html
rename to routes/_components/dialog/components/EmojiDialog.html
index e3be736..e90ef48 100644
--- a/routes/_components/dialog/EmojiDialog.html
+++ b/routes/_components/dialog/components/EmojiDialog.html
@@ -1,10 +1,8 @@
 <ModalDialog
+  :id
   :label
-  :shown
-  :closed
   :title
   background="var(--main-bg)"
-  on:destroyDialog="destroy()"
 >
   <div class="custom-emoji-container">
     {{#if emojis.length}}
@@ -60,10 +58,14 @@
 </style>
 <script>
   import ModalDialog from './ModalDialog.html'
-  import { store } from '../../_store/store'
-  import { insertEmoji } from '../../_actions/emoji'
+  import { store } from '../../../_store/store'
+  import { insertEmoji } from '../../../_actions/emoji'
+  import { show } from '../helpers/showDialog'
+  import { close } from '../helpers/closeDialog'
+  import { oncreate } from '../helpers/onCreateDialog'
 
   export default {
+    oncreate,
     components: {
       ModalDialog
     },
@@ -77,12 +79,11 @@
       }
     },
     methods: {
-      async show() {
-        this.set({shown: true})
-      },
+      show,
+      close,
       onClickEmoji(emoji) {
         insertEmoji(this.get('realm'), emoji)
-        this.set({closed: true})
+        this.close()
       }
     }
   }
diff --git a/routes/_components/dialog/GenericDialogList.html b/routes/_components/dialog/components/GenericDialogList.html
similarity index 100%
rename from routes/_components/dialog/GenericDialogList.html
rename to routes/_components/dialog/components/GenericDialogList.html
diff --git a/routes/_components/dialog/ImageDialog.html b/routes/_components/dialog/components/ImageDialog.html
similarity index 67%
rename from routes/_components/dialog/ImageDialog.html
rename to routes/_components/dialog/components/ImageDialog.html
index 5082dbd..749e165 100644
--- a/routes/_components/dialog/ImageDialog.html
+++ b/routes/_components/dialog/components/ImageDialog.html
@@ -1,9 +1,9 @@
-<ModalDialog :label
-             :shown
-             background="var(--muted-modal-bg)"
-             muted="true"
-             className="image-modal-dialog"
-             on:destroyDialog="destroy()"
+<ModalDialog
+  :id
+  :label
+  background="var(--muted-modal-bg)"
+  muted="true"
+  className="image-modal-dialog"
 >
   {{#if type === 'gifv'}}
     <AutoplayVideo
@@ -32,17 +32,18 @@
 </style>
 <script>
   import ModalDialog from './ModalDialog.html'
-  import AutoplayVideo from '../AutoplayVideo.html'
+  import AutoplayVideo from '../../AutoplayVideo.html'
+  import { show } from '../helpers/showDialog'
+  import { oncreate } from '../helpers/onCreateDialog'
 
   export default {
+    oncreate,
     components: {
       ModalDialog,
       AutoplayVideo
     },
     methods: {
-      async show() {
-        this.set({shown: true})
-      }
+      show
     }
   }
 </script>
\ No newline at end of file
diff --git a/routes/_components/dialog/ModalDialog.html b/routes/_components/dialog/components/ModalDialog.html
similarity index 82%
rename from routes/_components/dialog/ModalDialog.html
rename to routes/_components/dialog/components/ModalDialog.html
index 5311a3a..8702d21 100644
--- a/routes/_components/dialog/ModalDialog.html
+++ b/routes/_components/dialog/components/ModalDialog.html
@@ -116,10 +116,21 @@
 </style>
 <script>
   import A11yDialog from 'a11y-dialog'
-
-  import { classname } from '../../_utils/classname'
+  import { classname } from '../../../_utils/classname'
+  import { on, emit } from '../../../_utils/eventBus'
 
   export default {
+    oncreate() {
+      let dialogElement = this.refs.node.parentElement
+      this._a11yDialog = new A11yDialog(dialogElement)
+      this._a11yDialog.on('hide', () => {
+        this._a11yDialog.destroy()
+        emit('destroyDialog', this.get('id'))
+        requestAnimationFrame(() => document.body.removeChild(dialogElement))
+      })
+      on('showDialog', this, this.showDialog)
+      on('closeDialog', this, this.closeDialog)
+    },
     data: () => ({
       // don't animate if we're showing a modal dialog on top of another modal dialog. it looks ugly
       shouldAnimate: !process.browser || document.getElementsByClassName('modal-dialog').length < 2
@@ -142,31 +153,24 @@
         )
       }
     },
-    oncreate() {
-      let dialogElement = this.refs.node.parentElement
-      let a11yDialog = new A11yDialog(dialogElement)
-      a11yDialog.on('hide', () => {
-        a11yDialog.destroy()
-        this.fire('close')
-        console.log('destroyDialog()')
-        this.fire('destroyDialog')
-        requestAnimationFrame(() => document.body.removeChild(dialogElement))
-      })
-      this.observe('shown', shown => {
-        if (shown) {
-          a11yDialog.show()
-          requestAnimationFrame(() => {
-            this.set({ fadedIn: true })
-          })
+    methods: {
+      showDialog(id) {
+        if (this.get('id') !== id) {
+          return
         }
-      })
-      this.observe('closed', closed => {
-        if (closed) {
-          setTimeout(() => { // use setTimeout to workaround svelte timing issue
-            a11yDialog.hide()
-          }, 0)
+        this._a11yDialog.show()
+        requestAnimationFrame(() => {
+          this.set({ fadedIn: true })
+        })
+      },
+      closeDialog(id) {
+        if (this.get('id') !== id) {
+          return
         }
-      })
+        setTimeout(() => { // use setTimeout to workaround svelte timing issue
+          this._a11yDialog.hide()
+        }, 0)
+      }
     }
   }
 </script>
\ No newline at end of file
diff --git a/routes/_components/dialog/PostPrivacyDialog.html b/routes/_components/dialog/components/PostPrivacyDialog.html
similarity index 74%
rename from routes/_components/dialog/PostPrivacyDialog.html
rename to routes/_components/dialog/components/PostPrivacyDialog.html
index c8a04f7..7c7f724 100644
--- a/routes/_components/dialog/PostPrivacyDialog.html
+++ b/routes/_components/dialog/components/PostPrivacyDialog.html
@@ -1,21 +1,23 @@
 <ModalDialog
+  :id
   :label
-  :shown
-  :closed
   :title
   background="var(--main-bg)"
-  on:destroyDialog="destroy()"
 >
   <GenericDialogList :items on:click="onClick(event)" />
 </ModalDialog>
 <script>
   import ModalDialog from './ModalDialog.html'
-  import { store } from '../../_store/store'
-  import { POST_PRIVACY_OPTIONS } from '../../_static/statuses'
-  import { setPostPrivacy } from '../../_actions/postPrivacy'
+  import { store } from '../../../_store/store'
+  import { POST_PRIVACY_OPTIONS } from '../../../_static/statuses'
+  import { setPostPrivacy } from '../../../_actions/postPrivacy'
   import GenericDialogList from './GenericDialogList.html'
+  import { show } from '../helpers/showDialog'
+  import { close } from '../helpers/closeDialog'
+  import { oncreate } from '../helpers/onCreateDialog'
 
   export default {
+    oncreate,
     components: {
       ModalDialog,
       GenericDialogList
@@ -25,12 +27,11 @@
       postPrivacyOptions: POST_PRIVACY_OPTIONS
     }),
     methods: {
-      async show() {
-        this.set({shown: true})
-      },
+      show,
+      close,
       onClick(item) {
         setPostPrivacy(this.get('realm'), item.key)
-        this.set({closed: true})
+        this.close()
       }
     },
     computed: {
diff --git a/routes/_components/dialog/StatusOptionsDialog.html b/routes/_components/dialog/components/StatusOptionsDialog.html
similarity index 83%
rename from routes/_components/dialog/StatusOptionsDialog.html
rename to routes/_components/dialog/components/StatusOptionsDialog.html
index 27937fd..7580869 100644
--- a/routes/_components/dialog/StatusOptionsDialog.html
+++ b/routes/_components/dialog/components/StatusOptionsDialog.html
@@ -1,21 +1,23 @@
 <ModalDialog
+  :id
   :label
-  :shown
-  :closed
   :title
   background="var(--main-bg)"
-  on:destroyDialog="destroy()"
 >
   <GenericDialogList :items on:click="onClick(event)"/>
 </ModalDialog>
 <script>
 import ModalDialog from './ModalDialog.html'
-import { store } from '../../_store/store'
+import { store } from '../../../_store/store'
 import GenericDialogList from './GenericDialogList.html'
-import { setAccountFollowed } from '../../_actions/follow'
-import { doDeleteStatus } from '../../_actions/delete'
+import { setAccountFollowed } from '../../../_actions/follow'
+import { doDeleteStatus } from '../../../_actions/delete'
+import { show } from '../helpers/showDialog'
+import { close } from '../helpers/closeDialog'
+import { oncreate } from '../helpers/onCreateDialog'
 
 export default {
+  oncreate,
   computed: {
     relationship: ($currentAccountRelationship) => $currentAccountRelationship,
     account: ($currentAccountProfile) => $currentAccountProfile,
@@ -55,19 +57,18 @@ export default {
   },
   store: () => store,
   methods: {
-    async show() {
-      this.set({shown: true})
-    },
+    show,
+    close,
     async onClick(item) {
       if (item.key === 'follow') {
         let accountId = this.get('accountId')
         let following = this.get('following')
         await setAccountFollowed(accountId, !following, true)
-        this.set({closed: true})
+        this.close()
       } else if (item.key === 'delete') {
         let statusId = this.get('statusId')
         await doDeleteStatus(statusId)
-        this.set({closed: true})
+        this.close()
       }
     }
   }
diff --git a/routes/_components/dialog/VideoDialog.html b/routes/_components/dialog/components/VideoDialog.html
similarity index 70%
rename from routes/_components/dialog/VideoDialog.html
rename to routes/_components/dialog/components/VideoDialog.html
index 245a47e..1f55dfb 100644
--- a/routes/_components/dialog/VideoDialog.html
+++ b/routes/_components/dialog/components/VideoDialog.html
@@ -1,15 +1,14 @@
 <ModalDialog
+  :id
   :label
-  :shown
   background="var(--muted-modal-bg)"
   muted="true"
   className="video-modal-dialog"
-  on:destroyDialog="destroy()"
 >
-  <video poster="{{poster}}"
-         src="{{src}}"
-         width="{{width}}"
-         height="{{height}}"
+  <video :poster
+         :src
+         :width
+         :height
          aria-label="Video: {{description || ''}}"
          controls
   />
@@ -24,15 +23,16 @@
 </style>
 <script>
   import ModalDialog from './ModalDialog.html'
+  import { show } from '../helpers/showDialog'
+  import { oncreate } from '../helpers/onCreateDialog'
 
   export default {
+    oncreate,
     components: {
       ModalDialog
     },
     methods: {
-      async show() {
-        this.set({shown: true})
-      }
+      show
     }
   }
 </script>
\ No newline at end of file
diff --git a/routes/_components/dialog/showAccountProfileOptionsDialog.js b/routes/_components/dialog/creators/showAccountProfileOptionsDialog.js
similarity index 51%
rename from routes/_components/dialog/showAccountProfileOptionsDialog.js
rename to routes/_components/dialog/creators/showAccountProfileOptionsDialog.js
index 8e0593c..9083201 100644
--- a/routes/_components/dialog/showAccountProfileOptionsDialog.js
+++ b/routes/_components/dialog/creators/showAccountProfileOptionsDialog.js
@@ -1,10 +1,12 @@
-import AccountProfileOptionsDialog from './AccountProfileOptionsDialog.html'
-import { createDialogElement } from './createDialogElement'
+import AccountProfileOptionsDialog from '../components/AccountProfileOptionsDialog.html'
+import { createDialogElement } from '../helpers/createDialogElement'
+import { createDialogId } from '../helpers/createDialogId'
 
 export function showAccountProfileOptionsDialog (account) {
   let dialog = new AccountProfileOptionsDialog({
     target: createDialogElement(),
     data: {
+      id: createDialogId(),
       label: 'Profile options dialog',
       title: '',
       account: account
diff --git a/routes/_components/dialog/creators/showComposeDialog.js b/routes/_components/dialog/creators/showComposeDialog.js
new file mode 100644
index 0000000..ee45775
--- /dev/null
+++ b/routes/_components/dialog/creators/showComposeDialog.js
@@ -0,0 +1,14 @@
+import ComposeDialog from '../components/ComposeDialog.html'
+import { createDialogElement } from '../helpers/createDialogElement'
+import { createDialogId } from '../helpers/createDialogId'
+
+export function showComposeDialog () {
+  let dialog = new ComposeDialog({
+    target: createDialogElement(),
+    data: {
+      id: createDialogId(),
+      label: 'Compose dialog'
+    }
+  })
+  dialog.show()
+}
diff --git a/routes/_components/dialog/showConfirmationDialog.js b/routes/_components/dialog/creators/showConfirmationDialog.js
similarity index 50%
rename from routes/_components/dialog/showConfirmationDialog.js
rename to routes/_components/dialog/creators/showConfirmationDialog.js
index 1fd6be0..e023e12 100644
--- a/routes/_components/dialog/showConfirmationDialog.js
+++ b/routes/_components/dialog/creators/showConfirmationDialog.js
@@ -1,10 +1,12 @@
-import ConfirmationDialog from './ConfirmationDialog.html'
-import { createDialogElement } from './createDialogElement'
+import ConfirmationDialog from '../components/ConfirmationDialog.html'
+import { createDialogElement } from '../helpers/createDialogElement'
+import { createDialogId } from '../helpers/createDialogId'
 
 export function showConfirmationDialog (options) {
   let dialog = new ConfirmationDialog({
     target: createDialogElement(),
     data: Object.assign({
+      id: createDialogId(),
       label: 'Confirmation dialog'
     }, options)
   })
diff --git a/routes/_components/dialog/showEmojiDialog.js b/routes/_components/dialog/creators/showEmojiDialog.js
similarity index 52%
rename from routes/_components/dialog/showEmojiDialog.js
rename to routes/_components/dialog/creators/showEmojiDialog.js
index ba56e0d..7bead1f 100644
--- a/routes/_components/dialog/showEmojiDialog.js
+++ b/routes/_components/dialog/creators/showEmojiDialog.js
@@ -1,10 +1,12 @@
-import EmojiDialog from './EmojiDialog.html'
-import { createDialogElement } from './createDialogElement'
+import EmojiDialog from '../components/EmojiDialog.html'
+import { createDialogElement } from '../helpers/createDialogElement'
+import { createDialogId } from '../helpers/createDialogId'
 
 export function showEmojiDialog (realm) {
   let emojiDialog = new EmojiDialog({
     target: createDialogElement(),
     data: {
+      id: createDialogId(),
       label: 'Emoji dialog',
       title: 'Custom emoji',
       realm
diff --git a/routes/_components/dialog/showImageDialog.js b/routes/_components/dialog/creators/showImageDialog.js
similarity index 59%
rename from routes/_components/dialog/showImageDialog.js
rename to routes/_components/dialog/creators/showImageDialog.js
index 530cda6..4338350 100644
--- a/routes/_components/dialog/showImageDialog.js
+++ b/routes/_components/dialog/creators/showImageDialog.js
@@ -1,10 +1,12 @@
-import ImageDialog from './ImageDialog.html'
-import { createDialogElement } from './createDialogElement'
+import ImageDialog from '../components/ImageDialog.html'
+import { createDialogElement } from '../helpers/createDialogElement'
+import { createDialogId } from '../helpers/createDialogId'
 
 export function showImageDialog (poster, src, type, width, height, description) {
   let imageDialog = new ImageDialog({
     target: createDialogElement(),
     data: {
+      id: createDialogId(),
       label: 'Image dialog',
       poster,
       src,
diff --git a/routes/_components/dialog/showPostPrivacyDialog.js b/routes/_components/dialog/creators/showPostPrivacyDialog.js
similarity index 52%
rename from routes/_components/dialog/showPostPrivacyDialog.js
rename to routes/_components/dialog/creators/showPostPrivacyDialog.js
index 6c38490..bfeab4d 100644
--- a/routes/_components/dialog/showPostPrivacyDialog.js
+++ b/routes/_components/dialog/creators/showPostPrivacyDialog.js
@@ -1,10 +1,12 @@
-import PostPrivacyDialog from './PostPrivacyDialog.html'
-import { createDialogElement } from './createDialogElement'
+import PostPrivacyDialog from '../components/PostPrivacyDialog.html'
+import { createDialogElement } from '../helpers/createDialogElement'
+import { createDialogId } from '../helpers/createDialogId'
 
 export function showPostPrivacyDialog (realm) {
   let dialog = new PostPrivacyDialog({
     target: createDialogElement(),
     data: {
+      id: createDialogId(),
       label: 'Post privacy dialog',
       title: 'Post privacy',
       realm: realm
diff --git a/routes/_components/dialog/showStatusOptionsDialog.js b/routes/_components/dialog/creators/showStatusOptionsDialog.js
similarity index 52%
rename from routes/_components/dialog/showStatusOptionsDialog.js
rename to routes/_components/dialog/creators/showStatusOptionsDialog.js
index 66e6166..358d134 100644
--- a/routes/_components/dialog/showStatusOptionsDialog.js
+++ b/routes/_components/dialog/creators/showStatusOptionsDialog.js
@@ -1,10 +1,12 @@
-import StatusOptionsDialog from './StatusOptionsDialog.html'
-import { createDialogElement } from './createDialogElement'
+import StatusOptionsDialog from '../components/StatusOptionsDialog.html'
+import { createDialogElement } from '../helpers/createDialogElement'
+import { createDialogId } from '../helpers/createDialogId'
 
 export function showStatusOptionsDialog (statusId) {
   let dialog = new StatusOptionsDialog({
     target: createDialogElement(),
     data: {
+      id: createDialogId(),
       label: 'Status options dialog',
       title: '',
       statusId: statusId
diff --git a/routes/_components/dialog/showVideoDialog.js b/routes/_components/dialog/creators/showVideoDialog.js
similarity index 58%
rename from routes/_components/dialog/showVideoDialog.js
rename to routes/_components/dialog/creators/showVideoDialog.js
index 28a0295..7e36ec2 100644
--- a/routes/_components/dialog/showVideoDialog.js
+++ b/routes/_components/dialog/creators/showVideoDialog.js
@@ -1,10 +1,12 @@
-import VideoDialog from './VideoDialog.html'
-import { createDialogElement } from './createDialogElement'
+import VideoDialog from '../components/VideoDialog.html'
+import { createDialogElement } from '../helpers/createDialogElement'
+import { createDialogId } from '../helpers/createDialogId'
 
 export function showVideoDialog (poster, src, width, height, description) {
   let videoDialog = new VideoDialog({
     target: createDialogElement(),
     data: {
+      id: createDialogId(),
       label: 'Video dialog',
       poster,
       src,
diff --git a/routes/_components/dialog/dialogs.js b/routes/_components/dialog/dialogs.js
index 691541e..6bea445 100644
--- a/routes/_components/dialog/dialogs.js
+++ b/routes/_components/dialog/dialogs.js
@@ -1,8 +1,8 @@
-export * from './showConfirmationDialog'
-export * from './showImageDialog'
-export * from './showVideoDialog'
-export * from './showEmojiDialog'
-export * from './showPostPrivacyDialog'
-export * from './showStatusOptionsDialog'
-export * from './showComposeDialog'
-export * from './showAccountProfileOptionsDialog'
+export * from './creators/showConfirmationDialog'
+export * from './creators/showImageDialog'
+export * from './creators/showVideoDialog'
+export * from './creators/showEmojiDialog'
+export * from './creators/showPostPrivacyDialog'
+export * from './creators/showStatusOptionsDialog'
+export * from './creators/showComposeDialog'
+export * from './creators/showAccountProfileOptionsDialog'
diff --git a/routes/_components/dialog/helpers/closeDialog.js b/routes/_components/dialog/helpers/closeDialog.js
new file mode 100644
index 0000000..351d1c0
--- /dev/null
+++ b/routes/_components/dialog/helpers/closeDialog.js
@@ -0,0 +1,6 @@
+import { emit } from '../../../_utils/eventBus'
+
+export function close () {
+  let id = this.get('id')
+  emit('closeDialog', id)
+}
diff --git a/routes/_components/dialog/createDialogElement.js b/routes/_components/dialog/helpers/createDialogElement.js
similarity index 100%
rename from routes/_components/dialog/createDialogElement.js
rename to routes/_components/dialog/helpers/createDialogElement.js
diff --git a/routes/_components/dialog/helpers/createDialogId.js b/routes/_components/dialog/helpers/createDialogId.js
new file mode 100644
index 0000000..12f63da
--- /dev/null
+++ b/routes/_components/dialog/helpers/createDialogId.js
@@ -0,0 +1,5 @@
+let count = -1
+
+export function createDialogId () {
+  return ++count
+}
\ No newline at end of file
diff --git a/routes/_components/dialog/helpers/onCreateDialog.js b/routes/_components/dialog/helpers/onCreateDialog.js
new file mode 100644
index 0000000..6a04a06
--- /dev/null
+++ b/routes/_components/dialog/helpers/onCreateDialog.js
@@ -0,0 +1,12 @@
+import { on } from '../../../_utils/eventBus'
+
+function onDestroy (id) {
+  if (this.get('id') !== id) {
+    return
+  }
+  this.destroy()
+}
+
+export function oncreate () {
+  on('destroyDialog', this, onDestroy)
+}
diff --git a/routes/_components/dialog/helpers/showDialog.js b/routes/_components/dialog/helpers/showDialog.js
new file mode 100644
index 0000000..651a785
--- /dev/null
+++ b/routes/_components/dialog/helpers/showDialog.js
@@ -0,0 +1,6 @@
+import { emit } from '../../../_utils/eventBus'
+
+export function show () {
+  let id = this.get('id')
+  emit('showDialog', id)
+}
diff --git a/routes/_components/dialog/showComposeDialog.js b/routes/_components/dialog/showComposeDialog.js
deleted file mode 100644
index bd4612c..0000000
--- a/routes/_components/dialog/showComposeDialog.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import ComposeDialog from './ComposeDialog.html'
-import { createDialogElement } from './createDialogElement'
-
-export function showComposeDialog () {
-  let dialog = new ComposeDialog({
-    target: createDialogElement(),
-    data: {
-      label: 'Compose dialog'
-    }
-  })
-  dialog.show()
-}
diff --git a/tests/spec/108-compose-dialog.js b/tests/spec/108-compose-dialog.js
index 516de28..0218a88 100644
--- a/tests/spec/108-compose-dialog.js
+++ b/tests/spec/108-compose-dialog.js
@@ -3,6 +3,7 @@ import {
   scrollContainerToTop
 } from '../utils'
 import { foobarRole } from '../roles'
+import { Selector as $ } from 'testcafe'
 
 fixture`108-compose-dialog.js`
   .page`http://localhost:4002`
@@ -27,3 +28,24 @@ test('can compose using a dialog', async t => {
     .click(showMoreButton)
   await t.expect(getNthStatus(0).innerText).contains('hello from the modal', {timeout: 20000})
 })
+
+test('can use emoji dialog within compose dialog', async t => {
+  await t.useRole(foobarRole)
+  await scrollToStatus(t, 15)
+  await t.expect(composeButton.getAttribute('aria-label')).eql('Compose')
+  await sleep(2000)
+  await t.click(composeButton)
+    .click(modalDialog.find('.compose-box-toolbar button:nth-child(1)'))
+    .click($('button img[title=":blobpats:"]'))
+    .expect(modalDialog.find('.compose-box-input').value).eql(':blobpats: ')
+    .click(modalDialog.find('.compose-box-button-compose'))
+    .expect(modalDialog.exists).notOk()
+  await sleep(5000)
+  await scrollToTopOfTimeline(t)
+  await t.hover(getNthStatus(0))
+  await scrollContainerToTop()
+  await t
+    .expect(showMoreButton.innerText).contains('Show 1 more')
+    .click(showMoreButton)
+  await t.expect(getNthStatus(0).find('img[alt=":blobpats:"]').exists).ok({timeout: 20000})
+})
\ No newline at end of file