Refactor arrays to individual options

src/components/user_settings/user_settings.js

@@ -5,7 +5,6 @@ import fileSizeFormatService from '../../services/file_size_format/file_size_for
 const UserSettings = {
   data () {
     return {
-      uploaderror: [null, null, null],
       newname: this.$store.state.users.currentUser.name,
       newbio: this.$store.state.users.currentUser.description,
       newlocked: this.$store.state.users.currentUser.locked,
@@ -15,8 +14,16 @@ const UserSettings = {
       followImportError: false,
       followsImported: false,
       enableFollowsExport: true,
-      uploading: [ false, false, false, false ],
-      previews: [ null, null, null ],
+      avatarUploading: false,
+      bannerUploading: false,
+      backgroundUploading: false,
+      followListUploading: false,
+      avatarPreview: null,
+      bannerPreview: null,
+      backgroundPreview: null,
+      avatarUploadError: null,
+      bannerUploadError: null,
+      backgroundUploadError: null,
       deletingAccount: false,
       deleteAccountConfirmPasswordInput: '',
       deleteAccountError: false,
@@ -71,26 +78,49 @@ const UserSettings = {
     uploadFile (slot, e) {
       const file = e.target.files[0]
       if (!file) { return }
+      var error = () => {}
+      switch (slot) {
+        case 0:
+          error = (error) => { this.avatarUploadError = error }
+          break
+        case 1:
+          error = (error) => { this.bannerUploadError = error }
+          break
+        case 2:
+          error = (error) => { this.backgroundUploadError = error }
+          break
+      }
       var limit = [this.$store.state.instance.avatarlimit, this.$store.state.instance.bannerlimit, this.$store.state.instance.backgroundlimit]
       if (file.size > limit[slot]) {
         const filesize = fileSizeFormatService.fileSizeFormat(file.size)
         const allowedsize = fileSizeFormatService.fileSizeFormat(limit[slot])
-        this.$set(this.uploaderror, slot, this.$t('upload.error.base') + ' ' + this.$t('upload.error.file_too_big', {filesize: filesize.num, filesizeunit: filesize.unit, allowedsize: allowedsize.num, allowedsizeunit: allowedsize.unit}))
+        error(this.$t('upload.error.base') + ' ' + this.$t('upload.error.file_too_big', {filesize: filesize.num, filesizeunit: filesize.unit, allowedsize: allowedsize.num, allowedsizeunit: allowedsize.unit}))
         return
       }
       // eslint-disable-next-line no-undef
       const reader = new FileReader()
       reader.onload = ({target}) => {
         const img = target.result
-        this.previews[slot] = img
-        this.$forceUpdate() // just changing the array with the index doesn't update the view
+        var preview = () => {}
+        switch (slot) {
+          case 0:
+            preview = (preview) => { this.avatarPreview = preview }
+            break
+          case 1:
+            preview = (preview) => { this.bannerPreview = preview }
+            break
+          case 2:
+            preview = (preview) => { this.backgroundPreview = preview }
+            break
+        }
+        preview(img)
       }
       reader.readAsDataURL(file)
     },
     submitAvatar () {
-      if (!this.previews[0]) { return }
+      if (!this.avatarPreview) { return }
 
-      let img = this.previews[0]
+      let img = this.avatarPreview
       // eslint-disable-next-line no-undef
       let imginfo = new Image()
       let cropX, cropY, cropW, cropH
@@ -106,25 +136,35 @@ const UserSettings = {
         cropX = Math.floor((imginfo.width - imginfo.height) / 2)
         cropW = imginfo.height
       }
-      this.uploading[0] = true
+      this.avatarUploading = true
       this.$store.state.api.backendInteractor.updateAvatar({params: {img, cropX, cropY, cropW, cropH}}).then((user) => {
         if (!user.error) {
           this.$store.commit('addNewUsers', [user])
           this.$store.commit('setCurrentUser', user)
-          this.previews[0] = null
+          this.avatarPreview = null
         } else {
-          this.$set(this.uploaderror, 0, this.$t('upload.error.base') + user.error)
+          this.avatarUploadError = this.$t('upload.error.base') + user.error
         }
-        this.uploading[0] = false
+        this.avatarUploading = false
       })
     },
     clearUploadError (slot) {
-      this.$set(this.uploaderror, slot, null)
+      switch (slot) {
+        case 0:
+          this.avatarUploadError = null
+          break
+        case 1:
+          this.bannerUploadError = null
+          break
+        case 2:
+          this.backgroundUploadError = null
+          break
+      }
     },
     submitBanner () {
-      if (!this.previews[1]) { return }
+      if (!this.bannerPreview) { return }
 
-      let banner = this.previews[1]
+      let banner = this.bannerPreview
       // eslint-disable-next-line no-undef
       let imginfo = new Image()
       /* eslint-disable camelcase */
@@ -134,24 +174,24 @@ const UserSettings = {
       height = imginfo.height
       offset_top = 0
       offset_left = 0
-      this.uploading[1] = true
+      this.bannerUploading = true
       this.$store.state.api.backendInteractor.updateBanner({params: {banner, offset_top, offset_left, width, height}}).then((data) => {
         if (!data.error) {
           let clone = JSON.parse(JSON.stringify(this.$store.state.users.currentUser))
           clone.cover_photo = data.url
           this.$store.commit('addNewUsers', [clone])
           this.$store.commit('setCurrentUser', clone)
-          this.previews[1] = null
+          this.bannerPreview = null
         } else {
-          this.$set(this.uploaderror, 1, this.$t('upload.error.base') + data.error)
+          this.bannerUploadError = this.$t('upload.error.base') + data.error
         }
-        this.uploading[1] = false
+        this.bannerUploading = false
       })
       /* eslint-enable camelcase */
     },
     submitBg () {
-      if (!this.previews[2]) { return }
-      let img = this.previews[2]
+      if (!this.backgroundPreview) { return }
+      let img = this.backgroundPreview
       // eslint-disable-next-line no-undef
       let imginfo = new Image()
       let cropX, cropY, cropW, cropH
@@ -160,22 +200,22 @@ const UserSettings = {
       cropY = 0
       cropW = imginfo.width
       cropH = imginfo.width
-      this.uploading[2] = true
+      this.backgroundUploading = true
       this.$store.state.api.backendInteractor.updateBg({params: {img, cropX, cropY, cropW, cropH}}).then((data) => {
         if (!data.error) {
           let clone = JSON.parse(JSON.stringify(this.$store.state.users.currentUser))
           clone.background_image = data.url
           this.$store.commit('addNewUsers', [clone])
           this.$store.commit('setCurrentUser', clone)
-          this.previews[2] = null
+          this.backgroundPreview = null
         } else {
-          this.$set(this.uploaderror, 2, this.$t('upload.error.base') + data.error)
+          this.backgroundUploadError = this.$t('upload.error.base') + data.error
         }
-        this.uploading[2] = false
+        this.backgroundUploading = false
       })
     },
     importFollows () {
-      this.uploading[3] = true
+      this.followListUploading = true
       const followList = this.followList
       this.$store.state.api.backendInteractor.followImport({params: followList})
         .then((status) => {
@@ -184,7 +224,7 @@ const UserSettings = {
           } else {
             this.followImportError = true
           }
-          this.uploading[3] = false
+          this.followListUploading = false
         })
     },
     /* This function takes an Array of Users

src/components/user_settings/user_settings.vue

@@ -36,15 +36,15 @@
             <p>{{$t('settings.current_avatar')}}</p>
             <img :src="user.profile_image_url_original" class="old-avatar"></img>
             <p>{{$t('settings.set_new_avatar')}}</p>
-            <img class="new-avatar" v-bind:src="previews[0]" v-if="previews[0]">
+            <img class="new-avatar" v-bind:src="avatarPreview" v-if="avatarPreview">
             </img>
             <div>
               <input type="file" @change="uploadFile(0, $event)" ></input>
             </div>
-            <i class="icon-spin4 animate-spin" v-if="uploading[0]"></i>
-            <button class="btn btn-default" v-else-if="previews[0]" @click="submitAvatar">{{$t('general.submit')}}</button>
-            <div class='alert error' v-if="uploaderror[0]">
-              Error: {{ uploaderror[0] }}
+            <i class="icon-spin4 animate-spin" v-if="avatarUploading"></i>
+            <button class="btn btn-default" v-else-if="avatarPreview" @click="submitAvatar">{{$t('general.submit')}}</button>
+            <div class='alert error' v-if="avatarUploadError">
+              Error: {{ avatarUploadError }}
               <i class="icon-cancel" @click="clearUploadError(0)"></i>
             </div>
           </div>
@@ -53,30 +53,30 @@
             <p>{{$t('settings.current_profile_banner')}}</p>
             <img :src="user.cover_photo" class="banner"></img>
             <p>{{$t('settings.set_new_profile_banner')}}</p>
-            <img class="banner" v-bind:src="previews[1]" v-if="previews[1]">
+            <img class="banner" v-bind:src="bannerPreview" v-if="bannerPreview">
             </img>
             <div>
               <input type="file" @change="uploadFile(1, $event)" ></input>
             </div>
-            <i class=" icon-spin4 animate-spin uploading" v-if="uploading[1]"></i>
-            <button class="btn btn-default" v-else-if="previews[1]" @click="submitBanner">{{$t('general.submit')}}</button>
-            <div class='alert error' v-if="uploaderror[1]">
-              Error: {{ uploaderror[1] }}
+            <i class=" icon-spin4 animate-spin uploading" v-if="bannerUploading"></i>
+            <button class="btn btn-default" v-else-if="bannerPreview" @click="submitBanner">{{$t('general.submit')}}</button>
+            <div class='alert error' v-if="bannerUploadError">
+              Error: {{ bannerUploadError }}
               <i class="icon-cancel" @click="clearUploadError(1)"></i>
             </div>
           </div>
           <div class="setting-item">
             <h2>{{$t('settings.profile_background')}}</h2>
             <p>{{$t('settings.set_new_profile_background')}}</p>
-            <img class="bg" v-bind:src="previews[2]" v-if="previews[2]">
+            <img class="bg" v-bind:src="backgroundPreview" v-if="backgroundPreview">
             </img>
             <div>
               <input type="file" @change="uploadFile(2, $event)" ></input>
             </div>
-            <i class=" icon-spin4 animate-spin uploading" v-if="uploading[2]"></i>
-            <button class="btn btn-default" v-else-if="previews[2]" @click="submitBg">{{$t('general.submit')}}</button>
-            <div class='alert error' v-if="uploaderror[2]">
-              Error: {{ uploaderror[2] }}
+            <i class=" icon-spin4 animate-spin uploading" v-if="backgroundUploading"></i>
+            <button class="btn btn-default" v-else-if="backgroundPreview" @click="submitBg">{{$t('general.submit')}}</button>
+            <div class='alert error' v-if="backgroundUploadError">
+              Error: {{ backgroundUploadError }}
               <i class="icon-cancel" @click="clearUploadError(2)"></i>
             </div>
           </div>
@@ -125,7 +125,7 @@
             <form v-model="followImportForm">
               <input type="file" ref="followlist" v-on:change="followListChange"></input>
             </form>
-            <i class=" icon-spin4 animate-spin uploading" v-if="uploading[3]"></i>
+            <i class=" icon-spin4 animate-spin uploading" v-if="followListUploading"></i>
             <button class="btn btn-default" v-else @click="importFollows">{{$t('general.submit')}}</button>
             <div v-if="followsImported">
               <i class="icon-cross" @click="dismissImported"></i>