Added basic pagination to homepage.

assets/components/home/home.vue

@@ -1,59 +1,76 @@
 <template>
-    <div class="content">
-        <FilterBar
-            :fetch-releases="fetchReleases"
-            :is-home="true"
-        />
+	<div class="content">
+		<FilterBar
+			:fetch-releases="fetchReleases"
+			:is-home="true"
+		/>
 
-        <div class="content-inner">
-            <Releases :releases="releases" />
-        </div>
-    </div>
+		<div class="content-inner">
+			<Pagination
+				:items-total="totalCount"
+				:items-per-page="limit"
+				class="pagination-top"
+			/>
+
+			<Releases :releases="releases" />
+
+			<Pagination
+				:items-total="totalCount"
+				:items-per-page="limit"
+				class="pagination-bottom"
+			/>
+		</div>
+	</div>
 </template>
 
 <script>
 import FilterBar from '../header/filter-bar.vue';
 import Releases from '../releases/releases.vue';
+import Pagination from '../pagination/pagination.vue';
 
 async function fetchReleases() {
-    this.releases = await this.$store.dispatch('fetchReleases', {
-        limit: (this.$route.query && this.$route.query.limit && Number(this.$route.query.limit)) || 30,
-        range: this.$route.name,
-    });
+	const { releases, totalCount } = await this.$store.dispatch('fetchReleases', {
+		limit: this.limit,
+		pageNumber: Number(this.$route.params.pageNumber) || 1,
+		range: this.$route.name,
+	});
+
+	this.totalCount = totalCount;
+	this.releases = releases;
 }
 
 async function route() {
-    await this.fetchReleases();
+	await this.fetchReleases();
 }
 
 async function mounted() {
-    this.pageTitle = '';
+	this.pageTitle = '';
 
-    await this.fetchReleases();
+	await this.fetchReleases();
 }
 
 export default {
-    components: {
-        FilterBar,
-        Releases,
-    },
-    data() {
-        return {
-            releases: [],
-            networks: [],
-            pageTitle: null,
-            from: null,
-        };
-    },
-    beforeRouteEnter(to, from, next) {
-        next(vm => vm.$set(vm, 'from', from));
-    },
-    watch: {
-        $route: route,
-    },
-    mounted,
-    methods: {
-        fetchReleases,
-    },
+	components: {
+		FilterBar,
+		Releases,
+		Pagination,
+	},
+	data() {
+		return {
+			releases: [],
+			networks: [],
+			pageTitle: null,
+			limit: 15,
+			totalCount: 0,
+			from: null,
+		};
+	},
+	watch: {
+		$route: route,
+	},
+	mounted,
+	methods: {
+		fetchReleases,
+	},
 };
 </script>