add media URLs when media is inserted

routes/_actions/media.js

@@ -1,6 +1,7 @@
 import { store } from '../_store/store'
 import { uploadMedia } from '../_api/media'
 import { toast } from '../_utils/toast'
+import { scheduleIdleTask } from '../_utils/scheduleIdleTask'
 
 export async function doMediaUpload (realm, file) {
   let instanceName = store.get('currentInstance')
@@ -13,9 +14,17 @@ export async function doMediaUpload (realm, file) {
     uploadedMedia[instanceName][realm] = uploadedMedia[instanceName][realm] || []
     uploadedMedia[instanceName][realm].push({
       data: response,
-      file: file
+      file: {
+        name: file.name
+      }
     })
-    store.set({ uploadedMedia })
+    let rawComposeText = store.get('rawComposeText') || ''
+    rawComposeText += ' ' + response.text_url
+    store.set({
+      uploadedMedia,
+      rawComposeText
+    })
+    scheduleIdleTask(() => store.save())
   } catch (e) {
     console.error(e)
     toast.say('Failed to upload media: ' + (e.message || ''))
@@ -28,7 +37,15 @@ export function deleteMedia (realm, i) {
   let uploadedMedia = store.get('uploadedMedia')
   let instanceName = store.get('currentInstance')
   let uploadedMediaArray = uploadedMedia[instanceName][realm]
+  let deletedMedia = uploadedMediaArray.splice(i, 1)[0]
 
-  uploadedMediaArray.splice(i, 1)
-  store.set({uploadedMedia})
+  let rawComposeText = store.get('rawComposeText') || ''
+
+  rawComposeText = rawComposeText.replace(' ' + deletedMedia.data.text_url, '')
+
+  store.set({
+    uploadedMedia,
+    rawComposeText
+  })
+  scheduleIdleTask(() => store.save())
 }

routes/_components/compose/ComposeInput.html

@@ -79,7 +79,8 @@
     store: () => store,
     computed: {
       rawComposeText: ($rawComposeText) => $rawComposeText,
-      currentComposeText: ($currentComposeText) => $currentComposeText
+      currentComposeText: ($currentComposeText) => $currentComposeText,
+      uploadedMedia: ($currentUploadedMedia, realm) => $currentUploadedMedia[realm] || []
     }
   }
 </script>

routes/_store/store.js

@@ -14,7 +14,8 @@ const KEYS_TO_STORE_IN_LOCAL_STORAGE = new Set([
   'autoplayGifs',
   'markMediaAsSensitive',
   'pinnedPages',
-  'composeText'
+  'composeText',
+  'uploadedMedia'
 ])
 
 class PinaforeStore extends LocalStorageStore {

tests/spec/13-compose-media.js

@@ -1,4 +1,4 @@
-import { getNthDeleteMediaButton, getNthMedia, mediaButton, uploadKittenImage } from '../utils'
+import { composeInput, getNthDeleteMediaButton, getNthMedia, mediaButton, uploadKittenImage } from '../utils'
 import { foobarRole } from '../roles'
 
 fixture`13-compose-media.js`
@@ -39,4 +39,18 @@ test('removes media', async t => {
     .click(getNthDeleteMediaButton(2))
     .expect(getNthMedia(2).exists).notOk()
     .expect(getNthMedia(1).exists).ok()
+    .click(getNthDeleteMediaButton(1))
+    .expect(getNthMedia(2).exists).notOk()
+})
+
+test('changes URLs as media is added/removed', async t => {
+  await t.useRole(foobarRole)
+  await (uploadKittenImage(1)())
+  await t.expect(composeInput.value).match(/^ http:\/\/localhost:3000\/media\/\S+$/)
+  await (uploadKittenImage(1)())
+  await t.expect(composeInput.value).match(/^ http:\/\/localhost:3000\/media\/\S+ http:\/\/localhost:3000\/media\/\S+$/)
+    .click(getNthDeleteMediaButton(1))
+    .expect(composeInput.value).match(/^ http:\/\/localhost:3000\/media\/\S+$/)
+    .click(getNthDeleteMediaButton(1))
+    .expect(composeInput.value).eql('')
 })