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>

assets/components/pagination/pagination.vue

@@ -0,0 +1,112 @@
+<template>
+	<div class="pagination">
+		<template v-if="pageNumber > 1">
+			<router-link
+				class="pagination-page"
+				:to="{ params: { pageNumber: 1 } }"
+			>&lt;&lt;</router-link>
+
+			<router-link
+				class="pagination-page"
+				:to="{ params: { pageNumber: pageNumber - 1 } }"
+			>&lt;</router-link>
+		</template>
+
+		<template v-else>
+			<span class="pagination-page disabled">&lt;&lt;</span>
+			<span class="pagination-page disabled">&lt;</span>
+		</template>
+
+		<router-link
+			v-for="pageX in pageCount"
+			:key="`page-${pageX}`"
+			:to="{ params: { pageNumber: pageX } }"
+			:class="{ active: pageX === pageNumber }"
+			class="pagination-page"
+		> {{ pageX }} </router-link>
+
+		<template v-if="pageNumber < pageCount">
+			<router-link
+				class="pagination-page"
+				:to="{ params: { pageNumber: pageNumber + 1 } }"
+			>&gt;</router-link>
+
+			<router-link
+				class="pagination-page"
+				:to="{ params: { pageNumber: pageCount } }"
+			>&gt;&gt;</router-link>
+		</template>
+
+		<template v-else>
+			<span class="pagination-page disabled">&gt;</span>
+			<span class="pagination-page disabled">&gt;&gt;</span>
+		</template>
+	</div>
+</template>
+
+<script>
+function pageNumber() {
+	return Number(this.$route.params.pageNumber) || 1;
+}
+
+function pageCount() {
+	return Math.ceil(this.itemsTotal / this.itemsPerPage);
+}
+
+export default {
+	props: {
+		itemsTotal: {
+			type: Number,
+			default: 0,
+		},
+		itemsPerPage: {
+			type: Number,
+			default: 10,
+		},
+	},
+	computed: {
+		pageNumber,
+		pageCount,
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.pagination {
+	width: 100%;
+	display: flex;
+	justify-content: center;
+}
+
+.pagination-page {
+	width: 2rem;
+	height: 2rem;
+	display: inline-flex;
+	align-items: center;
+	margin: 0 .5rem 0 0;
+	justify-content: center;
+	color: var(--shadow);
+	font-weight: bold;
+	text-decoration: none;
+
+	&:hover:not(.active, .disabled) {
+		color: var(--text);
+	}
+
+	&.active {
+		color: var(--primary);
+	}
+
+	&.disabled {
+		color: var(--shadow-weak);
+	}
+}
+
+.pagination-top {
+	margin: 0 0 1rem 0;
+}
+
+.pagination-bottom{
+	margin: 1rem 0 0 0;
+}
+</style>

assets/components/releases/release.vue

@@ -3,6 +3,8 @@
 		v-if="release"
 		class="content"
 	>
+		<Banner :release="release" />
+
 		<div class="details">
 			<div class="column">
 				<a
@@ -93,8 +95,6 @@
 			</div>
 		</div>
 
-		<Banner :release="release" />
-
 		<div class="info column">
 			<h2 class="row title">{{ release.title }}</h2>
 

assets/components/tags/tag.vue

@@ -172,6 +172,7 @@ export default {
     color: var(--text-light);
     display: flex;
     flex-direction: column;
+	flex-shrink: 0;
     width: 25rem;
     box-sizing: border-box;
     overflow: hidden;

assets/js/actors/actions.js

@@ -136,7 +136,7 @@ function initActorActions(store, _router) {
                                     lessThan: $before,
                                     greaterThan: $after,
                                 },
-                                releasesTags: {
+                                releasesTagsConnection: {
                                     none: {
                                         tag: {
                                             slug: {

assets/js/fragments.js

@@ -176,13 +176,13 @@ const releaseFields = `
 `;
 
 const releasesFragment = `
-    releases(
+    connection: releasesConnection(
         filter: {
             date: {
                 lessThan: $before,
                 greaterThan: $after,
             }
-            releasesTags: {
+            releasesTagsConnection: {
                 none: {
                     tag: {
                         slug: {
@@ -193,21 +193,25 @@ const releasesFragment = `
             }
         },
         first: $limit,
+		offset: $offset,
         orderBy: $orderBy,
     ) {
-        ${releaseFields}
-        movieActors: movieActorsByMovieId(orderBy: ACTOR_BY_ACTOR_ID__GENDER_ASC) {
-            actor {
-                ${actorFields}
-            }
-        }
-        movieTags: movieTagsByMovieId(orderBy: TAG_BY_TAG_ID__PRIORITY_DESC) {
-            tag {
-                id
-                name
-                slug
-            }
-        }
+		releases: nodes {
+			${releaseFields}
+			movieActors: movieActorsByMovieId(orderBy: ACTOR_BY_ACTOR_ID__GENDER_ASC) {
+				actor {
+					${actorFields}
+				}
+			}
+			movieTags: movieTagsByMovieId(orderBy: TAG_BY_TAG_ID__PRIORITY_DESC) {
+				tag {
+					id
+					name
+					slug
+				}
+			}
+		}
+		totalCount
     }
 `;
 

assets/js/networks/actions.js

@@ -92,7 +92,7 @@ function initNetworksActions(store, _router) {
                                 }
                             }
                         ]
-                        releasesTags: {
+                        releasesTagsConnection: {
                             none: {
                                 tag: {
                                     slug: {

assets/js/releases/actions.js

@@ -4,12 +4,13 @@ import { curateRelease } from '../curate';
 import getDateRange from '../get-date-range';
 
 function initReleasesActions(store, _router) {
-	async function fetchReleases({ _commit }, { limit = 100, range = 'latest' }) {
+	async function fetchReleases({ _commit }, { limit = 10, pageNumber = 1, range = 'latest' }) {
 		const { before, after, orderBy } = getDateRange(range);
 
-		const { releases } = await graphql(`
+		const { connection: { releases, totalCount } } = await graphql(`
             query Releases(
                 $limit:Int = 1000,
+                $offset:Int = 0,
                 $after:Date = "1900-01-01",
                 $before:Date = "2100-01-01",
                 $orderBy:[ReleasesOrderBy!],
@@ -19,13 +20,17 @@ function initReleasesActions(store, _router) {
             }
         `, {
 			limit,
+			offset: Math.max(0, (pageNumber - 1)) * limit,
 			after,
 			before,
 			orderBy,
 			exclude: store.state.ui.filter,
 		});
 
-		return releases.map(release => curateRelease(release));
+		return {
+			releases: releases.map(release => curateRelease(release)),
+			totalCount,
+		};
 	}
 
 	async function fetchReleaseById({ _commit }, releaseId) {

assets/js/router.js

@@ -20,26 +20,32 @@ const routes = [
 		path: '/',
 		redirect: {
 			name: 'latest',
+			params: {
+				page: 1,
+			},
 		},
 	},
 	{
 		path: '/home',
 		redirect: {
 			name: 'latest',
+			params: {
+				page: 1,
+			},
 		},
 	},
 	{
-		path: '/latest',
+		path: '/latest/:pageNumber',
 		component: Home,
 		name: 'latest',
 	},
 	{
-		path: '/upcoming',
+		path: '/upcoming/:pageNumber',
 		component: Home,
 		name: 'upcoming',
 	},
 	{
-		path: '/new',
+		path: '/new/:pageNumber',
 		component: Home,
 		name: 'new',
 	},

assets/js/tags/actions.js

@@ -64,7 +64,7 @@ function initTagsActions(store, _router) {
                                     lessThan: $before,
                                     greaterThan: $after,
                                 },
-                                releasesTags: {
+                                releasesTagsConnection: {
                                     none: {
                                         tag: {
                                             slug: {

migrations/20190325001339_releases.js

@@ -644,7 +644,10 @@ exports.up = knex => Promise.resolve()
 		table.string('url', 1000);
 		table.string('title');
 		table.string('slug');
+
 		table.date('date');
+		table.index('date');
+
 		table.text('description');
 
 		table.integer('duration')

src/scrapers/julesjordan.js

@@ -7,7 +7,6 @@ const cheerio = require('cheerio');
 const { JSDOM } = require('jsdom');
 const moment = require('moment');
 
-const logger = require('../logger')(__filename);
 const { get, geta, ctxa, parseDate } = require('../utils/q');
 const { heightToCm } = require('../utils/convert');
 const slugify = require('../utils/slugify');

src/web/server.js

@@ -41,7 +41,8 @@ function initServer() {
 			graphiql: true,
 			enhanceGraphiql: true,
 			allowExplain: () => true,
-			simpleCollections: 'only',
+			// simpleCollections: 'only',
+			simpleCollections: 'both',
 			graphileBuildOptions: {
 				pgOmitListSuffix: true,
 				connectionFilterRelations: true,