From 08eaf9bd33fff53909e3f240e26f246c5fb96892 Mon Sep 17 00:00:00 2001 From: taehoon Date: Sat, 30 Mar 2019 08:03:40 -0400 Subject: [PATCH] make reusable Exporter component --- src/components/exporter/exporter.js | 47 ++++++++++++++++++ src/components/exporter/exporter.vue | 20 ++++++++ src/components/user_settings/user_settings.js | 48 ++++++------------- .../user_settings/user_settings.vue | 7 +-- src/i18n/en.json | 5 +- 5 files changed, 88 insertions(+), 39 deletions(-) create mode 100644 src/components/exporter/exporter.js create mode 100644 src/components/exporter/exporter.vue diff --git a/src/components/exporter/exporter.js b/src/components/exporter/exporter.js new file mode 100644 index 00000000..2ae9492c --- /dev/null +++ b/src/components/exporter/exporter.js @@ -0,0 +1,47 @@ +const Exporter = { + props: { + getContent: { + type: Function, + required: true + }, + filename: { + type: String, + default: 'export.csv' + }, + exportButtonLabel: { + type: String, + default () { + return this.$t('exporter.export') + } + }, + processingMessage: { + type: String, + default () { + return this.$t('exporter.processing') + } + } + }, + data () { + return { + processing: false + } + }, + methods: { + process () { + this.processing = true + this.getContent() + .then((content) => { + const fileToDownload = document.createElement('a') + fileToDownload.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(content)) + fileToDownload.setAttribute('download', this.filename) + fileToDownload.style.display = 'none' + document.body.appendChild(fileToDownload) + fileToDownload.click() + document.body.removeChild(fileToDownload) + setTimeout(() => { this.processing = false }, 2000) + }) + } + } +} + +export default Exporter diff --git a/src/components/exporter/exporter.vue b/src/components/exporter/exporter.vue new file mode 100644 index 00000000..f22e579e --- /dev/null +++ b/src/components/exporter/exporter.vue @@ -0,0 +1,20 @@ + + + + + diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js index c4214744..d40301f2 100644 --- a/src/components/user_settings/user_settings.js +++ b/src/components/user_settings/user_settings.js @@ -14,6 +14,7 @@ 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 Exporter from '../exporter/exporter.vue' import withSubscription from '../../hocs/with_subscription/with_subscription' import userSearchApi from '../../services/new_api/user_search.js' @@ -41,7 +42,6 @@ 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, - enableFollowsExport: true, pickAvatarBtnVisible: true, bannerUploading: false, backgroundUploading: false, @@ -73,7 +73,8 @@ const UserSettings = { BlockCard, MuteCard, ProgressButton, - Importer + Importer, + Exporter }, computed: { user () { @@ -250,38 +251,19 @@ const UserSettings = { } }) }, - /* This function takes an Array of Users - * and outputs a file with all the addresses for the user to download - */ - exportPeople (users, filename) { - // Get all the friends addresses - var UserAddresses = users.map(function (user) { - // check is it's a local user - if (user && user.is_local) { - // append the instance address - // eslint-disable-next-line no-undef - user.screen_name += '@' + location.hostname - } - return user.screen_name - }).join('\n') - // Make the user download the file - var fileToDownload = document.createElement('a') - fileToDownload.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(UserAddresses)) - fileToDownload.setAttribute('download', filename) - fileToDownload.style.display = 'none' - document.body.appendChild(fileToDownload) - fileToDownload.click() - document.body.removeChild(fileToDownload) - }, - exportFollows () { - this.enableFollowsExport = false - this.$store.state.api.backendInteractor - .exportFriends({ - id: this.$store.state.users.currentUser.id - }) + getFollowsContent () { + return this.$store.state.api.backendInteractor.exportFriends({ id: this.$store.state.users.currentUser.id }) .then((friendList) => { - this.exportPeople(friendList, 'friends.csv') - setTimeout(() => { this.enableFollowsExport = true }, 2000) + // Get all the friends addresses + return friendList.map((user) => { + // check is it's a local user + if (user && user.is_local) { + // append the instance address + // eslint-disable-next-line no-undef + return user.screen_name + '@' + location.hostname + } + return user.screen_name + }).join('\n') }) }, confirmDelete () { diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue index 520a3d8a..ef77aaba 100644 --- a/src/components/user_settings/user_settings.vue +++ b/src/components/user_settings/user_settings.vue @@ -173,12 +173,9 @@

{{$t('settings.import_followers_from_a_csv_file')}}

-
+

{{$t('settings.follow_export')}}

- -
-
-

{{$t('settings.follow_export_processing')}}

+

{{$t('settings.block_import')}}

diff --git a/src/i18n/en.json b/src/i18n/en.json index d4ec1134..10283024 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -2,6 +2,10 @@ "chat": { "title": "Chat" }, + "exporter": { + "export": "Export", + "processing": "Processing, you'll soon be asked to download your file" + }, "features_panel": { "chat": "Chat", "gopher": "Gopher", @@ -161,7 +165,6 @@ "filtering_explanation": "All statuses containing these words will be muted, one per line", "follow_export": "Follow export", "follow_export_button": "Export your follows to a csv file", - "follow_export_processing": "Processing, you'll soon be asked to download your file", "follow_import": "Follow import", "follow_import_error": "Error importing followers", "follows_imported": "Follows imported! Processing them will take a while.",