Refactoring

src/client/app/common/views/components/index.ts

@@ -45,6 +45,7 @@ import uiSelect from './ui/select.vue';
 import uiInfo from './ui/info.vue';
 import uiMargin from './ui/margin.vue';
 import uiHr from './ui/hr.vue';
+import uiPagination from './ui/pagination.vue';
 import formButton from './ui/form/button.vue';
 import formRadio from './ui/form/radio.vue';
 
@@ -93,5 +94,6 @@ Vue.component('ui-select', uiSelect);
 Vue.component('ui-info', uiInfo);
 Vue.component('ui-margin', uiMargin);
 Vue.component('ui-hr', uiHr);
+Vue.component('ui-pagination', uiPagination);
 Vue.component('form-button', formButton);
 Vue.component('form-radio', formRadio);

src/client/app/common/views/components/ui/pagination.vue

@@ -0,0 +1,36 @@
+<template>
+<div class="mwermpua" v-if="!fetching">
+	<sequential-entrance animation="entranceFromTop" delay="25">
+		<slot :items="items"></slot>
+	</sequential-entrance>
+	<div class="more" v-if="more">
+		<ui-button @click="fetchMore()">{{ $t('@.load-more') }}</ui-button>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import paging from '../../../scripts/paging';
+
+export default Vue.extend({
+	mixins: [
+		paging({
+			captureWindowScroll: false,
+		}),
+	],
+
+	props: {
+		pagination: {
+			required: true
+		},
+	},
+});
+</script>
+
+<style lang="stylus" scoped>
+.mwermpua
+	> .more
+		margin-top 16px
+
+</style>

src/client/app/common/views/pages/pages.vue

@@ -2,22 +2,20 @@
 <div>
 	<ui-container :body-togglable="true">
 		<template #header><fa :icon="faEdit" fixed-width/>{{ $t('my-pages') }}</template>
-		<div class="rknalgpo" v-if="!fetching">
+		<div class="rknalgpo my">
 			<ui-button class="new" @click="create()"><fa :icon="faPlus"/></ui-button>
-			<sequential-entrance animation="entranceFromTop" delay="25" tag="div" class="pages">
-				<x-page-preview v-for="page in pages" class="page" :page="page" :key="page.id"/>
-			</sequential-entrance>
-			<ui-button v-if="existMore" @click="fetchMore()" style="margin-top:16px;">{{ $t('@.load-more') }}</ui-button>
+			<ui-pagination :pagination="myPagesPagination" #default="{items}">
+				<x-page-preview v-for="page in items" class="ckltabjg" :page="page" :key="page.id"/>
+			</ui-pagination>
 		</div>
 	</ui-container>
 
 	<ui-container :body-togglable="true">
 		<template #header><fa :icon="faHeart" fixed-width/>{{ $t('liked-pages') }}</template>
-		<div class="rknalgpo" v-if="!fetching">
-			<sequential-entrance animation="entranceFromTop" delay="25" tag="div" class="pages">
-				<x-page-preview v-for="like in likes" class="page" :page="like.page" :key="like.page.id"/>
-			</sequential-entrance>
-			<ui-button v-if="existMoreLikes" @click="fetchMoreLiked()">{{ $t('@.load-more') }}</ui-button>
+		<div class="rknalgpo">
+			<ui-pagination :pagination="likedPagesPagination" #default="{items}">
+				<x-page-preview v-for="like in items" class="ckltabjg" :page="like.page" :key="like.page.id"/>
+			</ui-pagination>
 		</div>
 	</ui-container>
 </div>
@@ -28,7 +26,6 @@ import Vue from 'vue';
 import { faPlus, faEdit } from '@fortawesome/free-solid-svg-icons';
 import { faStickyNote, faHeart } from '@fortawesome/free-regular-svg-icons';
 import i18n from '../../../i18n';
-import Progress from '../../scripts/loading';
 import XPagePreview from '../../views/components/page-preview.vue';
 
 export default Vue.extend({
@@ -38,87 +35,24 @@ export default Vue.extend({
 	},
 	data() {
 		return {
-			fetching: true,
-			pages: [],
-			existMore: false,
-			moreFetching: false,
-			likes: [],
-			existMoreLikes: false,
-			moreLikesFetching: false,
+			myPagesPagination: {
+				endpoint: 'i/pages',
+				limit: 5,
+			},
+			likedPagesPagination: {
+				endpoint: 'i/page-likes',
+				limit: 5,
+			},
 			faStickyNote, faPlus, faEdit, faHeart
 		};
 	},
 	created() {
-		this.fetch();
-
 		this.$emit('init', {
 			title: this.$t('@.pages'),
 			icon: faStickyNote
 		});
 	},
 	methods: {
-		async fetch() {
-			Progress.start();
-			this.fetching = true;
-
-			const pages = await this.$root.api('i/pages', {
-				limit: 11
-			});
-
-			if (pages.length == 11) {
-				this.existMore = true;
-				pages.pop();
-			}
-
-			const likes = await this.$root.api('i/page-likes', {
-				limit: 11
-			});
-
-			if (likes.length == 11) {
-				this.existMoreLikes = true;
-				likes.pop();
-			}
-
-			this.pages = pages;
-			this.likes = likes;
-			this.fetching = false;
-
-			Progress.done();
-		},
-		fetchMore() {
-			this.moreFetching = true;
-			this.$root.api('i/pages', {
-				limit: 11,
-				untilId: this.pages[this.pages.length - 1].id
-			}).then(pages => {
-				if (pages.length == 11) {
-					this.existMore = true;
-					pages.pop();
-				} else {
-					this.existMore = false;
-				}
-
-				this.pages = this.pages.concat(pages);
-				this.moreFetching = false;
-			});
-		},
-		fetchMoreLiked() {
-			this.moreLikesFetching = true;
-			this.$root.api('i/page-likes', {
-				limit: 11,
-				untilId: this.likes[this.likes.length - 1].id
-			}).then(pages => {
-				if (pages.length == 11) {
-					this.existMoreLikes = true;
-					pages.pop();
-				} else {
-					this.existMoreLikes = false;
-				}
-
-				this.likes = this.likes.concat(pages);
-				this.moreLikesFetching = false;
-			});
-		},
 		create() {
 			this.$router.push(`/i/pages/new`);
 		}
@@ -130,14 +64,14 @@ export default Vue.extend({
 .rknalgpo
 	padding 16px
 
-	> .new
-		margin-bottom 16px
+	&.my .ckltabjg:first-child
+		margin-top 16px
 
-	> * > .page:not(:last-child)
+	.ckltabjg:not(:last-child)
 		margin-bottom 8px
 
 	@media (min-width 500px)
-		> * > .page:not(:last-child)
+		.ckltabjg:not(:last-child)
 			margin-bottom 16px
 
 </style>