Merge pull request #1 from Zephyrrus/feature/store_refactor

Feature/store refactor

2 files changed, 61 insertions, 46 deletions

diff --git a/src/site/layouts/default.vue b/src/site/layouts/default.vue
index 61a257e..0049b88 100644
--- a/src/site/layouts/default.vue
+++ b/src/site/layouts/default.vue
@@ -1,69 +1,84 @@
 <template>
-	<div v-bar
+	<div
+		v-bar
 		class="scroll-area">
 		<div class="default-body">
 			<Navbar :isWhite="true" />
-			<nuxt-child id="app"
+			<nuxt-child
+				id="app"
 				class="nuxt-app is-height-max-content" />
 			<Footer />
 		</div>
 	</div>
 </template>
 <script>
+import { mapState } from 'vuex';
 import Navbar from '~/components/navbar/Navbar.vue';
-import Footer from '~/components/footer/Footer';
+import Footer from '~/components/footer/Footer.vue';
+
 export default {
 	components: {
-		Navbar, 
-		Footer
-	},
-	computed: {
-		config() {
-			return this.$store.state.config;
-		},
-		alert() {
-			return this.$store.state.alert;
-		}
+		Navbar,
+		Footer,
 	},
-	watch: {
-		alert() {
-			if (!this.alert) return;
+	computed: mapState(['config', 'alert']),
+	created() {
+		this.$store.watch((state) => state.alert.message, () => {
+			const { message, type, snackbar } = this.alert;
+
+			if (!message) return;
 
-			this.$buefy.toast.open({
-				duration: 3500,
-				message: this.alert.text,
-				position: 'is-bottom',
-				type: this.alert.error ? 'is-danger' : 'is-success'
-			});
+			if (snackbar) {
+				this.$buefy.snackbar.open({
+					duration: 3500,
+					position: 'is-bottom',
+					message,
+					type,
+				});
+			} else {
+				this.$buefy.toast.open({
+					duration: 3500,
+					position: 'is-bottom',
+					message,
+					type,
+				});
+			}
 
-			setTimeout(() => {
-				this.$store.dispatch('alert', null);
-			}, 3500);
-		}
+			this.$store.dispatch('alert/clear', null);
+		});
 	},
 	mounted() {
-		console.log(`%c lolisafe %c v${this.config.version} %c`, 'background:#35495e ; padding: 1px; border-radius: 3px 0 0 3px;  color: #fff', 'background:#ff015b; padding: 1px; border-radius: 0 3px 3px 0;  color: #fff', 'background:transparent');
-	}
+		// eslint-disable-next-line no-console
+		console.log(
+			`%c lolisafe %c v${this.config.version} %c`,
+			'background:#35495e ; padding: 1px; border-radius: 3px 0 0 3px;  color: #fff',
+			'background:#ff015b; padding: 1px; border-radius: 0 3px 3px 0;  color: #fff',
+			'background:transparent',
+		);
+	},
 };
 </script>
+
 <style lang="scss">
-	html { overflow: hidden !important; }
-	.is-fullheight { 
-		min-height: 100vh !important; 
-		height: max-content;
-	}
-	.nuxt-app > .section {
-		min-height: auto !important;
-		height: auto !important;
-	}
-	@import "~/assets/styles/style.scss";
-	@import "~/assets/styles/icons.min.css";
+html {
+	overflow: hidden !important;
+}
+.is-fullheight {
+	min-height: 100vh !important;
+	height: max-content;
+}
+.nuxt-app > .section {
+	min-height: auto !important;
+	height: auto !important;
+}
+@import '~/assets/styles/style.scss';
+@import '~/assets/styles/icons.min.css';
 </style>
 <style lang="scss" scoped>
-	.default-body {
-		align-items: baseline !important;
-	}
-	.scroll-area {
-		height: 100vh;
-	}
+.default-body {
+	align-items: baseline !important;
+}
+.scroll-area {
+	height: 100vh;
+}
 </style>
diff --git a/src/site/layouts/error.vue b/src/site/layouts/error.vue
index 77d188f..3f12c46 100644
--- a/src/site/layouts/error.vue
+++ b/src/site/layouts/error.vue
@@ -23,6 +23,6 @@
 import Navbar from '~/components/navbar/Navbar.vue';
 
 export default {
-	components: { Navbar }
+	components: { Navbar },
 };
 </script>