pixelfed/resources/assets/components/discover/FindFriends.vue

<template>
	<div class="discover-find-friends-component">
		<div v-if="isLoaded" class="container-fluid mt-3">

			<div class="row">
				<div class="col-md-4 col-lg-3">
					<sidebar :user="profile" />
				</div>

				<div class="col-md-6 col-lg-6">
					<b-breadcrumb class="font-default" :items="breadcrumbItems"></b-breadcrumb>

					<h1 class="font-default">Find Friends</h1>
					<!-- <p class="font-default lead">Posts from hashtags you follow</p> -->
					<hr>

					<b-spinner v-if="isLoading" />

					<div v-if="!isLoading" class="row justify-content-center">
						<div class="col-12 col-lg-10 mb-3" v-for="(profile, index) in popularAccounts">
							<div class="card shadow-sm border-0 rounded-px">
								<div class="card-body p-2">
									<profile-card
										:key="'pfc' + index"
										:profile="profile"
										class="w-100"
										v-on:follow="follow(index)"
										v-on:unfollow="unfollow(index)"
									/>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script type="text/javascript">
import Drawer from './../partials/drawer.vue';
import Sidebar from './../partials/sidebar.vue';
import StatusCard from './../partials/TimelineStatus.vue';
import ProfileCard from './../partials/profile/ProfileHoverCard.vue';

export default {
	components: {
		"drawer": Drawer,
		"sidebar": Sidebar,
		"status-card": StatusCard,
		"profile-card": ProfileCard
	},

	data() {
		return {
			isLoaded: true,
			isLoading: true,
			profile: window._sharedData.user,
			feed: [],
			popular: [],
			popularAccounts: [],
			popularLoaded: false,
			breadcrumbItems: [
				{
					text: 'Discover',
					href: '/i/web/discover'
				},
				{
					text: 'Find Friends',
					active: true
				}
			]
		}
	},

	mounted() {
		this.fetchConfig();
	},

	methods: {
		fetchConfig() {
			axios.get('/api/pixelfed/v2/discover/meta')
			.then(res => {
				if(res.data.friends.enabled == false) {
					this.$router.push('/i/web/discover');
				} else {
					this.fetchPopularAccounts();
				}
			})
			.catch(e => {
				this.isLoading = false;
			})
		},

		fetchPopular() {
			axios.get('/api/pixelfed/v2/discover/account-insights')
			.then(res => {
				this.popular = res.data;
				this.popularLoaded = true;
				this.isLoading = false;
			})
			.catch(e => {
				this.isLoading = false;
			})
		},

		formatCount(val) {
			return App.util.format.count(val);
		},

		timeago(ts) {
			return App.util.format.timeAgo(ts);
		},

		fetchPopularAccounts() {
			axios.get('/api/pixelfed/discover/accounts/popular')
			.then(res => {
				this.popularAccounts = res.data;
				this.isLoading = false;
			})
			.catch(e => {
				this.isLoading = false;
			})
		},

		follow(index) {
			axios.post('/api/v1/accounts/' + this.popularAccounts[index].id + '/follow')
			.then(res => {
				this.newlyFollowed++;
				this.$store.commit('updateRelationship', [res.data]);
				this.$emit('update-profile', {
					'following_count': this.profile.following_count + 1
				})
			});
		},

		unfollow(index) {
			axios.post('/api/v1/accounts/' + this.popularAccounts[index].id + '/unfollow')
			.then(res => {
				this.newlyFollowed--;
				this.$store.commit('updateRelationship', [res.data]);
				this.$emit('update-profile', {
					'following_count': this.profile.following_count - 1
				})
			});
		}
	}
}
</script>

<style lang="scss">
	.discover-find-friends-component {
		.bg-stellar {
			background: #7474BF;
			background: -webkit-linear-gradient(to right, #348AC7, #7474BF);
			background: linear-gradient(to right, #348AC7, #7474BF);
		}

		.bg-midnight {
			background: #232526;
			background: -webkit-linear-gradient(to right, #414345, #232526);
			background: linear-gradient(to right, #414345, #232526);
		}

		.font-default {
			font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
			letter-spacing: -0.7px;
		}

		.active {
			font-weight: 700;
		}

		.profile-hover-card-inner {
			width: 100%;

			.d-flex {
				max-width: 100% !important;
			}
		}
	}
</style>