refactor: sidebars now using VueX

Signed-off-by: Jonathan <theflametrooper@gmail.com>

frontend/components/Station/Station.vue

@@ -62,7 +62,9 @@
 					<a
 						href="#"
 						class="no-song"
-						@click="sidebars.playlist = true"
+						@click="
+							openModal({ sector: 'station', sector: 'playlist' })
+						"
 						>Play a private playlist</a
 					>
 				</h4>
@@ -446,11 +448,6 @@ export default {
 			timeElapsed: "0:00",
 			liked: false,
 			disliked: false,
-			sidebars: {
-				songslist: false,
-				users: false,
-				playlist: false
-			},
 			timeBeforePause: 0,
 			skipVotes: 0,
 			privatePlaylistQueueSelected: null,
@@ -468,6 +465,9 @@ export default {
 		...mapState("modals", {
 			modals: state => state.modals.station
 		}),
+		...mapState("sidebars", {
+			sidebars: state => state.sidebars.station
+		}),
 		...mapState("station", {
 			station: state => state.station,
 			currentSong: state => state.currentSong,
@@ -507,12 +507,6 @@ export default {
 				}
 			);
 		},
-		toggleSidebar(type) {
-			Object.keys(this.sidebars).forEach(sidebar => {
-				if (sidebar !== type) this.sidebars[sidebar] = false;
-				else this.sidebars[type] = !this.sidebars[type];
-			});
-		},
 		youtubeReady() {
 			if (!this.player) {
 				this.player = new window.YT.Player("player", {

frontend/components/Station/StationHeader.vue

@@ -174,7 +174,12 @@
 					"
 					class="sidebar-item"
 					href="#"
-					@click="$parent.toggleSidebar('songslist')"
+					@click="
+						toggleSidebar({
+							sector: 'station',
+							sidebar: 'songslist'
+						})
+					"
 				>
 					<span class="icon">
 						<i class="material-icons">queue_music</i>
@@ -184,7 +189,9 @@
 				<a
 					class="sidebar-item"
 					href="#"
-					@click="$parent.toggleSidebar('users')"
+					@click="
+						toggleSidebar({ sector: 'station', sidebar: 'users' })
+					"
 				>
 					<span class="icon">
 						<i class="material-icons">people</i>
@@ -197,7 +204,12 @@
 					v-if="loggedIn && station.type === 'community'"
 					class="sidebar-item"
 					href="#"
-					@click="$parent.toggleSidebar('playlist')"
+					@click="
+						toggleSidebar({
+							sector: 'station',
+							sidebar: 'playlist'
+						})
+					"
 				>
 					<span class="icon">
 						<i class="material-icons">library_music</i>
@@ -268,6 +280,7 @@ export default {
 			});
 		},
 		...mapActions("modals", ["openModal"]),
+		...mapActions("sidebars", ["toggleSidebar"]),
 		...mapActions("station", ["editStation"]),
 		...mapActions("user/auth", ["logout"])
 	}

frontend/components/User/Show.vue

@@ -154,6 +154,7 @@ export default {
 .avatar {
 	border-radius: 50%;
 	width: 250px;
+	height: 250px;
 	display: block;
 	margin: auto;
 	background: #fff;

frontend/store/index.js

@@ -3,6 +3,7 @@ import Vuex from "vuex";
 
 import user from "./modules/user";
 import modals from "./modules/modals";
+import sidebars from "./modules/sidebars";
 import station from "./modules/station";
 import admin from "./modules/admin";
 
@@ -12,6 +13,7 @@ export default new Vuex.Store({
 	modules: {
 		user,
 		modals,
+		sidebars,
 		station,
 		admin
 	},

frontend/store/modules/sidebars.js

@@ -0,0 +1,65 @@
+/* eslint no-param-reassign: 0 */
+
+const state = {
+	sidebars: {
+		station: {
+			songslist: false,
+			users: false,
+			playlist: false
+		}
+	},
+	currentlyActive: {}
+};
+
+const getters = {};
+
+const actions = {
+	toggleSidebar: ({ commit }, data) => {
+		commit("toggleSidebar", data);
+	},
+	openSidebar: ({ commit }, data) => {
+		commit("openSidebar", data);
+	},
+	closeCurrentSidebar: ({ commit }) => {
+		commit("closeCurrentSidebar");
+	}
+};
+
+const mutations = {
+	toggleSidebar(state, data) {
+		const { sector, sidebar } = data;
+
+		if (
+			state.currentlyActive.sidebar &&
+			state.currentlyActive.sidebar !== sidebar
+		) {
+			state.sidebars[state.currentlyActive.sector][
+				state.currentlyActive.sidebar
+			] = false;
+			state.currentlyActive = {};
+		}
+
+		state.sidebars[sector][sidebar] = !state.sidebars[sector][sidebar];
+
+		if (state.sidebars[sector][sidebar])
+			state.currentlyActive = { sector, sidebar };
+	},
+	openSidebar(state, data) {
+		const { sector, sidebar } = data;
+		state.sidebars[sector][sidebar] = true;
+		state.currentlyActive = { sector, sidebar };
+	},
+	closeCurrentSidebar(state) {
+		const { sector, sidebar } = state.currentlyActive;
+		state.sidebars[sector][sidebar] = false;
+		state.currentlyActive = {};
+	}
+};
+
+export default {
+	namespaced: true,
+	state,
+	getters,
+	actions,
+	mutations
+};