pixelfed/resources/assets/components/groups/partials/SelfFeed.vue

134 lines
3.7 KiB
Vue
Raw Normal View History

2024-07-10 05:52:08 +00:00
<template>
<div class="col-12 col-md-9" style="overflow:hidden">
2024-10-06 05:57:48 +00:00
<div class="row bg-light justify-content-center">
<div class="col-12 flex-shrink-1">
<div class="my-4 px-3">
<p class="h1 font-weight-bold mb-1">Groups Feed</p>
<p class="lead text-muted mb-0">Recent posts from your groups</p>
</div>
</div>
</div>
<div class="row h-100 bg-light justify-content-center">
<div class="col-12 col-md-10 col-lg-6">
<div v-if="emptyFeed" class="mt-5">
<h1 class="font-weight-bold">Welcome to Pixelfed Groups!</h1>
<p class="lead">Groups are a way to participate in like minded communities and topics.</p>
<hr class="my-4">
<p>Anyone can create and manage their own group as long as it abides by our <a href="/site/kb/community-guidelines" target="_blank">community guidelines</a>.</p>
<p class="text-center mb-0">
<router-link to="/groups/discover" class="btn btn-primary btn-lg rounded-pill">
Discover Groups
</router-link>
</p>
</div>
2024-07-10 05:52:08 +00:00
2024-10-06 05:57:48 +00:00
<div v-else>
<div class="my-3">
<group-status
v-for="(status, index) in feed"
:key="'gs:' + status.id + index"
:prestatus="status"
:profile="profile"
:show-group-header="true"
:group="status.group"
:group-id="status.group.id" />
2024-07-10 05:52:08 +00:00
2024-10-06 05:57:48 +00:00
<div v-if="feed.length > 2">
<infinite-loading @infinite="infiniteFeed" :distance="800">
<div slot="no-more" class="my-3">
<p class="lead font-weight-bold pt-5">You have reached the end of this feed</p>
<div style="height: 10rem;"></div>
</div>
<div slot="no-results"></div>
</infinite-loading>
</div>
</div>
</div>
</div>
2024-07-10 05:52:08 +00:00
</div>
</div>
</template>
<script type="text/javascript">
import GroupStatus from './GroupStatus.vue';
export default {
props: {
profile: {
type: Object
}
},
data() {
return {
feed: [],
ids: [],
page: 1,
tab: 'feed',
initalLoad: false,
emptyFeed: true
};
},
components: {
'group-status': GroupStatus
},
mounted() {
this.fetchFeed();
},
methods: {
fetchFeed() {
axios.get('/api/v0/groups/self/feed', {
params: {
initial: true
}
})
.then(res => {
this.page++;
this.feed = res.data;
this.emptyFeed = this.feed.length === 0;
this.initalLoad = true;
})
},
infiniteFeed($state) {
if(this.feed.length < 2 || this.page > 5) {
$state.complete();
return;
}
axios.get('/api/v0/groups/self/feed', {
params: {
page: this.page
},
}).then(res => {
if (res.data.length) {
let data = res.data;
let self = this;
data.forEach(d => {
if(self.ids.indexOf(d.id) == -1) {
self.ids.push(d.id);
self.feed.push(d);
}
});
$state.loaded();
this.page++;
} else {
$state.complete();
}
});
},
switchTab(tab) {
this.tab = tab;
},
gotoDiscover() {
this.$emit('switchtab', 'discover');
}
}
}
</script>