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

<template>
	<div class="col-12 col-md-9" style="overflow:hidden">
		<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>

                <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" />

                        <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>
		</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>