traxxx/assets/components/home/home.vue

<template>
	<div class="home">
		<div class="content-inner">
			<FilterBar
				ref="filter"
				:fetch-releases="fetchReleases"
				:is-home="true"
				:items-total="totalCount"
				:items-per-page="limit"
				:content="$refs.content"
			/>

			<Releases :releases="releases" />

			<Pagination
				v-if="totalCount > 0"
				:items-total="totalCount"
				:items-per-page="limit"
				class="pagination-bottom"
			/>
		</div>

		<Footer />
	</div>
</template>

<script>
import FilterBar from '../filters/filter-bar.vue';
import Releases from '../releases/releases.vue';
import Pagination from '../pagination/pagination.vue';

async function fetchReleases() {
	const { releases, totalCount } = await this.$store.dispatch('fetchReleases', {
		limit: this.limit,
		range: this.$route.params.range,
		pageNumber: Number(this.$route.params.pageNumber) || 1,
	});

	this.totalCount = totalCount;
	this.releases = releases;

	this.$refs.filter.$el.scrollIntoView();
}

async function mounted() {
	this.pageTitle = '';

	await this.fetchReleases();
}

export default {
	components: {
		FilterBar,
		Releases,
		Pagination,
	},
	data() {
		return {
			releases: [],
			networks: [],
			pageTitle: null,
			limit: 30,
			totalCount: 0,
			from: null,
		};
	},
	watch: {
		$route: fetchReleases,
		'$store.state.ui.tagFilter': fetchReleases,
	},
	mounted,
	methods: {
		fetchReleases,
	},
};
</script>

<style lang="scss" scoped>
.home {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}
</style>