split out follow’s importer as a separate component

src/components/importer/importer.js

@@ -0,0 +1,36 @@
+const Importer = {
+  data () {
+    return {
+      file: null,
+      error: false,
+      success: false,
+      uploading: false
+    }
+  },
+  methods: {
+    change () {
+      this.file = this.$refs.input.files[0]
+    },
+    submit () {
+      this.uploading = true
+      // eslint-disable-next-line no-undef
+      const formData = new FormData()
+      formData.append('list', this.file)
+      this.$store.state.api.backendInteractor.followImport({params: formData})
+        .then((status) => {
+          if (status) {
+            this.success = true
+          } else {
+            this.error = true
+          }
+          this.uploading = false
+        })
+    },
+    dismiss () {
+      this.success = false
+      this.error = false
+    }
+  }
+}
+
+export default Importer

src/components/importer/importer.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="importer">
+    <form>
+      <input type="file" ref="input" v-on:change="change" />
+    </form>
+    <i class="icon-spin4 animate-spin uploading" v-if="uploading"></i>
+    <button class="btn btn-default" v-else @click="submit">{{$t('general.submit')}}</button>
+    <div v-if="success">
+      <i class="icon-cross" @click="dismiss"></i>
+      <p>{{$t('settings.follows_imported')}}</p>
+    </div>
+    <div v-else-if="error">
+      <i class="icon-cross" @click="dismiss"></i>
+      <p>{{$t('settings.follow_import_error')}}</p>
+    </div>
+  </div>
+</template>
+
+<script src="./importer.js"></script>

src/components/user_settings/user_settings.js

@@ -13,6 +13,7 @@ import SelectableList from '../selectable_list/selectable_list.vue'
 import ProgressButton from '../progress_button/progress_button.vue'
 import EmojiInput from '../emoji-input/emoji-input.vue'
 import Autosuggest from '../autosuggest/autosuggest.vue'
+import Importer from '../importer/importer.vue'
 import withSubscription from '../../hocs/with_subscription/with_subscription'
 import userSearchApi from '../../services/new_api/user_search.js'
 
@@ -40,14 +41,10 @@ const UserSettings = {
       hideFollowers: this.$store.state.users.currentUser.hide_followers,
       showRole: this.$store.state.users.currentUser.show_role,
       role: this.$store.state.users.currentUser.role,
-      followList: null,
-      followImportError: false,
-      followsImported: false,
       enableFollowsExport: true,
       pickAvatarBtnVisible: true,
       bannerUploading: false,
       backgroundUploading: false,
-      followListUploading: false,
       bannerPreview: null,
       backgroundPreview: null,
       bannerUploadError: null,
@@ -75,7 +72,8 @@ const UserSettings = {
     Autosuggest,
     BlockCard,
     MuteCard,
-    ProgressButton
+    ProgressButton,
+    Importer
   },
   computed: {
     user () {
@@ -236,19 +234,6 @@ const UserSettings = {
         this.backgroundUploading = false
       })
     },
-    importFollows () {
-      this.followListUploading = true
-      const followList = this.followList
-      this.$store.state.api.backendInteractor.followImport({params: followList})
-        .then((status) => {
-          if (status) {
-            this.followsImported = true
-          } else {
-            this.followImportError = true
-          }
-          this.followListUploading = false
-        })
-    },
     /* This function takes an Array of Users
      * and outputs a file with all the addresses for the user to download
      */
@@ -283,16 +268,6 @@ const UserSettings = {
           setTimeout(() => { this.enableFollowsExport = true }, 2000)
         })
     },
-    followListChange () {
-      // eslint-disable-next-line no-undef
-      let formData = new FormData()
-      formData.append('list', this.$refs.followlist.files[0])
-      this.followList = formData
-    },
-    dismissImported () {
-      this.followsImported = false
-      this.followImportError = false
-    },
     confirmDelete () {
       this.deletingAccount = true
     },

src/components/user_settings/user_settings.vue

@@ -171,19 +171,7 @@
           <div class="setting-item">
             <h2>{{$t('settings.follow_import')}}</h2>
             <p>{{$t('settings.import_followers_from_a_csv_file')}}</p>
-            <form>
+            <Importer />
-              <input type="file" ref="followlist" v-on:change="followListChange" />
-            </form>
-            <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>
-              <p>{{$t('settings.follows_imported')}}</p>
-            </div>
-            <div v-else-if="followImportError">
-              <i class="icon-cross" @click="dismissImported"></i>
-              <p>{{$t('settings.follow_import_error')}}</p>
-            </div>
           </div>
           <div class="setting-item" v-if="enableFollowsExport">
             <h2>{{$t('settings.follow_export')}}</h2>