Subscription button
amiller911 opened this issue · comments
Please tell me how to add this code button subscription (unsubscribe)?
Code # 1
`import Helpers from '../mixins/Helpers';
export default {
mixins: [Helpers],
data() {
return {
subscribedFilter: '',
showMenu: false,
showSubMenu: false
};
},
computed: {
showDiscoverChannels() {
return (
this.channels.length < this.channelsLimit &&
!this.subscribedFilter &&
Store.settings.rightSidebar.channelsFilter == 'subscribed'
);
},
channels() {
// subscribed
return Store.state.subscribedChannels;
},
channelsCount() {
return this.channels.length;
},
showChannelAvatars() {
return Store.settings.rightSidebar.showChannelAvatars;
},
channelsLimit() {
return Store.settings.rightSidebar.channelsLimit;
},
filter() {
return Store.settings.rightSidebar.channelsFilter;
},
filterForHumans() {
if (this.filter == 'subscribed') return 'Subscribed Channels';
if (this.filter == 'bookmarked') return 'Bookmarked Channels';
if (this.filter == 'moderating') return 'Moderating Channels';
},
sortedSubscribeds() {
let self = this;
return _.orderBy(
self.channels.filter(
channel => channel.name.toLowerCase().indexOf(self.subscribedFilter.toLowerCase()) !== -1
),
'subscribers_count',
'desc'
).slice(0, self.channelsLimit > 2 ? self.channelsLimit : 2);
},
},
created() {
this.$eventHub.$on('pressed-esc', this.closeMenu);
},
methods: {
closeMenu() {
this.showMenu = false;
},
moreChannels() {
Store.settings.rightSidebar.channelsLimit += 15;
},
pushToDiscoverChannels() {
this.$router.push({ name: 'discover-channels' });
},
lessChannels() {
Store.settings.rightSidebar.channelsLimit -= 15;
},
subscribe: _.debounce(
function() {
this.subscribed = !this.subscribed;
axios
.post(`/channels/${this.list.id}/subscribe`)
.catch(() => {
this.subscribed = !this.subscribed;
});
this.$emit('subscribed');
},
200,
{ leading: true, trailing: false }
)
}
};`
Need to add this button
<el-tooltip :content="subscribed ? 'Unsubscribe' : 'Subscribe'" placement="top" transition="false" :open-delay="500" > <i class="subscribe-icon" :class="subscribed ? 'go-red el-icon-remove' : 'go-green el-icon-circle-plus-outline'" @click="subscribe" ></i> </el-tooltip>
Code # 2
`subscribed: {
get() {
return Store.state.subscribedAt.indexOf(this.list.id) !== -1
? true
: false;
},
set() {
if (Store.state.subscribedAt.indexOf(this.list.id) !== -1) {
let removeItem = this.list.id;
Store.state.subscribedChannels = Store.state.subscribedChannels.filter(
(channel) => channel.id != removeItem
);
let index = Store.state.subscribedAt.indexOf(this.list.id);
Store.state.subscribedAt.splice(index, 1);
return;
}
Store.state.subscribedChannels.push(this.list);
Store.state.subscribedAt.push(this.list.id);
}
},`
How to merge code # 2 and code # 1 for operation of buttons subscription (unsubscribe)?
This is not really a voten issue.