pixelfed/resources/assets/components/landing/Explore.vue
2023-04-07 22:35:51 -06:00

120 lines
2.7 KiB
Vue

<template>
<div class="landing-explore-component">
<section class="page-wrapper">
<div class="container container-compact">
<div class="card bg-bluegray-900" style="border-radius: 10px;">
<div class="card-header bg-bluegray-800 nav-menu" style="border-top-left-radius: 10px; border-top-right-radius: 10px;">
<ul class="nav justify-content-around">
<li class="nav-item">
<router-link to="/" class="nav-link">About</router-link>
</li>
<li v-if="config.show_directory" class="nav-item">
<router-link to="/web/directory" class="nav-link">Directory</router-link>
</li>
<li v-if="config.show_explore_feed" class="nav-item">
<router-link to="/web/explore" class="nav-link">Explore</router-link>
</li>
</ul>
</div>
<div class="card-body">
<div class="py-3">
<p class="lead text-center">Explore trending posts</p>
</div>
<div v-if="loading" class="d-flex justify-content-center align-items-center" style="min-height: 500px;">
<b-spinner />
</div>
<div v-else class="feed-list">
<post-card
v-for="post in feed"
:key="post.id"
:post="post"
:range="ranges[rangeIndex]" />
</div>
</div>
</div>
</div>
<footer-component />
</section>
</div>
</template>
<script type="text/javascript">
import PostCard from './partials/PostCard';
export default {
components: {
"post-card": PostCard
},
data() {
return {
loading: true,
config: window.pfl,
isFetching: false,
range: 'daily',
ranges: ['daily', 'monthly', 'yearly'],
rangeIndex: 0,
feed: [],
}
},
beforeMount() {
if(this.config.show_explore_feed == false) {
this.$router.push('/');
}
},
mounted() {
this.init();
},
methods: {
init() {
axios.get('/api/pixelfed/v2/discover/posts/trending?range=daily')
.then(res => {
if(res && res.data.length > 3) {
this.feed = res.data;
this.loading = false;
} else {
this.rangeIndex++;
this.fetchTrending();
}
})
},
fetchTrending() {
if(this.isFetching || this.rangeIndex >= 3) {
return;
}
this.isFetching = true;
axios.get('/api/pixelfed/v2/discover/posts/trending', {
params: {
range: this.ranges[this.rangeIndex]
}
})
.then(res => {
if(res && res.data.length) {
if(this.rangeIndex == 2 && res.data.length > 3) {
this.feed = res.data;
this.loading = false;
} else {
this.rangeIndex++;
this.isFetching = false;
this.fetchTrending();
}
} else {
this.rangeIndex++;
this.isFetching = false;
this.fetchTrending();
}
})
}
}
}
</script>