make Importer component reusable

2 files changed, 36 insertions, 16 deletions

diff --git a/src/components/importer/importer.js b/src/components/importer/importer.js
index 44d02c93..c5f9e4d2 100644
--- a/src/components/importer/importer.js
+++ b/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
diff --git a/src/components/importer/importer.vue b/src/components/importer/importer.vue
index d2447e1a..0c5aa93d 100644
--- a/src/components/importer/importer.vue
+++ b/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;
   }