Merge pull request #254 from WeebDev/feature/ssr

Feature/ssr

12 files changed, 63 insertions, 79 deletions

diff --git a/src/site/pages/a/_identifier.vue b/src/site/pages/a/_identifier.vue
index d0da06d..0fc2103 100644
--- a/src/site/pages/a/_identifier.vue
+++ b/src/site/pages/a/_identifier.vue
@@ -102,8 +102,22 @@ export default {
 	watch: {
 		current: 'fetchPaginate'
 	},
-	created() {
-		this.fetch();
+	async asyncData({ app, params, error }) {
+		try {
+			const { data } = await axios.get(`${app.store.state.config.baseURL}/album/${params.identifier}`, { params: { limit: 50, page: 1 } });
+			const downloadLink = data.downloadEnabled ? `${app.store.state.config.baseURL}/album/${params.identifier}/zip` : null;
+			return {
+				name: data.name,
+				downloadEnabled: data.downloadEnabled,
+				files: data.files,
+				downloadLink,
+				isNsfw: data.isNsfw,
+				totalFiles: data.count
+			};
+		} catch (err) {
+			console.log('Error when retrieving album', err);
+			error({ statusCode: 404, message: 'Album not found' });
+		}
 	},
 	methods: {
 		async fetch(page = 1) {
@@ -130,36 +144,27 @@ export default {
 			this.isLoading = false;
 		}
 	},
-	metaInfo() {
+	head() {
 		if (this.files) {
+			const image = this.isNsfw ? '/public/images/share.jpg' : this.files.length ? this.files[0].thumbSquare : '/public/images/share.jpg';
+			const title = this.name ? this.isNsfw ? `[NSFW] ${this.name}` : this.name : '';
 			return {
-				title: `${this.name ? this.name : ''}`,
+				title,
 				meta: [
-					{ vmid: 'theme-color', name: 'theme-color', content: '#30a9ed' },
-					{ vmid: 'twitter:card', name: 'twitter:card', content: 'summary' },
-					{ vmid: 'twitter:title', name: 'twitter:title', content: `Album: ${this.name} | Files: ${this.files.length}` },
-					{ vmid: 'twitter:description', name: 'twitter:description', content: 'A modern and self-hosted file upload service that can handle anything you throw at it. Fast uploads, file manager and sharing capabilities all crafted with a beautiful user experience in mind.' },
-					{ vmid: 'twitter:image', name: 'twitter:image', content: `${this.files.length > 0 ? this.files[0].thumbSquare : '/public/images/share.jpg'}` },
-					{ vmid: 'twitter:image:src', name: 'twitter:image:src', value: `${this.files.length > 0 ? this.files[0].thumbSquare : '/public/images/share.jpg'}` },
-
+					{ vmid: 'twitter:title', name: 'twitter:title', content: `${title} | Files: ${this.totalFiles}` },
+					{ vmid: 'twitter:image', name: 'twitter:image', content: image },
+					{ vmid: 'twitter:image:src', name: 'twitter:image:src', value: image },
 					{ vmid: 'og:url', property: 'og:url', content: `${this.config.URL}/a/${this.$route.params.identifier}` },
-					{ vmid: 'og:title', property: 'og:title', content: `Album: ${this.name} | Files: ${this.files.length}` },
-					{ vmid: 'og:description', property: 'og:description', content: 'A modern and self-hosted file upload service that can handle anything you throw at it. Fast uploads, file manager and sharing capabilities all crafted with a beautiful user experience in mind.' },
-					{ vmid: 'og:image', property: 'og:image', content: `${this.files.length > 0 ? this.files[0].thumbSquare : '/public/images/share.jpg'}` },
-					{ vmid: 'og:image:secure_url', property: 'og:image:secure_url', content: `${this.files.length > 0 ? this.files[0].thumbSquare : '/public/images/share.jpg'}` }
+					{ vmid: 'og:title', property: 'og:title', content: `${title} | Files: ${this.totalFiles}` },
+					{ vmid: 'og:image', property: 'og:image', content: image },
+					{ vmid: 'og:image:secure_url', property: 'og:image:secure_url', content: image }
 				]
 			};
 		}
 		return {
 			title: `${this.name ? this.name : ''}`,
 			meta: [
-				{ vmid: 'theme-color', name: 'theme-color', content: '#30a9ed' },
-				{ vmid: 'twitter:card', name: 'twitter:card', content: 'summary' },
-				{ vmid: 'twitter:title', name: 'twitter:title', content: 'chibisafe' },
-				{ vmid: 'twitter:description', name: 'twitter:description', content: 'A modern and self-hosted file upload service that can handle anything you throw at it. Fast uploads, file manager and sharing capabilities all crafted with a beautiful user experience in mind.' },
-				{ vmid: 'og:url', property: 'og:url', content: `${this.config.URL}/a/${this.$route.params.identifier}` },
-				{ vmid: 'og:title', property: 'og:title', content: 'chibisafe' },
-				{ vmid: 'og:description', property: 'og:description', content: 'A modern and self-hosted file upload service that can handle anything you throw at it. Fast uploads, file manager and sharing capabilities all crafted with a beautiful user experience in mind.' }
+				{ vmid: 'og:url', property: 'og:url', content: `${this.config.URL}/a/${this.$route.params.identifier}` }
 			]
 		};
 	}
diff --git a/src/site/pages/dashboard/account.vue b/src/site/pages/dashboard/account.vue
index 05b969b..5d5d775 100644
--- a/src/site/pages/dashboard/account.vue
+++ b/src/site/pages/dashboard/account.vue
@@ -104,9 +104,7 @@ export default {
 	components: {
 		Sidebar
 	},
-	middleware: ['auth', ({ store }) => {
-		store.dispatch('auth/fetchCurrentUser');
-	}],
+	middleware: ['auth'],
 	data() {
 		return {
 			password: '',
@@ -120,6 +118,9 @@ export default {
 			user: state => state.auth.user
 		})
 	},
+	async asyncData({ app }) {
+		await app.store.dispatch('auth/fetchCurrentUser');
+	},
 	methods: {
 		...mapActions({
 			getUserSetttings: 'auth/fetchCurrentUser'
diff --git a/src/site/pages/dashboard/admin/file/_id.vue b/src/site/pages/dashboard/admin/file/_id.vue
index 135d066..2d7607f 100644
--- a/src/site/pages/dashboard/admin/file/_id.vue
+++ b/src/site/pages/dashboard/admin/file/_id.vue
@@ -129,15 +129,11 @@ export default {
 	components: {
 		Sidebar
 	},
-	middleware: ['auth', 'admin', ({ route, store }) => {
-		try {
-			store.dispatch('admin/fetchFile', route.params.id);
-		} catch (e) {
-			// eslint-disable-next-line no-console
-			console.error(e);
-		}
-	}],
+	middleware: ['auth', 'admin'],
 	computed: mapState(['admin', 'auth']),
+	async asyncData({ app, params }) {
+		await app.store.dispatch('admin/fetchFile', params.id);
+	},
 	methods: {
 		promptDisableUser() {
 			this.$buefy.dialog.confirm({
diff --git a/src/site/pages/dashboard/admin/settings.vue b/src/site/pages/dashboard/admin/settings.vue
index 0a43dcd..038c495 100644
--- a/src/site/pages/dashboard/admin/settings.vue
+++ b/src/site/pages/dashboard/admin/settings.vue
@@ -133,17 +133,13 @@ export default {
 	components: {
 		Sidebar
 	},
-	middleware: ['auth', 'admin', ({ store }) => {
-		try {
-			store.dispatch('admin/fetchSettings');
-		} catch (e) {
-			// eslint-disable-next-line no-console
-			console.error(e);
-		}
-	}],
+	middleware: ['auth', 'admin'],
 	computed: mapState({
 		settings: state => state.admin.settings
 	}),
+	async asyncData({ app }) {
+		await app.store.dispatch('admin/fetchSettings');
+	},
 	methods: {
 		promptRestartService() {
 			this.$buefy.dialog.confirm({
diff --git a/src/site/pages/dashboard/admin/statistics.vue b/src/site/pages/dashboard/admin/statistics.vue
index c1e79fc..1b951fc 100644
--- a/src/site/pages/dashboard/admin/statistics.vue
+++ b/src/site/pages/dashboard/admin/statistics.vue
@@ -78,16 +78,13 @@ export default {
 		detailed,
 		generic
 	},
-	middleware: ['auth', 'admin', ({ store }) => {
-		try {
-			store.dispatch('admin/fetchStatistics');
-		} catch (e) {
-			console.error(e);
-		}
-	}],
+	middleware: ['auth', 'admin'],
 	computed: mapState({
 		stats: state => state.admin.statistics
 	}),
+	async asyncData({ app }) {
+		await app.store.dispatch('admin/fetchStatistics');
+	},
 	methods: {
 		refresh(category) {
 			try {
diff --git a/src/site/pages/dashboard/admin/user/_id.vue b/src/site/pages/dashboard/admin/user/_id.vue
index 6079bab..7e0b182 100644
--- a/src/site/pages/dashboard/admin/user/_id.vue
+++ b/src/site/pages/dashboard/admin/user/_id.vue
@@ -95,14 +95,7 @@ export default {
 		Sidebar,
 		Grid
 	},
-	middleware: ['auth', 'admin', ({ route, store }) => {
-		try {
-			store.dispatch('admin/fetchUser', { id: route.params.id });
-		} catch (e) {
-			// eslint-disable-next-line no-console
-			console.error(e);
-		}
-	}],
+	middleware: ['auth', 'admin'],
 	data() {
 		return {
 			options: {},
@@ -121,6 +114,9 @@ export default {
 	watch: {
 		current: 'fetchPaginate'
 	},
+	async asyncData({ app, params }) {
+		await app.store.dispatch('admin/fetchUser', { id: params.id });
+	},
 	methods: {
 		...mapActions({
 			fetch: 'admin/fetchUser'
diff --git a/src/site/pages/dashboard/admin/users.vue b/src/site/pages/dashboard/admin/users.vue
index 5195e5d..556049d 100644
--- a/src/site/pages/dashboard/admin/users.vue
+++ b/src/site/pages/dashboard/admin/users.vue
@@ -143,14 +143,7 @@ export default {
 	components: {
 		Sidebar
 	},
-	middleware: ['auth', 'admin', ({ route, store }) => {
-		try {
-			store.dispatch('admin/fetchUsers', route.params.id);
-		} catch (e) {
-			// eslint-disable-next-line no-console
-			console.error(e);
-		}
-	}],
+	middleware: ['auth', 'admin'],
 	data() {
 		return {
 			isCreateUserOpen: false,
@@ -163,6 +156,9 @@ export default {
 		users: state => state.admin.users,
 		config: state => state.config
 	}),
+	async asyncData({ app, params }) {
+		await app.store.dispatch('admin/fetchUsers', params.id);
+	},
 	methods: {
 		async changeEnabledStatus(row) {
 			if (row.enabled) {
diff --git a/src/site/pages/dashboard/albums/_id.vue b/src/site/pages/dashboard/albums/_id.vue
index faaf27c..446d3ac 100644
--- a/src/site/pages/dashboard/albums/_id.vue
+++ b/src/site/pages/dashboard/albums/_id.vue
@@ -76,7 +76,6 @@ export default {
 	},
 	middleware: ['auth', ({ route, store }) => {
 		store.commit('images/resetState');
-		store.dispatch('images/fetchByAlbumId', { id: route.params.id });
 	}],
 	data() {
 		return {
@@ -101,6 +100,9 @@ export default {
 	watch: {
 		current: 'fetchPaginate'
 	},
+	async asyncData({ app, params }) {
+		await app.store.dispatch('images/fetchByAlbumId', { id: params.id });
+	},
 	methods: {
 		...mapActions({
 			fetch: 'images/fetchByAlbumId'
diff --git a/src/site/pages/dashboard/albums/index.vue b/src/site/pages/dashboard/albums/index.vue
index 2ebfb3f..686edc3 100644
--- a/src/site/pages/dashboard/albums/index.vue
+++ b/src/site/pages/dashboard/albums/index.vue
@@ -55,13 +55,7 @@ export default {
 		Sidebar,
 		AlbumEntry
 	},
-	middleware: ['auth', ({ store }) => {
-		try {
-			store.dispatch('albums/fetch');
-		} catch (e) {
-			this.alert({ text: e.message, error: true });
-		}
-	}],
+	middleware: ['auth'],
 	data() {
 		return {
 			newAlbumName: null,
@@ -69,6 +63,9 @@ export default {
 		};
 	},
 	computed: mapState(['config', 'albums']),
+	async asyncData({ app }) {
+		await app.store.dispatch('albums/fetch');
+	},
 	methods: {
 		...mapActions({
 			alert: 'alert/set'
diff --git a/src/site/pages/dashboard/index.vue b/src/site/pages/dashboard/index.vue
index 4877e15..bd7b745 100644
--- a/src/site/pages/dashboard/index.vue
+++ b/src/site/pages/dashboard/index.vue
@@ -68,7 +68,6 @@ export default {
 	},
 	middleware: ['auth', ({ store }) => {
 		store.commit('images/resetState');
-		store.dispatch('images/fetch');
 	}],
 	data() {
 		return {
@@ -88,7 +87,10 @@ export default {
 	watch: {
 		current: 'fetchPaginate'
 	},
-	created() {
+	async asyncData({ app }) {
+		await app.store.dispatch('images/fetch');
+	},
+	mounted() {
 		this.filteredHints = this.hints; // fixes the issue where on pageload, suggestions wont load
 	},
 	methods: {
diff --git a/src/site/plugins/nuxt-client-init.js b/src/site/plugins/nuxt-client-init.js
deleted file mode 100644
index 4b10dcd..0000000
--- a/src/site/plugins/nuxt-client-init.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export default async ctx => {
-	await ctx.store.dispatch('nuxtClientInit', ctx);
-};
diff --git a/src/site/store/index.js b/src/site/store/index.js
index 94d673f..b94a336 100644
--- a/src/site/store/index.js
+++ b/src/site/store/index.js
@@ -1,9 +1,8 @@
 import config from '../../../dist/config.json';
 
 export const actions = {
-	async nuxtClientInit({ commit, dispatch }) {
+	async nuxtServerInit({ commit, dispatch }) {
 		commit('config/set', config);
-
 		const cookies = this.$cookies.getAll();
 		if (!cookies.token) return dispatch('auth/logout');