2 files changed, 38 insertions, 7 deletions
diff --git a/src/components/settings_modal/tabs/data_import_export_tab.js b/src/components/settings_modal/tabs/data_import_export_tab.js
index 168f89e1..f4b736d2 100644
--- a/src/components/settings_modal/tabs/data_import_export_tab.js
+++ b/src/components/settings_modal/tabs/data_import_export_tab.js
@@ -1,6 +1,7 @@
 import Importer from 'src/components/importer/importer.vue'
 import Exporter from 'src/components/exporter/exporter.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
+import { mapState } from 'vuex'
 
 const DataImportExportTab = {
   data () {
@@ -18,21 +19,26 @@ const DataImportExportTab = {
     Checkbox
   },
   computed: {
-    user () {
-      return this.$store.state.users.currentUser
-    }
+    ...mapState({
+      backendInteractor: (state) => state.api.backendInteractor,
+      user: (state) => state.users.currentUser
+    })
   },
   methods: {
     getFollowsContent () {
-      return this.$store.state.api.backendInteractor.exportFriends({ id: this.$store.state.users.currentUser.id })
+      return this.backendInteractor.exportFriends({ id: this.user.id })
         .then(this.generateExportableUsersContent)
     },
     getBlocksContent () {
-      return this.$store.state.api.backendInteractor.fetchBlocks()
+      return this.backendInteractor.fetchBlocks()
+        .then(this.generateExportableUsersContent)
+    },
+    getMutesContent () {
+      return this.backendInteractor.fetchMutes()
         .then(this.generateExportableUsersContent)
     },
     importFollows (file) {
-      return this.$store.state.api.backendInteractor.importFollows({ file })
+      return this.backendInteractor.importFollows({ file })
         .then((status) => {
           if (!status) {
             throw new Error('failed')
@@ -40,7 +46,15 @@ const DataImportExportTab = {
         })
     },
     importBlocks (file) {
-      return this.$store.state.api.backendInteractor.importBlocks({ file })
+      return this.backendInteractor.importBlocks({ file })
+        .then((status) => {
+          if (!status) {
+            throw new Error('failed')
+          }
+        })
+    },
+    importMutes (file) {
+      return this.backendInteractor.importMutes({ file })
         .then((status) => {
           if (!status) {
             throw new Error('failed')
diff --git a/src/components/settings_modal/tabs/data_import_export_tab.vue b/src/components/settings_modal/tabs/data_import_export_tab.vue
index b5d0f5ed..a406077d 100644
--- a/src/components/settings_modal/tabs/data_import_export_tab.vue
+++ b/src/components/settings_modal/tabs/data_import_export_tab.vue
@@ -36,6 +36,23 @@
         :export-button-label="$t('settings.block_export_button')"
       />
     </div>
+    <div class="setting-item">
+      <h2>{{ $t('settings.mute_import') }}</h2>
+      <p>{{ $t('settings.import_mutes_from_a_csv_file') }}</p>
+      <Importer
+        :submit-handler="importMutes"
+        :success-message="$t('settings.mutes_imported')"
+        :error-message="$t('settings.mute_import_error')"
+      />
+    </div>
+    <div class="setting-item">
+      <h2>{{ $t('settings.mute_export') }}</h2>
+      <Exporter
+        :get-content="getMutesContent"
+        filename="mutes.csv"
+        :export-button-label="$t('settings.mute_export_button')"
+      />
+    </div>
   </div>
 </template>