From 720ffaf0083564c85a07d66a6d303f34706add41 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Thu, 2 Jul 2020 02:50:55 +0300
Subject: feat: start refactoring the code to actually use vuex

This includes creating multiple stores as needed for components and removing all complex states from components (since all those states should be stored in vuex)
---
 src/site/pages/dashboard/index.vue | 124 +++++++++++++++++++++++--------------
 1 file changed, 77 insertions(+), 47 deletions(-)

(limited to 'src/site/pages/dashboard/index.vue')

diff --git a/src/site/pages/dashboard/index.vue b/src/site/pages/dashboard/index.vue
index 0eb9532..6c1b99b 100644
--- a/src/site/pages/dashboard/index.vue
+++ b/src/site/pages/dashboard/index.vue
@@ -6,27 +6,55 @@
 					<Sidebar />
 				</div>
 				<div class="column">
-					<h2 class="subtitle">Your uploaded files</h2>
+					<nav class="level">
+						<div class="level-left">
+							<div class="level-item">
+								<h2 class="subtitle">Your uploaded files</h2>
+							</div>
+						</div>
+						<div class="level-right">
+							<div class="level-item">
+								<b-field>
+									<b-input
+										placeholder="Search"
+										type="search"/>
+									<p class="control">
+										<button
+											outlined
+											class="button is-primary">
+											Search
+										</button>
+									</p>
+								</b-field>
+							</div>
+						</div>
+					</nav>					
 					<hr>
 
-					<Grid v-if="count"
-						:files="files"
-						:enableSearch="false"
-						class="grid" />
+					<b-loading :active="images.isLoading" />
 
-					<b-pagination
-						v-if="count > perPage"
-						:total="count"
-						:per-page="perPage"
-						:current.sync="current"
-						class="pagination"
-						icon-prev="icon-interface-arrow-left"
-						icon-next="icon-interface-arrow-right"
-						icon-pack="icon"
-						aria-next-label="Next page"
-						aria-previous-label="Previous page"
-						aria-page-label="Page"
-						aria-current-label="Current page" />
+					<Grid v-if="totalFiles"
+						:files="images.files"
+						:enableSearch="false"
+						class="grid">
+						<template v-slot:pagination>
+							<b-pagination
+								v-if="shouldPaginate"
+								:total="totalFiles"
+								:per-page="limit"
+								:current.sync="current"
+								range-before="2"
+								range-after="2"
+								class="pagination-slot"
+								icon-prev="icon-interface-arrow-left"
+								icon-next="icon-interface-arrow-right"
+								icon-pack="icon"
+								aria-next-label="Next page"
+								aria-previous-label="Previous page"
+								aria-page-label="Page"
+								aria-current-label="Current page" />
+						</template>
+					</Grid>
 				</div>
 			</div>
 		</div>
@@ -34,6 +62,8 @@
 </template>
 
 <script>
+import { mapState, mapGetters, mapActions } from 'vuex';
+
 import Sidebar from '~/components/sidebar/Sidebar.vue';
 import Grid from '~/components/grid/Grid.vue';
 
@@ -42,44 +72,34 @@ export default {
 		Sidebar,
 		Grid
 	},
-	middleware: 'auth',
+	middleware: ['auth', ({ store }) => {
+		store.dispatch('images/fetch');
+	}],
 	data() {
 		return {
-			files: [],
-			count: 0,
-			current: 1,
-			perPage: 30
+			current: 1
 		};
 	},
+	computed: {
+		...mapGetters({ 
+			totalFiles: 'images/getTotalFiles',
+			shouldPaginate: 'images/shouldPaginate',
+			limit: 'images/getLimit'
+		}),
+		...mapState(['images'])
+	},
 	metaInfo() {
 		return { title: 'Uploads' };
 	},
 	watch: {
-		current: 'getFiles'
-	},
-	async asyncData({ $axios, route }) {
-		const perPage = 30;
-		const current = 1; // current page
-
-		try {
-			const response = await $axios.$get(`files`, { params: { page: current, limit: perPage }});
-			return {
-				files: response.files || [],
-				count: response.count || 0,
-				current,
-				perPage
-			};
-		} catch (error) {
-			console.error(error);
-			return { files: [] };
-		}
+		current: 'fetchPaginate'
 	},
 	methods: {
-		async getFiles() {
-			// 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;
+		...mapActions({
+			fetch: 'images/fetch'
+		}),
+		fetchPaginate() {
+			this.fetch(this.current)
 		}
 	}
 };
@@ -89,4 +109,14 @@ export default {
 	div.grid {
 		margin-bottom: 1rem;
 	}
-</style>
\ No newline at end of file
+
+	.pagination-slot {
+		padding: 1rem 0;
+	}
+</style>
+
+<style lang="scss">
+	.pagination-slot > .pagination-previous, .pagination-slot > .pagination-next {
+		display: none !important;
+	}
+</style>
-- 
cgit v1.2.3


From c2dbbe6396540ee9d76991a00f5028b49d221d0c Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Thu, 2 Jul 2020 23:42:02 +0300
Subject: feat: refactor account to use vuex, fix small presentational
 components

---
 src/site/pages/dashboard/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/site/pages/dashboard/index.vue')

diff --git a/src/site/pages/dashboard/index.vue b/src/site/pages/dashboard/index.vue
index 6c1b99b..89f0fac 100644
--- a/src/site/pages/dashboard/index.vue
+++ b/src/site/pages/dashboard/index.vue
@@ -99,7 +99,7 @@ export default {
 			fetch: 'images/fetch'
 		}),
 		fetchPaginate() {
-			this.fetch(this.current)
+			this.fetch(this.current);
 		}
 	}
 };
-- 
cgit v1.2.3


From fb0bc57542a44dcc94149f393d8a4ff0c2e7902b Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Tue, 7 Jul 2020 02:02:59 +0300
Subject: feat: try fixing THE SHITTY WATERFALL

---
 src/site/pages/dashboard/index.vue | 42 +++++++++++++++++++++++---------------
 1 file changed, 26 insertions(+), 16 deletions(-)

(limited to 'src/site/pages/dashboard/index.vue')

diff --git a/src/site/pages/dashboard/index.vue b/src/site/pages/dashboard/index.vue
index 89f0fac..71df7eb 100644
--- a/src/site/pages/dashboard/index.vue
+++ b/src/site/pages/dashboard/index.vue
@@ -9,7 +9,9 @@
 					<nav class="level">
 						<div class="level-left">
 							<div class="level-item">
-								<h2 class="subtitle">Your uploaded files</h2>
+								<h2 class="subtitle">
+									Your uploaded files
+								</h2>
 							</div>
 						</div>
 						<div class="level-right">
@@ -17,7 +19,7 @@
 								<b-field>
 									<b-input
 										placeholder="Search"
-										type="search"/>
+										type="search" />
 									<p class="control">
 										<button
 											outlined
@@ -28,15 +30,17 @@
 								</b-field>
 							</div>
 						</div>
-					</nav>					
+					</nav>
 					<hr>
 
 					<b-loading :active="images.isLoading" />
 
-					<Grid v-if="totalFiles"
+					<Grid
+						v-if="totalFiles && !isLoading"
 						:files="images.files"
 						:enableSearch="false"
-						class="grid">
+						class="grid"
+						@delete="handleFileDelete">
 						<template v-slot:pagination>
 							<b-pagination
 								v-if="shouldPaginate"
@@ -70,38 +74,44 @@ import Grid from '~/components/grid/Grid.vue';
 export default {
 	components: {
 		Sidebar,
-		Grid
+		Grid,
 	},
 	middleware: ['auth', ({ store }) => {
 		store.dispatch('images/fetch');
 	}],
 	data() {
 		return {
-			current: 1
+			current: 1,
+			isLoading: false,
 		};
 	},
 	computed: {
-		...mapGetters({ 
+		...mapGetters({
 			totalFiles: 'images/getTotalFiles',
 			shouldPaginate: 'images/shouldPaginate',
-			limit: 'images/getLimit'
+			limit: 'images/getLimit',
 		}),
-		...mapState(['images'])
+		...mapState(['images']),
 	},
 	metaInfo() {
 		return { title: 'Uploads' };
 	},
 	watch: {
-		current: 'fetchPaginate'
+		current: 'fetchPaginate',
 	},
 	methods: {
 		...mapActions({
-			fetch: 'images/fetch'
+			fetch: 'images/fetch',
 		}),
-		fetchPaginate() {
-			this.fetch(this.current);
-		}
-	}
+		async fetchPaginate() {
+			this.isLoading = true;
+			await this.fetch(this.current);
+			this.isLoading = false;
+		},
+		handleFileDelete(file) {
+			console.log('yep!', file.id);
+		},
+	},
 };
 </script>
 
-- 
cgit v1.2.3


From b519b6ccb469e874c783b995ddf0ab6fabdb5a0e Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Wed, 8 Jul 2020 03:37:50 +0300
Subject: refactor: refactor grid to use vuex for every action

---
 src/site/pages/dashboard/index.vue | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

(limited to 'src/site/pages/dashboard/index.vue')

diff --git a/src/site/pages/dashboard/index.vue b/src/site/pages/dashboard/index.vue
index 71df7eb..2f06c7e 100644
--- a/src/site/pages/dashboard/index.vue
+++ b/src/site/pages/dashboard/index.vue
@@ -33,14 +33,13 @@
 					</nav>
 					<hr>
 
-					<b-loading :active="images.isLoading" />
+					<!-- <b-loading :active="images.isLoading" /> -->
 
 					<Grid
 						v-if="totalFiles && !isLoading"
 						:files="images.files"
 						:enableSearch="false"
-						class="grid"
-						@delete="handleFileDelete">
+						class="grid">
 						<template v-slot:pagination>
 							<b-pagination
 								v-if="shouldPaginate"
@@ -77,6 +76,7 @@ export default {
 		Grid,
 	},
 	middleware: ['auth', ({ store }) => {
+		store.commit('images/resetState');
 		store.dispatch('images/fetch');
 	}],
 	data() {
@@ -108,9 +108,6 @@ export default {
 			await this.fetch(this.current);
 			this.isLoading = false;
 		},
-		handleFileDelete(file) {
-			console.log('yep!', file.id);
-		},
 	},
 };
 </script>
-- 
cgit v1.2.3


From fd3f6de51a082dcd72c2ef557747e031ef7b9c4a Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Thu, 9 Jul 2020 02:24:40 +0300
Subject: refactor: refactor most of the admin pages to use the store instead
 of internal states

---
 src/site/pages/dashboard/index.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

(limited to 'src/site/pages/dashboard/index.vue')

diff --git a/src/site/pages/dashboard/index.vue b/src/site/pages/dashboard/index.vue
index 2f06c7e..08c5166 100644
--- a/src/site/pages/dashboard/index.vue
+++ b/src/site/pages/dashboard/index.vue
@@ -21,11 +21,9 @@
 										placeholder="Search"
 										type="search" />
 									<p class="control">
-										<button
-											outlined
-											class="button is-primary">
+										<b-button type="is-lolisafe">
 											Search
-										</button>
+										</b-button>
 									</p>
 								</b-field>
 							</div>
-- 
cgit v1.2.3