start using an event bus

package-lock.json

@@ -3186,9 +3186,9 @@
       }
     },
     "events": {
-      "version": "1.1.1",
+      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/events/-/events-1.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/events/-/events-2.0.0.tgz",
-      "integrity": "sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ="
+      "integrity": "sha512-r/M5YkNg9zwI8QbSf7tsDWWJvO3PGwZXyG7GpFAxtMASnHL2eblFd7iHiGPtyGKKFPZ59S63NeX10Ws6WqGDcg=="
     },
     "evp_bytestokey": {
       "version": "1.0.3",
@@ -6369,6 +6369,13 @@
         "url": "0.11.0",
         "util": "0.10.3",
         "vm-browserify": "0.0.4"
+      },
+      "dependencies": {
+        "events": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/events/-/events-1.1.1.tgz",
+          "integrity": "sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ="
+        }
       }
     },
     "node-sass": {

package.json

@@ -39,6 +39,7 @@
     "cross-env": "^5.1.3",
     "css-loader": "^0.28.7",
     "esm": "^3.0.12",
+    "events": "^2.0.0",
     "express": "^4.16.2",
     "fg-loadcss": "^2.0.1",
     "file-api": "^0.10.4",

routes/_actions/compose.js

@@ -3,6 +3,7 @@ import { toast } from '../_utils/toast'
 import { postStatus as postStatusToServer } from '../_api/statuses'
 import { addStatusOrNotification } from './addStatusOrNotification'
 import { database } from '../_database/database'
+import { emit } from '../_utils/eventBus'
 
 export async function insertHandleForReply (statusId) {
   let instanceName = store.get('currentInstance')
@@ -30,17 +31,14 @@ export async function postStatus (realm, text, inReplyToId, mediaIds,
   }
 
   store.set({
-    postingStatus: true,
+    postingStatus: true
-    postedStatusForRealm: null
   })
   try {
     let status = await postStatusToServer(instanceName, accessToken, text,
       inReplyToId, mediaIds, sensitive, spoilerText, visibility)
     addStatusOrNotification(instanceName, 'home', status)
     store.clearComposeData(realm)
-    store.set({
+    emit('postedStatus', realm)
-      postedStatusForRealm: realm
-    })
   } catch (e) {
     console.error(e)
     toast.say('Unable to post status: ' + (e.message || ''))

routes/_components/compose/ComposeBox.html

@@ -126,13 +126,6 @@
         // make sure the visibility is consistent with the replied-to status
         setReplyVisibility(realm, replyVisibility)
       }
-
-      this.observe('postedStatusForRealm', postedStatusForRealm => {
-        if (postedStatusForRealm !== realm) {
-          return
-        }
-        this.fire('postedStatus')
-      }, {init: false})
     },
     ondestroy() {
       this.teardownStickyObserver()
@@ -177,7 +170,6 @@
       overLimit: (length) => length > CHAR_LIMIT,
       contentWarningShown: (composeData) => composeData.contentWarningShown,
       contentWarning: (composeData) => composeData.contentWarning || '',
-      postedStatusForRealm: ($postedStatusForRealm) => $postedStatusForRealm,
       timelineInitialized: ($timelineInitialized) => $timelineInitialized
     },
     transitions: {

routes/_components/compose/ComposeInput.html

@@ -166,9 +166,6 @@
     data: () => ({
       rawText: ''
     }),
-    computed: {
-      postedStatusForRealm: ($postedStatusForRealm) => $postedStatusForRealm
-    },
     events: {
       selectionChange
     }

routes/_components/dialog/ComposeDialog.html

@@ -6,13 +6,17 @@
   background="var(--main-bg)"
   on:destroyDialog="destroy()"
 >
-  <ComposeBox realm="dialog" size="slim" autoFocus="true" on:postedStatus="onPostedStatus()" />
+  <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'
 
   export default {
+    oncreate() {
+      on('postedStatus', this, this.onPostedStatus)
+    },
     components: {
       ModalDialog,
       ComposeBox
@@ -21,7 +25,10 @@
       async show() {
         this.set({shown: true})
       },
-      onPostedStatus() {
+      onPostedStatus(realm) {
+        if (realm !== 'dialog') {
+          return
+        }
         try {
           this.set({closed: true})
         } catch (e) {

routes/_components/status/StatusComposeBox.html

@@ -6,7 +6,6 @@
               isReply="true"
               replyVisibility="{{visibility}}"
               replySpoiler="{{spoilerText}}"
-              on:postedStatus="onPostedStatus()"
   />
 </div>
 <style>
@@ -19,37 +18,25 @@
   import { store } from '../../_store/store'
   import debounce from 'lodash-es/debounce'
   import throttle from 'lodash-es/throttle'
+  import { on } from '../../_utils/eventBus'
 
   const DEBOUNCE_DELAY = 400
   const THROTTLE_DELAY = 150
 
   export default {
     oncreate() {
-      const recalc = () => {
+      on('postedStatus', this, this.onPostedStatus)
-        requestAnimationFrame(() => {
+      this.setupRecalculateHeightListener()
-          this.fire('recalculateHeight')
-        })
-      }
-      // debounce AND throttle due to 333ms content warning animation
-      const debounced = debounce(recalc, DEBOUNCE_DELAY)
-      const throttled = throttle(() => {
-        debounced()
-        recalc()
-      }, THROTTLE_DELAY, {
-        leading: true,
-        trailing: true
-      })
-      this.observe('composeData', throttled)
-    },
-    components: {
-      ComposeBox
     },
     store: () => store,
     computed: {
       composeData: ($currentComposeData, originalStatusId) => $currentComposeData[originalStatusId] || {}
     },
     methods: {
-      onPostedStatus() {
+      onPostedStatus(realm) {
+        if (realm !== this.get('originalStatusId')) {
+          return
+        }
         requestAnimationFrame(() => {
           let uuid = this.get('uuid')
           let $repliesShown = this.store.get('repliesShown')
@@ -57,7 +44,23 @@
           this.store.set({'repliesShown': $repliesShown})
           this.fire('recalculateHeight')
         })
+      },
+      setupRecalculateHeightListener() {
+        const recalc = () => requestAnimationFrame(() => this.fire('recalculateHeight'))
+        // debounce AND throttle due to 333ms content warning animation
+        const debounced = debounce(recalc, DEBOUNCE_DELAY)
+        const throttled = throttle(() => {
+          debounced()
+          recalc()
+        }, THROTTLE_DELAY, {
+          leading: true,
+          trailing: true
+        })
+        this.observe('composeData', throttled)
       }
+    },
+    components: {
+      ComposeBox
     }
   }
 </script>

routes/_utils/eventBus.js

@@ -0,0 +1,17 @@
+import EventEmitter from 'events'
+
+const eventBus = new EventEmitter()
+
+if (process.browser && process.env.NODE_ENV !== 'production') {
+  window.eventBus = eventBus
+}
+
+export function on (eventName, component, method) {
+  let callback = method.bind(component)
+  eventBus.on(eventName, callback)
+  component.on('destroy', () => {
+    eventBus.removeListener(eventName, callback)
+  })
+}
+
+export const emit = eventBus.emit.bind(eventBus)