migrate SubscribeButton to the existing common component
This commit is contained in:
parent
d5e8315e83
commit
4cf402ff21
4 changed files with 16 additions and 51 deletions
|
@ -1,26 +0,0 @@
|
||||||
export default {
|
|
||||||
props: [ 'user' ],
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
inProgress: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
subscribe () {
|
|
||||||
this.inProgress = true
|
|
||||||
this.$store.state.api.backendInteractor.subscribeUser(this.user.id)
|
|
||||||
.then((updated) => {
|
|
||||||
console.log(updated)
|
|
||||||
this.inProgress = false
|
|
||||||
})
|
|
||||||
},
|
|
||||||
unsubscribe () {
|
|
||||||
this.inProgress = true
|
|
||||||
this.$store.state.api.backendInteractor.unsubscribeUser(this.user.id)
|
|
||||||
.then((updated) => {
|
|
||||||
console.log(updated)
|
|
||||||
this.inProgress = false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,22 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<button
|
|
||||||
@click.prevent="subscribe"
|
|
||||||
class="btn btn-default follow-card-follow-button"
|
|
||||||
:disabled="inProgress"
|
|
||||||
v-if="!user.subscribing"
|
|
||||||
>
|
|
||||||
Subscribe
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
@click.prevent="unsubscribe"
|
|
||||||
class="btn btn-default follow-card-follow-button pressed"
|
|
||||||
:disabled="inProgress"
|
|
||||||
v-else
|
|
||||||
>
|
|
||||||
Subscribing!
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script src="./subscribe_button.js"></script>
|
|
|
@ -1,6 +1,6 @@
|
||||||
import UserAvatar from '../user_avatar/user_avatar.vue'
|
import UserAvatar from '../user_avatar/user_avatar.vue'
|
||||||
import RemoteFollow from '../remote_follow/remote_follow.vue'
|
import RemoteFollow from '../remote_follow/remote_follow.vue'
|
||||||
import SubscribeButton from '../subscribe_button/subscribe_button.vue'
|
import ProgressButton from '../progress_button/progress_button.vue'
|
||||||
import ModerationTools from '../moderation_tools/moderation_tools.vue'
|
import ModerationTools from '../moderation_tools/moderation_tools.vue'
|
||||||
import { hex2rgb } from '../../services/color_convert/color_convert.js'
|
import { hex2rgb } from '../../services/color_convert/color_convert.js'
|
||||||
import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate'
|
import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate'
|
||||||
|
@ -106,7 +106,7 @@ export default {
|
||||||
UserAvatar,
|
UserAvatar,
|
||||||
RemoteFollow,
|
RemoteFollow,
|
||||||
ModerationTools,
|
ModerationTools,
|
||||||
SubscribeButton
|
ProgressButton
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
followUser () {
|
followUser () {
|
||||||
|
@ -137,6 +137,12 @@ export default {
|
||||||
unmuteUser () {
|
unmuteUser () {
|
||||||
this.$store.dispatch('unmuteUser', this.user.id)
|
this.$store.dispatch('unmuteUser', this.user.id)
|
||||||
},
|
},
|
||||||
|
subscribeUser () {
|
||||||
|
return this.$store.state.api.backendInteractor.subscribeUser(this.user.id)
|
||||||
|
},
|
||||||
|
unsubscribeUser () {
|
||||||
|
return this.$store.state.api.backendInteractor.unsubscribeUser(this.user.id)
|
||||||
|
},
|
||||||
setProfileView (v) {
|
setProfileView (v) {
|
||||||
if (this.switcher) {
|
if (this.switcher) {
|
||||||
const store = this.$store
|
const store = this.$store
|
||||||
|
|
|
@ -72,7 +72,14 @@
|
||||||
</button>
|
</button>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<SubscribeButton :user="user" />
|
<div>
|
||||||
|
<ProgressButton :click="subscribeUser" v-if="!user.subscribing">
|
||||||
|
Subscribe
|
||||||
|
</ProgressButton>
|
||||||
|
<ProgressButton class="pressed" :click="unsubscribeUser" v-else>
|
||||||
|
Subscribing!
|
||||||
|
</ProgressButton>
|
||||||
|
</div>
|
||||||
<div class='mute' v-if='isOtherUser && loggedIn'>
|
<div class='mute' v-if='isOtherUser && loggedIn'>
|
||||||
<span v-if='user.muted'>
|
<span v-if='user.muted'>
|
||||||
<button @click="unmuteUser" class="pressed">
|
<button @click="unmuteUser" class="pressed">
|
||||||
|
|
Loading…
Reference in a new issue