Added dedicated scene function and pagination to tag page.

assets/js/router.js

@@ -125,11 +125,12 @@ const routes = [
 			params: {
 				...from.params,
 				range: 'latest',
+				pageNumber: 1,
 			},
 		}),
 	},
 	{
-		path: '/tag/:tagSlug/:range',
+		path: '/tag/:tagSlug/:range/:pageNumber',
 		component: Tag,
 		name: 'tag',
 	},

assets/js/tags/actions.js

@@ -2,20 +2,26 @@ import { graphql, get } from '../api';
 import {
 	releaseFields,
 } from '../fragments';
-import { curateTag } from '../curate';
+import { curateTag, curateRelease } from '../curate';
 import getDateRange from '../get-date-range';
 
 function initTagsActions(store, _router) {
-	async function fetchTagBySlug({ _commit }, { tagSlug, limit = 100, range = 'latest' }) {
+	async function fetchTagBySlug({ _commit }, {
+		tagSlug,
+		pageNumber = 1,
+		limit = 100,
+		range = 'latest',
+	}) {
 		const { before, after, orderBy } = getDateRange(range);
 
 		const { tagBySlug } = await graphql(`
             query Tag(
                 $tagSlug:String!
+				$offset: Int = 0,
                 $limit:Int = 1000,
                 $after:Datetime = "1900-01-01",
                 $before:Datetime = "2100-01-01",
-                $orderBy: [ReleasesTagsOrderBy!],
+                $orderBy: [ReleasesOrderBy!],
                 $exclude: [String!]
             ) {
                 tagBySlug(slug:$tagSlug) {
@@ -57,31 +63,31 @@ function initTagsActions(store, _router) {
                             }
                         }
                     }
-                    releases: releasesTags(
+                    scenesConnection(
                         filter: {
-                            release: {
-                                date: {
-                                    lessThan: $before,
-                                    greaterThan: $after,
-                                },
-                                releasesTagsConnection: {
-                                    none: {
-                                        tag: {
-                                            slug: {
-                                                in: $exclude
-                                            }
-                                        }
-                                    }
-                                }
-                            }
+							date: {
+								lessThan: $before,
+								greaterThan: $after,
+							},
+							releasesTagsConnection: {
+								none: {
+									tag: {
+										slug: {
+											in: $exclude
+										}
+									}
+								}
+							}
                         },
                         first: $limit,
                         orderBy: $orderBy,
+						offset: $offset
                     ) {
-                        release {
-                            ${releaseFields}
-                        }
-                    }
+						releases: nodes {
+							${releaseFields}
+						}
+						totalCount
+					}
                 }
             }
         `, {
@@ -89,11 +95,16 @@ function initTagsActions(store, _router) {
 			limit,
 			after,
 			before,
-			orderBy: orderBy === 'DATE_DESC' ? 'RELEASE_BY_RELEASE_ID__DATE_DESC' : 'RELEASE_BY_RELEASE_ID__DATE_ASC',
+			orderBy: orderBy === 'DATE_DESC' ? 'DATE_DESC' : 'DATE_ASC',
+			offset: Math.max(0, (pageNumber - 1)) * limit,
 			exclude: store.state.ui.filter,
 		});
 
-		return curateTag(tagBySlug, store);
+		return {
+			tag: curateTag(tagBySlug, null, curateRelease),
+			releases: tagBySlug.scenesConnection.releases.map(release => curateRelease(release)),
+			totalCount: tagBySlug.scenesConnection.totalCount,
+		};
 	}
 
 	async function fetchTags({ _commit }, {