Clean up featured follow. Try to make the UX a bit nicer. Localize strings that weren't being localized. Add error handling.

src/sites/twitch-twilight/modules/featured-follow.vue

@@ -25,12 +25,17 @@
 								<a :href="'/' + user.login" :title="user.login" @click.prevent="route(user.login)"><p class="tw-ellipsis tw-flex-grow-1 tw-mg-l-1 tw-font-size-5">{{ user.displayName }}</p></a>
 								<div class="tw-flex-grow-1 tw-pd-x-2"/>
 
+								<div v-if="user.error">
+									{{ t('featured-follow.error', 'An error occured.') }}
+								</div>
+								<template v-else>
 									<button
 										v-if="user.following"
-									:data-title="`Unfollow ${user.login}`"
+										:disabled="user.loading"
+										:data-title="user.loading ? null : t('featured-follow.button.unfollow', 'Unfollow %{user}', {user: user.displayName})"
 										data-tooltip-type="html"
 										class="tw-button tw-button--status tw-button--success ffz-tooltip ffz--featured-button-unfollow"
-									@click="unfollowUser(user.id)"
+										@click="clickWithTip($event, unfollowUser, user.id)"
 									>
 										<span class="tw-button__icon tw-button__icon--status tw-flex">
 											<figure class="ffz-i-heart ffz--featured-button-unfollow-button"/>
@@ -38,10 +43,11 @@
 									</button>
 									<button
 										v-if="user.following"
-									:data-title="`${(user.disableNotifications ? 'Enable' : 'Disable')} Notifications`"
+										:disabled="user.loading"
+										:data-title="notifyTip(user.disableNotifications)"
 										data-tooltip-type="html"
 										class="tw-button-icon tw-mg-l-05 ffz-tooltip ffz--featured-button-notification"
-									@click="updateNotificationStatus(user.id, user.disableNotifications)"
+										@click="clickWithTip($event, updateNotificationStatus, user.id, user.disableNotifications)"
 									>
 										<span class="tw-button__icon tw-flex">
 											<figure :class="{ 'ffz-i-bell': !user.disableNotifications, 'ffz-i-bell-off': user.disableNotifications }"/>
@@ -49,6 +55,7 @@
 									</button>
 									<button
 										v-else
+										:disabled="user.loading"
 										class="tw-button"
 										@click="followUser(user.id)"
 									>
@@ -59,6 +66,7 @@
 											{{ t('featured-follow.button.follow', 'Follow') }}
 										</span>
 									</button>
+								</template>
 							</div>
 						</div>
 					</div>
@@ -72,6 +80,24 @@
 export default {
 	data() {
 		return this.$vnode.data;
+	},
+
+	methods: {
+		clickWithTip(event, fn, ...args) {
+			const el = event.target,
+				tip = el && el._ffz_tooltip$0,
+				visible = tip && tip.visible;
+
+			visible && tip.hide();
+			fn.call(this, ...args);
+			visible && setTimeout(() => document.contains(el) && tip.show(), 0)
+		},
+
+		notifyTip(state) {
+			return state ?
+				this.t('featured-follow.notify.off', 'Notifications are currently disabled. Click to enable.') :
+				this.t('featured-follow.notify.on', 'Notifications are currently enabled. Click to disable.');
+		}
 	}
 }
 </script>

src/sites/twitch-twilight/modules/featured_follow.js

@@ -5,14 +5,14 @@
 // ============================================================================
 
 import Module from 'utilities/module';
-import {createElement as e} from 'utilities/dom';
+import {createElement} from 'utilities/dom';
+import {has} from 'utilities/object';
 
 import FEATURED_QUERY from './featured_follow_query.gql';
 
 import FEATURED_FOLLOW from './featured_follow_follow.gql';
 import FEATURED_UNFOLLOW from './featured_follow_unfollow.gql';
 
-const TWITCH_URL = /^(?:https?:\/\/)?(?:www\.)?twitch\.tv\/([A-Za-z0-9_]+)/i;
 
 export default class FeaturedFollow extends Module {
 	constructor(...args) {
@@ -84,31 +84,37 @@ export default class FeaturedFollow extends Module {
 		this.follow_data = {};
 
 		this.socket.on(':command:follow_buttons', data => {
-			for(const channel_login in data) {
-				if (!data.hasOwnProperty(channel_login)) continue;
-
+			for(const channel_login in data)
+				if ( has(data, channel_login) )
 					this.follow_data[channel_login] = data[channel_login];
-			}
 
-			if (this.vueFeaturedFollow) {
+			if ( this.vueFeaturedFollow )
 				this.vueFeaturedFollow.data.hasUpdate = true;
-			}
 
 			this.metadata.updateMetadata('following');
 		});
-
-		// ffz.resolve('site.featured_follow').updateFeaturedChannels({ login: 'lordmau5' }, ['sirstendec','jugachi']);
 	}
 
 	async getFollowsForLogin(login) {
 		const follow_data = this.follow_data && this.follow_data[login];
-		if (!follow_data || follow_data.length === 0) return [];
+		if ( ! follow_data || ! follow_data.length )
+			return [];
 
-		const ap_data = await this.apollo.client.query({ query: FEATURED_QUERY, variables: { logins: follow_data }});
+		const ap_data = await this.apollo.client.query({
+				query: FEATURED_QUERY,
+				variables: {
+					logins: follow_data
+				}
+			}),
+			follows = {};
 
-		const follows = {};
 		for (const user of ap_data.data.users) {
+			if ( ! user.id )
+				continue;
+
 			follows[user.id] = {
+				loading: false,
+				error: false,
 				id: user.id,
 				login: user.login,
 				displayName: user.displayName,
@@ -117,12 +123,13 @@ export default class FeaturedFollow extends Module {
 				disableNotifications: user.self.follower.disableNotifications
 			};
 		}
+
 		return follows;
 	}
 
 	buildFeaturedFollowMenu(vue, login, follows) {
 		const vueEl = new vue.Vue({
-			el: e('div'),
+			el: createElement('div'),
 			render: h => this.vueFeaturedFollow = h('featured-follow', {
 				login,
 				follows,
@@ -147,64 +154,79 @@ export default class FeaturedFollow extends Module {
 		return vueEl.$el;
 	}
 
-	updateFeaturedChannels(room, args) {
-		args = args.join(' ').trim().toLowerCase().split(/[ ,]+/);
-
-		const out = [];
-
-		for (let i = 0; i < args.length; i++) {
-			let arg = args[i];
-			const match = arg.match(TWITCH_URL);
-
-			if (match)
-				arg = match[1];
-
-			if (arg !== '' && out.indexOf(arg) === -1)
-				out.push(arg);
-		}
-
-		this.socket.call('update_follow_buttons', room.login, out)
-			.then(() => {
-				// this.log.info('Success!', data);
-			})
-			.catch(() => 'There was an error communicating with the server.');
-		// , (success, data) => {
-		// 	if (!success) {
-		// 		this.log.warn('Not a Success: ', data);
-		// 		// f.room_message(room, data);
-		// 		return;
-		// 	}
-
-		// 	this.log.info('Success!', data);
-
-		// 	// this.room.message(`The following buttons have been ${data ? 'updated' : 'disabled'}.`);
-		// }) )
-		
-	}
-
 	async followUser(follows, id) {
-		const ap_data = await this.apollo.client.mutate({ mutation: FEATURED_FOLLOW, variables: { targetID: id, disableNotifications: false }});
+		const f = follows[id];
+		f.loading = true;
 
-		const follow = ap_data.data.followUser.follow;
+		try {
+			const ap_data = await this.apollo.client.mutate({
+				mutation: FEATURED_FOLLOW,
+				variables: {
+					targetID: id,
+					disableNotifications: false
+				}
+			});
 
-		follows[id].following = follow.followedAt != null;
-		follows[id].disableNotifications = follow.disableNotifications;
+			const update = ap_data.data.followUser.follow;
+
+			f.loading = false;
+			f.following = update.followedAt != null;
+			f.disableNotifications = update.disableNotifications;
+
+		} catch(err) {
+			this.log.warn('There was a problem following.', err);
+			f.error = true;
+		}
 	}
 
 	async updateNotificationStatus(follows, id, oldStatus) {
-		const ap_data = await this.apollo.client.mutate({ mutation: FEATURED_FOLLOW, variables: { targetID: id, disableNotifications: !oldStatus }});
+		const f = follows[id];
+		f.loading = true;
 
-		const follow = ap_data.data.followUser.follow;
+		// Immediate Feedback
+		f.disableNotifications = ! oldStatus;
 
-		follows[id].following = follow.followedAt != null;
-		follows[id].disableNotifications = follow.disableNotifications;
+		try {
+			const ap_data = await this.apollo.client.mutate({
+				mutation: FEATURED_FOLLOW,
+				variables: {
+					targetID: id,
+					disableNotifications: !oldStatus
+				}
+			});
+
+			const update = ap_data.data.followUser.follow;
+
+			f.loading = false;
+			f.following = update.followedAt != null;
+			f.disableNotifications = update.disableNotifications;
+
+		} catch(err) {
+			this.log.warn('There was a problem updating notification status.', err);
+			f.error = true;
+		}
 	}
 
 	async unfollowUser(follows, id) {
-		await this.apollo.client.mutate({ mutation: FEATURED_UNFOLLOW, variables: { targetID: id }});
+		const f = follows[id];
+		f.loading = true;
 
-		follows[id].following = false;
-		follows[id].disableNotifications = false;
+		try {
+			await this.apollo.client.mutate({
+				mutation: FEATURED_UNFOLLOW,
+				variables: {
+					targetID: id
+				}
+			});
+
+			f.loading = false;
+			f.following = false;
+			f.disableNotifications = false;
+
+		} catch(err) {
+			this.log.warn('There was a problem unfollowing.', err);
+			f.error = true;
+		}
 	}
 
 	route(channel) {

src/sites/twitch-twilight/styles/featured_follow.scss

@@ -4,15 +4,12 @@
 	}
 
 	.ffz--featured-button-unfollow {
-		&:hover &:before {
+		&:hover figure:before {
 			content: '\e813';
 		}
-
-		> * {
-			pointer-events: none;
-		}
 	}
 
+	.ffz--featured-button-unfollow,
 	.ffz--featured-button-notification {
 		> * {
 			pointer-events: none;