Add confirmation for following

This commit is contained in:
Tusooa Zhu 2022-02-09 15:50:04 -05:00 committed by FloatingGhost
parent c63b55d025
commit a2bffbf076
2 changed files with 53 additions and 10 deletions

View file

@ -1,12 +1,20 @@
import ConfirmModal from '../confirm_modal/confirm_modal.vue'
import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate'
export default {
props: ['relationship', 'user', 'labelFollowing', 'buttonClass'],
components: {
ConfirmModal
},
data () {
return {
inProgress: false
inProgress: false,
showingConfirmUnfollow: false,
}
},
computed: {
shouldConfirmUnfollow () {
return this.$store.getters.mergedConfig.modalOnUnfollow
},
isPressed () {
return this.inProgress || this.relationship.following
},
@ -35,6 +43,12 @@ export default {
}
},
methods: {
showConfirmUnfollow () {
this.showingConfirmUnfollow = true
},
hideConfirmUnfollow () {
this.showingConfirmUnfollow = false
},
onClick () {
this.relationship.following || this.relationship.requested ? this.unfollow() : this.follow()
},
@ -45,12 +59,21 @@ export default {
})
},
unfollow () {
if (this.shouldConfirmUnfollow) {
this.showConfirmUnfollow()
} else {
this.doUnfollow()
}
},
doUnfollow () {
const store = this.$store
this.inProgress = true
requestUnfollow(this.relationship.id, store).then(() => {
this.inProgress = false
store.commit('removeStatus', { timeline: 'friends', userId: this.relationship.id })
})
this.hideConfirmUnfollow()
}
}
}

View file

@ -1,13 +1,33 @@
<template>
<button
class="btn button-default follow-button"
:class="{ toggled: isPressed }"
:disabled="disabled"
:title="title"
@click="onClick"
>
{{ label }}
</button>
<div>
<button
class="btn button-default follow-button"
:class="{ toggled: isPressed }"
:disabled="disabled"
:title="title"
@click="onClick"
>
{{ label }}
</button>
<confirm-modal
:showing="showingConfirmUnfollow"
:title="$t('user_card.unfollow_confirm_title')"
:confirm-text="$t('user_card.unfollow_confirm_accept_button')"
:cancel-text="$t('user_card.unfollow_confirm_cancel_button')"
@accepted="doUnfollow"
@cancelled="hideConfirmUnfollow"
>
<i18n
path="user_card.unfollow_confirm"
tag="span"
>
<span
place="user"
v-text="user.screen_name_ui"
/>
</i18n>
</confirm-modal>
</div>
</template>
<script src="./follow_button.js"></script>