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

183 lines
4.0 KiB
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>