fix handles appearing in replies

routes/_actions/compose.js

@@ -0,0 +1,49 @@
+import { store } from '../_store/store'
+import { toast } from '../_utils/toast'
+import { postStatusToServer } from '../_api/statuses'
+import { addStatusOrNotification } from './addStatusOrNotification'
+import { database } from '../_database/database'
+
+export async function insertHandleForReply (statusId) {
+  let instanceName = store.get('currentInstance')
+  let status = await database.getStatus(instanceName, statusId)
+  let verifyCredentials = store.get('currentVerifyCredentials')
+  let originalStatus = status.reblog || status
+  let accounts = [originalStatus.account].concat(originalStatus.mentions || [])
+    .filter(account => account.id !== verifyCredentials.id)
+  if (!store.getComposeData(statusId, 'text') && accounts.length) {
+    store.setComposeData(statusId, {
+      text: accounts.map(account => `@${account.acct} `).join('')
+    })
+  }
+}
+
+export async function postStatus (realm, text, inReplyToId, mediaIds,
+                                  sensitive, spoilerText, visibility) {
+  let instanceName = store.get('currentInstance')
+  let accessToken = store.get('accessToken')
+  let online = store.get('online')
+
+  if (!online) {
+    toast.say('You cannot post while offline')
+    return
+  }
+
+  store.set({
+    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({
+      postedStatusForRealm: realm
+    })
+  } catch (e) {
+    toast.say('Unable to post status: ' + (e.message || ''))
+  } finally {
+    store.set({postingStatus: false})
+  }
+}

routes/_actions/statuses.js

@@ -1,8 +1,4 @@
 import { database } from '../_database/database'
-import { store } from '../_store/store'
-import { toast } from '../_utils/toast'
-import { postStatus as postStatusToServer } from '../_api/statuses'
-import { addStatusOrNotification } from './addStatusOrNotification'
 
 export async function getIdThatThisStatusReblogged (instanceName, statusId) {
   let status = await database.getStatus(instanceName, statusId)
@@ -23,33 +19,3 @@ export async function getIdsThatRebloggedThisStatus (instanceName, statusId) {
 export async function getNotificationIdsForStatuses (instanceName, statusIds) {
   return database.getNotificationIdsForStatuses(instanceName, statusIds)
 }
-
-export async function postStatus (realm, text, inReplyToId, mediaIds,
-                                 sensitive, spoilerText, visibility) {
-  let instanceName = store.get('currentInstance')
-  let accessToken = store.get('accessToken')
-  let online = store.get('online')
-
-  if (!online) {
-    toast.say('You cannot post while offline')
-    return
-  }
-
-  store.set({
-    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({
-      postedStatusForRealm: realm
-    })
-  } catch (e) {
-    toast.say('Unable to post status: ' + (e.message || ''))
-  } finally {
-    store.set({postingStatus: false})
-  }
-}

routes/_components/compose/ComposeBox.html

@@ -58,12 +58,19 @@
   import { CHAR_LIMIT, POST_PRIVACY_OPTIONS } from '../../_static/statuses'
   import { store } from '../../_store/store'
   import { slide } from 'svelte-transitions'
-  import { postStatus } from '../../_actions/statuses'
+  import { postStatus, insertHandleForReply } from '../../_actions/compose'
 
   export default {
     oncreate() {
+      let realm = this.get('realm')
+      if (realm !== 'home') {
+        // if this is a reply, populate the handle immediately
+        insertHandleForReply(realm)
+      }
+
+      // if this is a reply, go back immediately after it's posted
       this.observe('postedStatusForRealm', postedStatusForRealm => {
-        if (postedStatusForRealm === this.get('realm')) {
+        if (postedStatusForRealm === realm) {
           window.history.back()
         }
       }, {init: false})

tests/spec/017-compose-reply.js

@@ -0,0 +1,43 @@
+import {
+  composeInput, getNthReplyButton,
+  getNthStatus, getUrl, goBack
+} from '../utils'
+import { foobarRole } from '../roles'
+
+fixture`017-compose-reply.js`
+  .page`http://localhost:4002`
+
+test('account handle populated correctly for replies', async t => {
+  await t.useRole(foobarRole)
+    .click(getNthReplyButton(0))
+    .expect(getUrl()).contains('/statuses')
+    .expect(composeInput.value).eql('@quux ')
+    .typeText(composeInput, 'hello quux', {paste: true})
+    .expect(composeInput.value).eql('@quux hello quux')
+  await goBack()
+  await t.click(getNthReplyButton(0))
+    .expect(getUrl()).contains('/statuses')
+    .expect(composeInput.value).eql('@quux hello quux')
+  await goBack()
+  await t.expect(getUrl()).eql('http://localhost:4002/')
+    .expect(composeInput.value).eql('')
+  await t.hover(getNthStatus(2))
+    .hover(getNthStatus(4))
+    .click(getNthReplyButton(4))
+    .expect(getUrl()).contains('/statuses')
+    .expect(composeInput.value).eql('')
+  await goBack()
+  await t.expect(getUrl()).eql('http://localhost:4002/')
+    .expect(composeInput.value).eql('')
+})
+
+test('replying to posts wth mentions', async t => {
+  await t.useRole(foobarRole)
+    .click(getNthReplyButton(1))
+    .expect(getUrl()).contains('/statuses')
+    .expect(composeInput.value).eql('@admin ')
+    .navigateTo('/accounts/4')
+    .click(getNthReplyButton(0))
+    .expect(getUrl()).contains('/statuses')
+    .expect(composeInput.value).eql('@ExternalLinks @admin @quux ')
+})

tests/utils.js

@@ -87,6 +87,10 @@ export function getFirstVisibleStatus () {
   return $(`div[aria-hidden="false"] > article[aria-posinset]`).nth(0)
 }
 
+export function getNthReplyButton (n) {
+  return getNthStatus(n).find('.status-toolbar button:nth-child(1)')
+}
+
 export function getNthFavoriteButton (n) {
   return getNthStatus(n).find('.status-toolbar button:nth-child(3)')
 }