From 562120ae48945d87a24f2248f9b16185b49159d0 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Fri, 29 Mar 2019 21:58:20 -0400
Subject: [PATCH] =?UTF-8?q?split=20out=20follow=E2=80=99s=20importer=20as?=
=?UTF-8?q?=20a=20separate=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/importer/importer.js | 36 +++++++++++++++++++
src/components/importer/importer.vue | 19 ++++++++++
src/components/user_settings/user_settings.js | 31 ++--------------
.../user_settings/user_settings.vue | 14 +-------
4 files changed, 59 insertions(+), 41 deletions(-)
create mode 100644 src/components/importer/importer.js
create mode 100644 src/components/importer/importer.vue
diff --git a/src/components/importer/importer.js b/src/components/importer/importer.js
new file mode 100644
index 00000000..8d6c8b3f
--- /dev/null
+++ b/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
diff --git a/src/components/importer/importer.vue b/src/components/importer/importer.vue
new file mode 100644
index 00000000..0fd83b7c
--- /dev/null
+++ b/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>
diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index e88ee612..a213650b 100644
--- a/src/components/user_settings/user_settings.js
+++ b/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
},
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index d68e68fa..fb91e269 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/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>
- <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>
+ <Importer />
</div>
<div class="setting-item" v-if="enableFollowsExport">
<h2>{{$t('settings.follow_export')}}</h2>