make Importer component reusable

src/components/importer/importer.js

@@ -1,10 +1,34 @@
 const Importer = {
+  props: {
+    submitHandler: {
+      type: Function,
+      required: true
+    },
+    submitButtonLabel: {
+      type: String,
+      default () {
+        return this.$t('importer.submit')
+      }
+    },
+    successMessage: {
+      type: String,
+      default () {
+        return this.$t('importer.success')
+      }
+    },
+    errorMessage: {
+      type: String,
+      default () {
+        return this.$t('importer.error')
+      }
+    }
+  },
   data () {
     return {
       file: null,
       error: false,
       success: false,
-      uploading: false
+      submitting: false
     }
   },
   methods: {
@@ -12,16 +36,12 @@ const Importer = {
       this.file = this.$refs.input.files[0]
     },
     submit () {
-      this.uploading = true
-      this.$store.state.api.backendInteractor.followImport(this.file)
-        .then((status) => {
-          if (status) {
-            this.success = true
-          } else {
-            this.error = true
-          }
-          this.uploading = false
-        })
+      this.dismiss()
+      this.submitting = true
+      this.submitHandler(this.file)
+        .then(() => { this.success = true })
+        .catch(() => { this.error = true })
+        .finally(() => { this.submitting = false })
     },
     dismiss () {
       this.success = false

src/components/importer/importer.vue

@@ -3,15 +3,15 @@
     <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>
+    <i class="icon-spin4 animate-spin importer-uploading" v-if="submitting"></i>
+    <button class="btn btn-default" v-else @click="submit">{{submitButtonLabel}}</button>
     <div v-if="success">
       <i class="icon-cross" @click="dismiss"></i>
-      <p>{{$t('settings.follows_imported')}}</p>
+      <p>{{successMessage}}</p>
     </div>
     <div v-else-if="error">
       <i class="icon-cross" @click="dismiss"></i>
-      <p>{{$t('settings.follow_import_error')}}</p>
+      <p>{{errorMessage}}</p>
     </div>
   </div>
 </template>
@@ -20,7 +20,7 @@
 
 <style lang="scss">
 .importer {
-  .uploading {
+  &-uploading {
     font-size: 1.5em;
     margin: 0.25em;
   }

src/components/user_settings/user_settings.js

@@ -234,6 +234,14 @@ const UserSettings = {
         this.backgroundUploading = false
       })
     },
+    importFollows (file) {
+      return this.$store.state.api.backendInteractor.followImport(file)
+        .then((status) => {
+          if (!status) {
+            throw new Error('failed')
+          }
+        })
+    },
     /* This function takes an Array of Users
      * and outputs a file with all the addresses for the user to download
      */

src/components/user_settings/user_settings.vue

@@ -171,7 +171,7 @@
           <div class="setting-item">
             <h2>{{$t('settings.follow_import')}}</h2>
             <p>{{$t('settings.import_followers_from_a_csv_file')}}</p>
-            <Importer />
+            <Importer :submitHandler="importFollows" :successMessage="$t('settings.follows_imported')" :errorMessage="$t('settings.follow_import_error')" />
           </div>
           <div class="setting-item" v-if="enableFollowsExport">
             <h2>{{$t('settings.follow_export')}}</h2>

src/i18n/en.json

@@ -31,6 +31,11 @@
     "save_without_cropping": "Save without cropping",
     "cancel": "Cancel"
   },
+  "importer": {
+    "submit": "Submit",
+    "success": "Imported successfully.",
+    "error": "An error occured while importing this file."
+  },
   "login": {
     "login": "Log in",
     "description": "Log in with OAuth",