From 12131bd8077c5ba47590e16004e2c3e1dbc00dcf Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sat, 21 Apr 2018 09:56:53 -0700
Subject: [PATCH] refactor dialogs to be individually async (#206)

---
 package.json                                  |  3 +-
 routes/_components/compose/ComposeBox.html    |  6 ++--
 .../_components/compose/ComposeToolbar.html   | 10 +++---
 routes/_components/dialog/asyncDialogs.js     | 31 +++++++++++++++++++
 .../AccountProfileOptionsDialog.html          |  6 ++--
 .../showAccountProfileOptionsDialog.js        |  2 +-
 .../dialog/creators/showComposeDialog.js      |  2 +-
 .../dialog/creators/showConfirmationDialog.js |  2 +-
 .../dialog/creators/showEmojiDialog.js        |  2 +-
 .../dialog/creators/showImageDialog.js        |  2 +-
 .../dialog/creators/showPostPrivacyDialog.js  |  2 +-
 .../creators/showStatusOptionsDialog.js       |  2 +-
 .../dialog/creators/showVideoDialog.js        |  2 +-
 routes/_components/dialog/dialogs.js          |  8 -----
 .../profile/AccountProfileDetails.html        |  6 ++--
 routes/_components/status/Media.html          | 10 +++---
 routes/_components/status/StatusToolbar.html  |  6 ++--
 .../settings/instances/[instanceName].html    |  6 ++--
 routes/_utils/asyncModules.js                 |  4 ---
 19 files changed, 66 insertions(+), 46 deletions(-)
 create mode 100644 routes/_components/dialog/asyncDialogs.js
 delete mode 100644 routes/_components/dialog/dialogs.js

diff --git a/package.json b/package.json
index 89d5faf..d2e0c7d 100644
--- a/package.json
+++ b/package.json
@@ -123,7 +123,8 @@
     ],
     "ignore": [
       "dist",
-      "routes/_utils/asyncModules.js"
+      "routes/_utils/asyncModules.js",
+      "routes/_components/dialog/asyncDialogs.js"
     ]
   },
   "esm": {
diff --git a/routes/_components/compose/ComposeBox.html b/routes/_components/compose/ComposeBox.html
index 88533ba..b8d7d09 100644
--- a/routes/_components/compose/ComposeBox.html
+++ b/routes/_components/compose/ComposeBox.html
@@ -113,7 +113,7 @@
   import { store } from '../../_store/store'
   import { slide } from 'svelte-transitions'
   import { postStatus, insertHandleForReply, setReplySpoiler, setReplyVisibility } from '../../_actions/compose'
-  import { importDialogs } from '../../_utils/asyncModules'
+  import { importShowComposeDialog } from '../dialog/asyncDialogs'
   import { classname } from '../../_utils/classname'
 
   export default {
@@ -189,8 +189,8 @@
         if (sticky) {
           // when the button is sticky, we're scrolled down the home timeline,
           // so we should launch a new compose dialog
-          let dialogs = await importDialogs()
-          dialogs.showComposeDialog()
+          let showComposeDialog = await importShowComposeDialog()
+          showComposeDialog()
         } else {
           // else we're actually posting a new toot
           this.doPostStatus()
diff --git a/routes/_components/compose/ComposeToolbar.html b/routes/_components/compose/ComposeToolbar.html
index 5d0b282..14a5fba 100644
--- a/routes/_components/compose/ComposeToolbar.html
+++ b/routes/_components/compose/ComposeToolbar.html
@@ -46,7 +46,7 @@
 <script>
   import IconButton from '../IconButton.html'
   import { store } from '../../_store/store'
-  import { importDialogs } from '../../_utils/asyncModules'
+  import { importShowEmojiDialog, importShowPostPrivacyDialog } from '../dialog/asyncDialogs'
   import { doMediaUpload } from '../../_actions/media'
   import { toggleContentWarningShown } from '../../_actions/contentWarnings'
   import ComposeAutosuggest from './ComposeAutosuggest.html'
@@ -70,9 +70,9 @@
     store: () => store,
     methods: {
       async onEmojiClick () {
-        let dialogs = await importDialogs()
         let { realm } = this.get()
-        dialogs.showEmojiDialog(realm)
+        let showEmojiDialog = await importShowEmojiDialog()
+        showEmojiDialog(realm)
       },
       onMediaClick () {
         this.refs.input.click()
@@ -83,9 +83,9 @@
         doMediaUpload(realm, file)
       },
       async onPostPrivacyClick () {
-        let dialogs = await importDialogs()
         let { realm } = this.get()
-        dialogs.showPostPrivacyDialog(realm)
+        let showPostPrivacyDialog = await importShowPostPrivacyDialog()
+        showPostPrivacyDialog(realm)
       },
       onContentWarningClick () {
         let { realm } = this.get()
diff --git a/routes/_components/dialog/asyncDialogs.js b/routes/_components/dialog/asyncDialogs.js
new file mode 100644
index 0000000..b3eeb7a
--- /dev/null
+++ b/routes/_components/dialog/asyncDialogs.js
@@ -0,0 +1,31 @@
+export const importShowAccountProfileOptionsDialog = () => import(
+  /* webpackChunkName: 'showAccountProfileOptionsDialog' */ './creators/showAccountProfileOptionsDialog'
+  ).then(mod => mod.default)
+
+export const importShowComposeDialog = () => import(
+  /* webpackChunkName: 'showComposeDialog' */ './creators/showComposeDialog'
+  ).then(mod => mod.default)
+
+export const importShowConfirmationDialog = () => import(
+  /* webpackChunkName: 'showConfirmationDialog' */ './creators/showConfirmationDialog'
+  ).then(mod => mod.default)
+
+export const importShowEmojiDialog = () => import(
+  /* webpackChunkName: 'showEmojiDialog' */ './creators/showEmojiDialog'
+  ).then(mod => mod.default)
+
+export const importShowImageDialog = () => import(
+  /* webpackChunkName: 'showImageDialog' */ './creators/showImageDialog'
+  ).then(mod => mod.default)
+
+export const importShowPostPrivacyDialog = () => import(
+  /* webpackChunkName: 'showPostPrivacyDialog' */ './creators/showPostPrivacyDialog'
+  ).then(mod => mod.default)
+
+export const importShowStatusOptionsDialog = () => import(
+  /* webpackChunkName: 'showStatusOptionsDialog' */ './creators/showStatusOptionsDialog'
+  ).then(mod => mod.default)
+
+export const importShowVideoDialog = () => import(
+  /* webpackChunkName: 'showVideoDialog' */ './creators/showVideoDialog'
+  ).then(mod => mod.default)
\ No newline at end of file
diff --git a/routes/_components/dialog/components/AccountProfileOptionsDialog.html b/routes/_components/dialog/components/AccountProfileOptionsDialog.html
index c78f769..cf9cb30 100644
--- a/routes/_components/dialog/components/AccountProfileOptionsDialog.html
+++ b/routes/_components/dialog/components/AccountProfileOptionsDialog.html
@@ -10,7 +10,7 @@
 import ModalDialog from './ModalDialog.html'
 import { store } from '../../../_store/store'
 import GenericDialogList from './GenericDialogList.html'
-import { importDialogs } from '../../../_utils/asyncModules'
+import { importShowComposeDialog } from '../asyncDialogs'
 import { createDialogId } from '../helpers/createDialogId'
 import { show } from '../helpers/showDialog'
 import { close } from '../helpers/closeDialog'
@@ -103,8 +103,8 @@ export default {
       this.store.setComposeData('dialog', {
         text: `@${acct} `
       })
-      let dialogs = await importDialogs()
-      dialogs.showComposeDialog()
+      let showComposeDialog = await importShowComposeDialog()
+      showComposeDialog()
       this.close()
     },
     async onFollowClicked () {
diff --git a/routes/_components/dialog/creators/showAccountProfileOptionsDialog.js b/routes/_components/dialog/creators/showAccountProfileOptionsDialog.js
index 3dd964f..3095891 100644
--- a/routes/_components/dialog/creators/showAccountProfileOptionsDialog.js
+++ b/routes/_components/dialog/creators/showAccountProfileOptionsDialog.js
@@ -2,7 +2,7 @@ import AccountProfileOptionsDialog from '../components/AccountProfileOptionsDial
 import { createDialogElement } from '../helpers/createDialogElement'
 import { createDialogId } from '../helpers/createDialogId'
 
-export function showAccountProfileOptionsDialog (account, relationship, verifyCredentials) {
+export default function showAccountProfileOptionsDialog (account, relationship, verifyCredentials) {
   let dialog = new AccountProfileOptionsDialog({
     target: createDialogElement(),
     data: {
diff --git a/routes/_components/dialog/creators/showComposeDialog.js b/routes/_components/dialog/creators/showComposeDialog.js
index ee45775..da72e29 100644
--- a/routes/_components/dialog/creators/showComposeDialog.js
+++ b/routes/_components/dialog/creators/showComposeDialog.js
@@ -2,7 +2,7 @@ import ComposeDialog from '../components/ComposeDialog.html'
 import { createDialogElement } from '../helpers/createDialogElement'
 import { createDialogId } from '../helpers/createDialogId'
 
-export function showComposeDialog () {
+export default function showComposeDialog () {
   let dialog = new ComposeDialog({
     target: createDialogElement(),
     data: {
diff --git a/routes/_components/dialog/creators/showConfirmationDialog.js b/routes/_components/dialog/creators/showConfirmationDialog.js
index e023e12..6b66011 100644
--- a/routes/_components/dialog/creators/showConfirmationDialog.js
+++ b/routes/_components/dialog/creators/showConfirmationDialog.js
@@ -2,7 +2,7 @@ import ConfirmationDialog from '../components/ConfirmationDialog.html'
 import { createDialogElement } from '../helpers/createDialogElement'
 import { createDialogId } from '../helpers/createDialogId'
 
-export function showConfirmationDialog (options) {
+export default function showConfirmationDialog (options) {
   let dialog = new ConfirmationDialog({
     target: createDialogElement(),
     data: Object.assign({
diff --git a/routes/_components/dialog/creators/showEmojiDialog.js b/routes/_components/dialog/creators/showEmojiDialog.js
index 7bead1f..107f1f9 100644
--- a/routes/_components/dialog/creators/showEmojiDialog.js
+++ b/routes/_components/dialog/creators/showEmojiDialog.js
@@ -2,7 +2,7 @@ import EmojiDialog from '../components/EmojiDialog.html'
 import { createDialogElement } from '../helpers/createDialogElement'
 import { createDialogId } from '../helpers/createDialogId'
 
-export function showEmojiDialog (realm) {
+export default function showEmojiDialog (realm) {
   let emojiDialog = new EmojiDialog({
     target: createDialogElement(),
     data: {
diff --git a/routes/_components/dialog/creators/showImageDialog.js b/routes/_components/dialog/creators/showImageDialog.js
index 4338350..0202bed 100644
--- a/routes/_components/dialog/creators/showImageDialog.js
+++ b/routes/_components/dialog/creators/showImageDialog.js
@@ -2,7 +2,7 @@ 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) {
+export default function showImageDialog (poster, src, type, width, height, description) {
   let imageDialog = new ImageDialog({
     target: createDialogElement(),
     data: {
diff --git a/routes/_components/dialog/creators/showPostPrivacyDialog.js b/routes/_components/dialog/creators/showPostPrivacyDialog.js
index bfeab4d..7e7cf58 100644
--- a/routes/_components/dialog/creators/showPostPrivacyDialog.js
+++ b/routes/_components/dialog/creators/showPostPrivacyDialog.js
@@ -2,7 +2,7 @@ import PostPrivacyDialog from '../components/PostPrivacyDialog.html'
 import { createDialogElement } from '../helpers/createDialogElement'
 import { createDialogId } from '../helpers/createDialogId'
 
-export function showPostPrivacyDialog (realm) {
+export default function showPostPrivacyDialog (realm) {
   let dialog = new PostPrivacyDialog({
     target: createDialogElement(),
     data: {
diff --git a/routes/_components/dialog/creators/showStatusOptionsDialog.js b/routes/_components/dialog/creators/showStatusOptionsDialog.js
index 358d134..9dd5ce8 100644
--- a/routes/_components/dialog/creators/showStatusOptionsDialog.js
+++ b/routes/_components/dialog/creators/showStatusOptionsDialog.js
@@ -2,7 +2,7 @@ import StatusOptionsDialog from '../components/StatusOptionsDialog.html'
 import { createDialogElement } from '../helpers/createDialogElement'
 import { createDialogId } from '../helpers/createDialogId'
 
-export function showStatusOptionsDialog (statusId) {
+export default function showStatusOptionsDialog (statusId) {
   let dialog = new StatusOptionsDialog({
     target: createDialogElement(),
     data: {
diff --git a/routes/_components/dialog/creators/showVideoDialog.js b/routes/_components/dialog/creators/showVideoDialog.js
index 7e36ec2..7b17208 100644
--- a/routes/_components/dialog/creators/showVideoDialog.js
+++ b/routes/_components/dialog/creators/showVideoDialog.js
@@ -2,7 +2,7 @@ import VideoDialog from '../components/VideoDialog.html'
 import { createDialogElement } from '../helpers/createDialogElement'
 import { createDialogId } from '../helpers/createDialogId'
 
-export function showVideoDialog (poster, src, width, height, description) {
+export default function showVideoDialog (poster, src, width, height, description) {
   let videoDialog = new VideoDialog({
     target: createDialogElement(),
     data: {
diff --git a/routes/_components/dialog/dialogs.js b/routes/_components/dialog/dialogs.js
deleted file mode 100644
index 6bea445..0000000
--- a/routes/_components/dialog/dialogs.js
+++ /dev/null
@@ -1,8 +0,0 @@
-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/profile/AccountProfileDetails.html b/routes/_components/profile/AccountProfileDetails.html
index db39b71..4a89b5b 100644
--- a/routes/_components/profile/AccountProfileDetails.html
+++ b/routes/_components/profile/AccountProfileDetails.html
@@ -106,7 +106,7 @@
 </style>
 <script>
   import IconButton from '../IconButton.html'
-  import { importDialogs } from '../../_utils/asyncModules'
+  import { importShowAccountProfileOptionsDialog } from '../dialog/asyncDialogs'
 
   const numberFormat = new Intl.NumberFormat('en-US')
 
@@ -122,8 +122,8 @@
     methods: {
       async onMoreOptionsClick () {
         let { account, relationship, verifyCredentials } = this.get()
-        let dialogs = await importDialogs()
-        dialogs.showAccountProfileOptionsDialog(account, relationship, verifyCredentials)
+        let showAccountProfileOptionsDialog = await importShowAccountProfileOptionsDialog()
+        showAccountProfileOptionsDialog(account, relationship, verifyCredentials)
       }
     },
     components: {
diff --git a/routes/_components/status/Media.html b/routes/_components/status/Media.html
index eae1002..75cf33e 100644
--- a/routes/_components/status/Media.html
+++ b/routes/_components/status/Media.html
@@ -98,7 +98,7 @@
 </style>
 <script>
   import { DEFAULT_MEDIA_WIDTH, DEFAULT_MEDIA_HEIGHT, ONE_TRANSPARENT_PIXEL } from '../../_static/media'
-  import { importDialogs } from '../../_utils/asyncModules'
+  import { importShowVideoDialog, importShowImageDialog } from '../dialog/asyncDialogs'
   import { mouseover } from '../../_utils/events'
   import NonAutoplayGifv from '../NonAutoplayGifv.html'
   import PlayVideoIcon from '../PlayVideoIcon.html'
@@ -143,14 +143,14 @@
     methods: {
       async onClickPlayVideoButton () {
         let { previewUrl, url, modalWidth, modalHeight, description } = this.get()
-        let dialogs = await importDialogs()
-        dialogs.showVideoDialog(previewUrl, url,
+        let showVideoDialog = await importShowVideoDialog()
+        showVideoDialog(previewUrl, url,
           modalWidth, modalHeight, description)
       },
       async onClickShowImageButton () {
         let { previewUrl, url, modalWidth, modalHeight, description, type } = this.get()
-        let dialogs = await importDialogs()
-        dialogs.showImageDialog(previewUrl, url, type,
+        let showImageDialog = await importShowImageDialog()
+        showImageDialog(previewUrl, url, type,
           modalWidth, modalHeight, description)
       }
     },
diff --git a/routes/_components/status/StatusToolbar.html b/routes/_components/status/StatusToolbar.html
index 8795fb3..4872f38 100644
--- a/routes/_components/status/StatusToolbar.html
+++ b/routes/_components/status/StatusToolbar.html
@@ -47,7 +47,7 @@
   import { registerClickDelegates } from '../../_utils/delegate'
   import { setFavorited } from '../../_actions/favorite'
   import { setReblogged } from '../../_actions/reblog'
-  import { importDialogs } from '../../_utils/asyncModules'
+  import { importShowStatusOptionsDialog } from '../dialog/asyncDialogs'
   import { updateProfileAndRelationship } from '../../_actions/accounts'
   import { FAVORITE_ANIMATION, REBLOG_ANIMATION } from '../../_static/animations'
   import { on } from '../../_utils/eventBus'
@@ -109,9 +109,9 @@
         e.stopPropagation()
         let { originalStatusId, originalAccountId } = this.get()
         let updateRelationshipPromise = updateProfileAndRelationship(originalAccountId)
-        let dialogs = await importDialogs()
+        let showStatusOptionsDialog = await importShowStatusOptionsDialog()
         await updateRelationshipPromise
-        dialogs.showStatusOptionsDialog(originalStatusId)
+        showStatusOptionsDialog(originalStatusId)
       },
       onPostedStatus (realm, inReplyToUuid) {
         let {
diff --git a/routes/_pages/settings/instances/[instanceName].html b/routes/_pages/settings/instances/[instanceName].html
index 0ec35ef..73b0e62 100644
--- a/routes/_pages/settings/instances/[instanceName].html
+++ b/routes/_pages/settings/instances/[instanceName].html
@@ -95,7 +95,7 @@
   import SettingsLayout from '../../../_components/settings/SettingsLayout.html'
   import ExternalLink from '../../../_components/ExternalLink.html'
   import Avatar from '../../../_components/Avatar.html'
-  import { importDialogs } from '../../../_utils/asyncModules'
+  import { importShowConfirmationDialog } from '../../../_components/dialog/asyncDialogs'
   import {
     changeTheme,
     switchToInstance,
@@ -137,8 +137,8 @@
         e.preventDefault()
         let { instanceName } = this.get()
 
-        let dialogs = await importDialogs()
-        dialogs.showConfirmationDialog({
+        let showConfirmationDialog = await importShowConfirmationDialog()
+        showConfirmationDialog({
           text: `Log out of ${instanceName}?`,
           onPositive () {
             logOutOfInstance(instanceName)
diff --git a/routes/_utils/asyncModules.js b/routes/_utils/asyncModules.js
index 6e362cf..227bbe5 100644
--- a/routes/_utils/asyncModules.js
+++ b/routes/_utils/asyncModules.js
@@ -22,10 +22,6 @@ export const importWebSocketClient = () => import(
   /* webpackChunkName: '@gamestdio/websocket' */ '@gamestdio/websocket'
   ).then(mod => mod.default)
 
-export const importDialogs = () => import(
-  /* webpackChunkName: 'dialogs' */ '../_components/dialog/dialogs.js'
-  )
-
 export const importVirtualList = () => import(
   /* webpackChunkName: 'VirtualList.html' */ '../_components/virtualList/VirtualList.html'
   ).then(mod => mod.default)