From 520062508ccad88d49229e603fc4d2c0c0a118d3 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Mon, 29 Jun 2020 22:18:42 +0300
Subject: [PATCH] feat: backend pagination

serverLoad++;
userRamUsage--;
---
 src/api/routes/files/filesGET.js   | 22 ++++++++++++++++++----
 src/api/utils/Util.js              |  2 +-
 src/site/components/grid/Grid.vue  |  4 ++--
 src/site/pages/dashboard/index.vue | 22 ++++++++++++----------
 src/site/pages/index.vue           |  2 +-
 5 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/src/api/routes/files/filesGET.js b/src/api/routes/files/filesGET.js
index f1a3a26..07dc1f7 100644
--- a/src/api/routes/files/filesGET.js
+++ b/src/api/routes/files/filesGET.js
@@ -7,10 +7,23 @@ class filesGET extends Route {
 	}
 
 	async run(req, res, db, user) {
-		// Get all the files from the user
-		const files = await db.table('files')
+		let count = 0;
+
+		let files = db.table('files')
 			.where('userId', user.id)
-			.orderBy('id', 'desc');
+			.orderBy('createdAt', 'desc');
+
+		const { page, limit = 100 } = req.query;
+		if (page && page >= 0) {
+			files = await files.offset((page - 1) * limit).limit(limit);
+
+			count = (await db.table('files')
+				.count('id as count')
+				.where('userId', user.id)
+				.first()).count;
+		} else {
+			count = files.length;
+		}
 
 		// For each file, create the public link to be able to display the file
 		for (let file of files) {
@@ -19,7 +32,8 @@ class filesGET extends Route {
 
 		return res.json({
 			message: 'Successfully retrieved files',
-			files
+			files,
+			count
 		});
 	}
 }
diff --git a/src/api/utils/Util.js b/src/api/utils/Util.js
index b8d960d..c37297a 100644
--- a/src/api/utils/Util.js
+++ b/src/api/utils/Util.js
@@ -122,7 +122,7 @@ class Util {
 			/*
 				It's funny but if you do i++ the asignment never gets done resulting in an infinite loop
 			*/
-			if (i < 5) return retry(i + 1);
+			if (i < 5) return retry(++i);
 			log.error('Couldnt allocate identifier for album');
 			return null;
 		};
diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 4c4bdf4..15ff5fd 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -17,7 +17,8 @@
 		</div>
 
 		<template v-if="!showList">
-			<Waterfall :gutterWidth="10"
+			<Waterfall v-if="showWaterfall"
+				:gutterWidth="10"
 				:gutterHeight="4">
 				<!--
 					TODO: Implement search based on originalName, albumName and tags
@@ -32,7 +33,6 @@
 				<!-- TODO: Implement pagination -->
 
 				<WaterfallItem v-for="(item, index) in gridFiles"
-					v-if="showWaterfall"
 					:key="index"
 					:width="width"
 					move-class="item-move">
diff --git a/src/site/pages/dashboard/index.vue b/src/site/pages/dashboard/index.vue
index 8a4031b..64f8266 100644
--- a/src/site/pages/dashboard/index.vue
+++ b/src/site/pages/dashboard/index.vue
@@ -8,15 +8,16 @@
 				<div class="column">
 					<h2 class="subtitle">Your uploaded files</h2>
 					<hr>
+
 					<!-- TODO: Add a list view so the user can see the files that don't have thumbnails, like text documents -->
-					<Grid v-if="files.length"
-						:files="paginatedFiles"
+					<Grid v-if="count"
+						:files="files"
 						:enableSearch="false"
 						class="grid" />
 
 					<b-pagination
-						v-if="files.length > perPage"
-						:total="files.length"
+						v-if="count > perPage"
+						:total="count"
 						:per-page="perPage"
 						:current.sync="current"
 						class="pagination"
@@ -46,25 +47,26 @@ export default {
 	data() {
 		return {
 			files: [],
+			count: 0,
 			current: 1,
 			perPage: 20
 		};
 	},
-	computed: {
-		paginatedFiles() {
-			return this.files.slice((this.current - 1) * this.perPage, this.current * this.perPage);
-		}
-	},
 	metaInfo() {
 		return { title: 'Uploads' };
 	},
+	watch: {
+		current: 'getFiles'
+	},
 	mounted() {
 		this.getFiles();
 	},
 	methods: {
 		async getFiles() {
-			const response = await this.$axios.$get(`files`);
+			// TODO: Cache a few pages once fetched
+			const response = await this.$axios.$get(`files`, { params: { page: this.current, limit: this.perPage }});
 			this.files = response.files;
+			this.count = response.count;
 		}
 	}
 };
diff --git a/src/site/pages/index.vue b/src/site/pages/index.vue
index da55500..707ae67 100644
--- a/src/site/pages/index.vue
+++ b/src/site/pages/index.vue
@@ -1,5 +1,5 @@
 <template>
-	<div>
+	<div class="section">
 		<div class="container">
 			<div class="columns">
 				<div class="column is-3 is-offset-2">