From e79003d8d7cc5fed5dad7fec11a1e7a6284d1a7d Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sat, 3 Mar 2018 10:11:32 -0800
Subject: [PATCH] separate uploaded media by instance/realm

---
 routes/_actions/instances.js                  |  5 +-
 routes/_actions/media.js                      | 15 +++--
 routes/_components/compose/ComposeAuthor.html |  3 +
 routes/_components/compose/ComposeBox.html    |  8 +--
 routes/_components/compose/ComposeInput.html  | 56 ++++++++++++-------
 routes/_components/compose/ComposeMedia.html  | 11 ++--
 .../_components/compose/ComposeToolbar.html   |  9 ++-
 routes/_store/instanceComputations.js         |  7 ++-
 routes/_store/store.js                        |  3 +-
 routes/index.html                             |  2 +-
 tests/spec/12-compose.js                      |  2 +-
 11 files changed, 80 insertions(+), 41 deletions(-)

diff --git a/routes/_actions/instances.js b/routes/_actions/instances.js
index 640e9775..f4e269db 100644
--- a/routes/_actions/instances.js
+++ b/routes/_actions/instances.js
@@ -34,6 +34,7 @@ export async function logOutOfInstance (instanceName) {
   let instanceThemes = store.get('instanceThemes')
   let loggedInInstancesInOrder = store.get('loggedInInstancesInOrder')
   let composeText = store.get('composeText')
+  let uploadedMedia = store.get('uploadedMedia')
   let currentInstance = store.get('currentInstance')
   loggedInInstancesInOrder.splice(loggedInInstancesInOrder.indexOf(instanceName), 1)
   let newInstance = instanceName === currentInstance
@@ -42,6 +43,7 @@ export async function logOutOfInstance (instanceName) {
   delete loggedInInstances[instanceName]
   delete instanceThemes[instanceName]
   delete composeText[instanceName]
+  delete uploadedMedia[instanceName]
   store.set({
     loggedInInstances: loggedInInstances,
     instanceThemes: instanceThemes,
@@ -50,7 +52,8 @@ export async function logOutOfInstance (instanceName) {
     searchResults: null,
     queryInSearch: '',
     rawComposeText: '',
-    composeText: composeText
+    composeText: composeText,
+    uploadedMedia: uploadedMedia
   })
   store.save()
   toast.say(`Logged out of ${instanceName}`)
diff --git a/routes/_actions/media.js b/routes/_actions/media.js
index 4cdb84aa..e6ac67e5 100644
--- a/routes/_actions/media.js
+++ b/routes/_actions/media.js
@@ -2,14 +2,16 @@ import { store } from '../_store/store'
 import { uploadMedia } from '../_api/media'
 import { toast } from '../_utils/toast'
 
-export async function doMediaUpload (file) {
+export async function doMediaUpload (realm, file) {
   let instanceName = store.get('currentInstance')
   let accessToken = store.get('accessToken')
   store.set({uploadingMedia: true})
   try {
     let response = await uploadMedia(instanceName, accessToken, file)
-    let uploadedMedia = store.get('uploadedMedia') || []
-    uploadedMedia.push({
+    let uploadedMedia = store.get('uploadedMedia')
+    uploadedMedia[instanceName] = uploadedMedia[instanceName] || {}
+    uploadedMedia[instanceName][realm] = uploadedMedia[instanceName][realm] || []
+    uploadedMedia[instanceName][realm].push({
       data: response,
       file: file
     })
@@ -22,8 +24,11 @@ export async function doMediaUpload (file) {
   }
 }
 
-export function deleteMedia (i) {
+export function deleteMedia (realm, i) {
   let uploadedMedia = store.get('uploadedMedia')
-  uploadedMedia.splice(i, 1)
+  let instanceName = store.get('currentInstance')
+  let uploadedMediaArray = uploadedMedia[instanceName][realm]
+
+  uploadedMediaArray.splice(i, 1)
   store.set({uploadedMedia})
 }
diff --git a/routes/_components/compose/ComposeAuthor.html b/routes/_components/compose/ComposeAuthor.html
index ee963f35..253a02be 100644
--- a/routes/_components/compose/ComposeAuthor.html
+++ b/routes/_components/compose/ComposeAuthor.html
@@ -49,6 +49,9 @@
   export default {
     components: {
       Avatar
+    },
+    computed: {
+      verifyCredentials: ($currentVerifyCredentials) => $currentVerifyCredentials
     }
   }
 </script>
\ No newline at end of file
diff --git a/routes/_components/compose/ComposeBox.html b/routes/_components/compose/ComposeBox.html
index 938d76ac..da45ecfe 100644
--- a/routes/_components/compose/ComposeBox.html
+++ b/routes/_components/compose/ComposeBox.html
@@ -1,10 +1,10 @@
 <div class="compose-box {{overLimit ? 'over-char-limit' : ''}}">
-  <ComposeAuthor :verifyCredentials />
-  <ComposeInput />
+  <ComposeAuthor />
+  <ComposeInput :realm />
   <ComposeLengthGauge />
-  <ComposeToolbar />
+  <ComposeToolbar :realm />
   <ComposeLengthIndicator />
-  <ComposeMedia />
+  <ComposeMedia :realm />
   <ComposeButton />
 </div>
 <style>
diff --git a/routes/_components/compose/ComposeInput.html b/routes/_components/compose/ComposeInput.html
index e37bd16d..acc5787d 100644
--- a/routes/_components/compose/ComposeInput.html
+++ b/routes/_components/compose/ComposeInput.html
@@ -32,30 +32,46 @@
 
   export default {
     oncreate() {
-      this.store.set({rawComposeText: store.get('currentComposeText')})
-
-      requestAnimationFrame(() => {
-        mark('autosize()')
-        autosize(this.refs.textarea)
-        stop('autosize()')
-      })
-
-      const saveText = debounce(() => scheduleIdleTask(() => this.store.save()), 1000)
-
-      this.observe('rawComposeText', rawComposeText => {
-        let composeText = this.store.get('composeText')
-        let currentInstance = this.store.get('currentInstance')
-        composeText[currentInstance] = rawComposeText || ''
-        this.store.set({composeText: composeText})
-        saveText()
-      }, {init: false})
+      this.setupSyncFromStore()
+      this.setupSyncToStore()
+      this.setupAutosize()
     },
     ondestroy() {
-      mark('autosize.destroy()')
-      autosize.destroy(this.refs.textarea)
-      stop('autosize.destroy()')
+      this.teardownAutosize()
     },
     methods: {
+      setupSyncFromStore() {
+        let currentComposeText = store.get('currentComposeText')
+        let realm = this.get('realm')
+        this.store.set({
+          rawComposeText: currentComposeText[realm] || ''
+        })
+      },
+      setupSyncToStore() {
+        const saveText = debounce(() => scheduleIdleTask(() => this.store.save()), 1000)
+
+        this.observe('rawComposeText', rawComposeText => {
+          let composeText = this.store.get('composeText')
+          let currentInstance = this.store.get('currentInstance')
+          let realm = this.get('realm')
+          composeText[currentInstance] = composeText[currentInstance] || {}
+          composeText[currentInstance][realm] = rawComposeText || ''
+          this.store.set({composeText: composeText})
+          saveText()
+        }, {init: false})
+      },
+      setupAutosize() {
+        requestAnimationFrame(() => {
+          mark('autosize()')
+          autosize(this.refs.textarea)
+          stop('autosize()')
+        })
+      },
+      teardownAutosize() {
+        mark('autosize.destroy()')
+        autosize.destroy(this.refs.textarea)
+        stop('autosize.destroy()')
+      },
       onBlur() {
         this.store.set({composeSelectionStart: this.refs.textarea.selectionStart})
       }
diff --git a/routes/_components/compose/ComposeMedia.html b/routes/_components/compose/ComposeMedia.html
index 885ef252..b2126ddb 100644
--- a/routes/_components/compose/ComposeMedia.html
+++ b/routes/_components/compose/ComposeMedia.html
@@ -1,6 +1,6 @@
-{{#if $uploadedMedia && $uploadedMedia.length}}
-  <div class="compose-media-container" style="grid-template-columns: repeat({{$uploadedMedia.length}}, 1fr);">
-    {{#each $uploadedMedia as media, i}}
+{{#if uploadedMedia.length}}
+  <div class="compose-media-container" style="grid-template-columns: repeat({{uploadedMedia.length}}, 1fr);">
+    {{#each uploadedMedia as media, i}}
       <div class="compose-media">
         <img src="{{media.data.preview_url}}" alt="{{media.file.name}}"/>
         <div class="compose-media-delete">
@@ -96,8 +96,11 @@
     store: () => store,
     methods: {
       onDeleteMedia(i) {
-        deleteMedia(i)
+        deleteMedia(this.get('realm'), i)
       }
+    },
+    computed: {
+      uploadedMedia: ($currentUploadedMedia, realm) => $currentUploadedMedia[realm] || []
     }
   }
 </script>
\ No newline at end of file
diff --git a/routes/_components/compose/ComposeToolbar.html b/routes/_components/compose/ComposeToolbar.html
index ef6181f5..f6181354 100644
--- a/routes/_components/compose/ComposeToolbar.html
+++ b/routes/_components/compose/ComposeToolbar.html
@@ -8,7 +8,7 @@
               label="Add media"
               href="{{$uploadingMedia ? '#fa-spinner' : '#fa-camera'}}"
               on:click="onMediaClick()"
-              disabled="{{$uploadingMedia || ($uploadedMedia && $uploadedMedia.length === 4)}}"
+              disabled="{{$uploadingMedia || (uploadedMedia.length === 4)}}"
   />
   <IconButton label="Adjust privacy" href="#fa-globe" />
   <IconButton label="Add content warning" href="#fa-exclamation-triangle" />
@@ -60,9 +60,12 @@
       },
       onFileChange(e) {
         let file = e.target.files[0]
-        doMediaUpload(file)
+        let realm = this.get('realm')
+        doMediaUpload(realm, file)
       }
+    },
+    computed: {
+      uploadedMedia: ($currentUploadedMedia, realm) => $currentUploadedMedia[realm] || []
     }
-
   }
 </script>
\ No newline at end of file
diff --git a/routes/_store/instanceComputations.js b/routes/_store/instanceComputations.js
index 577196b3..093f6cb6 100644
--- a/routes/_store/instanceComputations.js
+++ b/routes/_store/instanceComputations.js
@@ -104,7 +104,12 @@ export function instanceComputations (store) {
 
   store.compute('currentComposeText',
     ['composeText', 'currentInstance'],
-    (composeText, currentInstance) => (composeText[currentInstance] || '')
+    (composeText, currentInstance) => (composeText[currentInstance] || {})
+  )
+
+  store.compute('currentUploadedMedia',
+    ['uploadedMedia', 'currentInstance'],
+    (uploadedMedia, currentInstance) => (uploadedMedia[currentInstance] || {})
   )
 
   store.compute('currentCustomEmoji',
diff --git a/routes/_store/store.js b/routes/_store/store.js
index a8828222..2143e763 100644
--- a/routes/_store/store.js
+++ b/routes/_store/store.js
@@ -41,7 +41,8 @@ export const store = new PinaforeStore({
   statusModifications: {},
   composeText: {},
   rawComposeText: '',
-  customEmoji: {}
+  customEmoji: {},
+  uploadedMedia: {}
 })
 
 mixins(PinaforeStore)
diff --git a/routes/index.html b/routes/index.html
index 16bf974b..3e9a6a36 100644
--- a/routes/index.html
+++ b/routes/index.html
@@ -5,7 +5,7 @@
 <Layout page='home'>
   {{#if $isUserLoggedIn}}
     {{#if $currentVerifyCredentials}}
-      <ComposeBox verifyCredentials="{{$currentVerifyCredentials}}"/>
+      <ComposeBox realm="home" />
     {{/if}}
     <LazyTimeline timeline='home' />
   {{else}}
diff --git a/tests/spec/12-compose.js b/tests/spec/12-compose.js
index 61eb3dc8..588bea2e 100644
--- a/tests/spec/12-compose.js
+++ b/tests/spec/12-compose.js
@@ -2,7 +2,7 @@ import { Selector as $ } from 'testcafe'
 import {
   composeButton, composeInput, composeLengthIndicator, emojiButton, getComposeSelectionStart, getUrl,
   homeNavButton,
-  notificationsNavButton, uploadMedia
+  notificationsNavButton
 } from '../utils'
 import { foobarRole } from '../roles'
 import times from 'lodash/times'