feat(SaveButton): moved to a component, allowed for multiple types of buttons on same page

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

frontend/src/components/modals/EditSong.vue

@@ -471,16 +471,12 @@
 				</div>
 			</div>
 			<div slot="footer">
-				<transition name="save-button-transition" mode="out-in">
-					<button
-						class="button save-button-mixin"
-						:class="saveButtonStyle"
-						@click="save(song, false)"
-						:key="saveStatus"
-						:disabled="saveStatus === 'disabled'"
-						v-html="saveButtonMessage"
-					/>
-				</transition>
+				<save-button ref="saveButton" @clicked="save(song, false)" />
+				<save-button
+					ref="saveAndCloseButton"
+					type="save-and-close"
+					@clicked="save(song, true)"
+				/>
 
 				<button
 					class="button is-danger"
@@ -518,11 +514,10 @@ import keyboardShortcuts from "../../keyboardShortcuts";
 import validation from "../../validation";
 import Modal from "../Modal.vue";
 import FloatingBox from "../ui/FloatingBox.vue";
-import SaveButton from "../../mixins/SaveButton.vue";
+import SaveButton from "../ui/SaveButton.vue";
 
 export default {
-	components: { Modal, FloatingBox },
-	mixins: [SaveButton],
+	components: { Modal, FloatingBox, SaveButton },
 	props: {
 		songId: { type: String, default: null },
 		songType: { type: String, default: null },
@@ -971,8 +966,11 @@ export default {
 		save(songToCopy, close) {
 			const song = JSON.parse(JSON.stringify(songToCopy));
 
+			let saveButtonRef = this.$refs.saveButton;
+			if (close) saveButtonRef = this.$refs.saveAndCloseButton;
+
 			if (!song.title) {
-				this.handleFailedSave();
+				saveButtonRef.handleFailedSave();
 				return new Toast({
 					content: "Please fill in all fields",
 					timeout: 8000
@@ -980,7 +978,7 @@ export default {
 			}
 
 			if (!song.thumbnail) {
-				this.handleFailedSave();
+				saveButtonRef.handleFailedSave();
 				return new Toast({
 					content: "Please fill in all fields",
 					timeout: 8000
@@ -992,7 +990,7 @@ export default {
 				Number(song.skipDuration) + Number(song.duration) >
 				this.youtubeVideoDuration
 			) {
-				this.handleFailedSave();
+				saveButtonRef.handleFailedSave();
 				return new Toast({
 					content:
 						"Duration can't be higher than the length of the video",
@@ -1002,7 +1000,7 @@ export default {
 
 			// Title
 			if (!validation.isLength(song.title, 1, 100)) {
-				this.handleFailedSave();
+				saveButtonRef.handleFailedSave();
 				return new Toast({
 					content: "Title must have between 1 and 100 characters.",
 					timeout: 8000
@@ -1011,7 +1009,7 @@ export default {
 
 			// Artists
 			if (song.artists.length < 1 || song.artists.length > 10) {
-				this.handleFailedSave();
+				saveButtonRef.handleFailedSave();
 				return new Toast({
 					content:
 						"Invalid artists. You must have at least 1 artist and a maximum of 10 artists.",
@@ -1035,7 +1033,7 @@ export default {
 			});
 
 			if (error) {
-				this.handleFailedSave();
+				saveButtonRef.handleFailedSave();
 				return new Toast({ content: error, timeout: 8000 });
 			}
 
@@ -1059,13 +1057,13 @@ export default {
 				error = "You must have between 1 and 16 genres.";
 
 			if (error) {
-				this.handleFailedSave();
+				saveButtonRef.handleFailedSave();
 				return new Toast({ content: error, timeout: 8000 });
 			}
 
 			// Thumbnail
 			if (!validation.isLength(song.thumbnail, 1, 256)) {
-				this.handleFailedSave();
+				saveButtonRef.handleFailedSave();
 				return new Toast({
 					content:
 						"Thumbnail must have between 8 and 256 characters.",
@@ -1073,7 +1071,7 @@ export default {
 				});
 			}
 			if (this.useHTTPS && song.thumbnail.indexOf("https://") !== 0) {
-				this.handleFailedSave();
+				saveButtonRef.handleFailedSave();
 				return new Toast({
 					content: 'Thumbnail must start with "https://".',
 					timeout: 8000
@@ -1085,14 +1083,14 @@ export default {
 				song.thumbnail.indexOf("http://") !== 0 &&
 				song.thumbnail.indexOf("https://") !== 0
 			) {
-				this.handleFailedSave();
+				saveButtonRef.handleFailedSave();
 				return new Toast({
 					content: 'Thumbnail must start with "http://".',
 					timeout: 8000
 				});
 			}
 
-			this.saveStatus = "disabled";
+			saveButtonRef.status = "disabled";
 
 			return this.socket.emit(
 				`${this.songType}.update`,
@@ -1101,8 +1099,9 @@ export default {
 				res => {
 					new Toast({ content: res.message, timeout: 4000 });
 
-					if (res.status === "success") this.handleSuccessfulSave();
-					else this.handleFailedSave();
+					if (res.status === "success")
+						saveButtonRef.handleSuccessfulSave();
+					else saveButtonRef.handleFailedSave();
 
 					if (close)
 						this.closeModal({
@@ -1447,6 +1446,14 @@ export default {
 
 		.modal-card-foot {
 			justify-content: flex-end;
+
+			div {
+				display: flex;
+
+				div {
+					margin-right: 5px;
+				}
+			}
 		}
 	}
 }

frontend/src/components/modals/EditStation.vue

@@ -407,16 +407,7 @@
 			</div>
 		</template>
 		<template #footer>
-			<transition name="save-button-transition" mode="out-in">
-				<button
-					class="button save-button-mixin"
-					:class="saveButtonStyle"
-					@click="saveChanges()"
-					:key="saveStatus"
-					:disabled="saveStatus === 'disabled'"
-					v-html="saveButtonMessage"
-				/>
-			</transition>
+			<save-button ref="saveButton" @clicked="saveChanges()" />
 
 			<button
 				v-if="station.type === 'community'"
@@ -437,11 +428,10 @@ import Toast from "toasters";
 import Modal from "../Modal.vue";
 import io from "../../io";
 import validation from "../../validation";
-import SaveButton from "../../mixins/SaveButton.vue";
+import SaveButton from "../ui/SaveButton.vue";
 
 export default {
-	components: { Modal },
-	mixins: [SaveButton],
+	components: { Modal, SaveButton },
 	props: {
 		stationId: { type: String, default: "" },
 		sector: { type: String, default: "admin" }
@@ -600,7 +590,7 @@ export default {
 				!blacklistedGenresChanged &&
 				!themeChanged
 			) {
-				this.handleFailedSave();
+				this.$refs.saveButton.handleFailedSave();
 
 				new Toast({
 					content: "Please make a change before saving.",
@@ -622,7 +612,7 @@ export default {
 					timeout: 8000
 				});
 
-			this.saveStatus = "disabled";
+			this.$refs.saveButton.status = "disabled";
 
 			return this.socket.emit(
 				"stations.updateName",
@@ -633,21 +623,23 @@ export default {
 
 					if (res.status === "success") {
 						this.originalStation.name = name;
-						return this.handleSuccessfulSave();
+						return this.$refs.saveButton.handleSuccessfulSave();
 					}
 
-					return this.handleFailedSave();
+					return this.$refs.saveButton.handleFailedSave();
 				}
 			);
 		},
 		updateDisplayName() {
 			const { displayName } = this.station;
+
 			if (!validation.isLength(displayName, 2, 32))
 				return new Toast({
 					content:
 						"Display name must have between 2 and 32 characters.",
 					timeout: 8000
 				});
+
 			if (!validation.regex.ascii.test(displayName))
 				return new Toast({
 					content:
@@ -655,7 +647,7 @@ export default {
 					timeout: 8000
 				});
 
-			this.saveStatus = "disabled";
+			this.$refs.saveButton.status = "disabled";
 
 			return this.socket.emit(
 				"stations.updateDisplayName",
@@ -666,10 +658,10 @@ export default {
 
 					if (res.status === "success") {
 						this.originalStation.displayName = displayName;
-						return this.handleSuccessfulSave();
+						return this.$refs.saveButton.handleSuccessfulSave();
 					}
 
-					return this.handleFailedSave();
+					return this.$refs.saveButton.handleFailedSave();
 				}
 			);
 		},
@@ -692,7 +684,7 @@ export default {
 					timeout: 8000
 				});
 
-			this.saveStatus = "disabled";
+			this.$refs.saveButton.status = "disabled";
 
 			return this.socket.emit(
 				"stations.updateDescription",
@@ -703,10 +695,10 @@ export default {
 
 					if (res.status === "success") {
 						this.originalStation.description = description;
-						return this.handleSuccessfulSave();
+						return this.$refs.saveButton.handleSuccessfulSave();
 					}
 
-					return this.handleFailedSave();
+					return this.$refs.saveButton.handleFailedSave();
 				}
 			);
 		},
@@ -716,7 +708,7 @@ export default {
 			this.privacyDropdownActive = false;
 		},
 		updatePrivacy() {
-			this.saveStatus = "disabled";
+			this.$refs.saveButton.status = "disabled";
 
 			this.socket.emit(
 				"stations.updatePrivacy",
@@ -727,15 +719,15 @@ export default {
 
 					if (res.status === "success") {
 						this.originalStation.privacy = this.station.privacy;
-						return this.handleSuccessfulSave();
+						return this.$refs.saveButton.handleSuccessfulSave();
 					}
 
-					return this.handleFailedSave();
+					return this.$refs.saveButton.handleFailedSave();
 				}
 			);
 		},
 		updateGenres() {
-			this.saveStatus = "disabled";
+			this.$refs.saveButton.status = "disabled";
 
 			this.socket.emit(
 				"stations.updateGenres",
@@ -752,15 +744,15 @@ export default {
 						if (this.originalStation)
 							this.originalStation.genres = genres;
 
-						return this.handleSuccessfulSave();
+						return this.$refs.saveButton.handleSuccessfulSave();
 					}
 
-					return this.handleFailedSave();
+					return this.$refs.saveButton.handleFailedSave();
 				}
 			);
 		},
 		updateBlacklistedGenres() {
-			this.saveStatus = "disabled";
+			this.$refs.saveButton.status = "disabled";
 
 			this.socket.emit(
 				"stations.updateBlacklistedGenres",
@@ -776,10 +768,10 @@ export default {
 
 						this.originalStation.blacklistedGenres = blacklistedGenres;
 
-						return this.handleSuccessfulSave();
+						return this.$refs.saveButton.handleSuccessfulSave();
 					}
 
-					return this.handleFailedSave();
+					return this.$refs.saveButton.handleFailedSave();
 				}
 			);
 		},
@@ -789,7 +781,7 @@ export default {
 			this.modeDropdownActive = false;
 		},
 		updatePartyMode() {
-			this.saveStatus = "disabled";
+			this.$refs.saveButton.status = "disabled";
 
 			this.socket.emit(
 				"stations.updatePartyMode",
@@ -800,10 +792,10 @@ export default {
 
 					if (res.status === "success") {
 						this.originalStation.partyMode = this.station.partyMode;
-						return this.handleSuccessfulSave();
+						return this.$refs.saveButton.handleSuccessfulSave();
 					}
 
-					return this.handleFailedSave();
+					return this.$refs.saveButton.handleFailedSave();
 				}
 			);
 		},
@@ -813,7 +805,7 @@ export default {
 			this.queueLockDropdownActive = false;
 		},
 		updateQueueLock() {
-			this.saveStatus = "disabled";
+			this.$refs.saveButton.status = "disabled";
 
 			this.socket.emit("stations.toggleLock", this.station._id, res => {
 				if (res.status === "success") {
@@ -825,7 +817,7 @@ export default {
 						timeout: 4000
 					});
 
-					return this.handleSuccessfulSave();
+					return this.$refs.saveButton.handleSuccessfulSave();
 				}
 
 				new Toast({
@@ -833,7 +825,7 @@ export default {
 					timeout: 8000
 				});
 
-				return this.handleFailedSave();
+				return this.$refs.saveButton.handleFailedSave();
 			});
 		},
 		updateThemeLocal(theme) {
@@ -842,7 +834,7 @@ export default {
 			this.themeDropdownActive = false;
 		},
 		updateTheme() {
-			this.saveStatus = "disabled";
+			this.$refs.saveButton.status = "disabled";
 
 			this.socket.emit(
 				"stations.updateTheme",
@@ -853,10 +845,10 @@ export default {
 
 					if (res.status === "success") {
 						this.originalStation.theme = this.station.theme;
-						return this.handleSuccessfulSave();
+						return this.$refs.saveButton.handleSuccessfulSave();
 					}
 
-					return this.handleFailedSave();
+					return this.$refs.saveButton.handleFailedSave();
 				}
 			);
 		},

frontend/src/components/ui/SaveButton.vue

@@ -0,0 +1,70 @@
+<template>
+	<div>
+		<transition name="save-button-transition" mode="out-in">
+			<button
+				:class="['button', 'save-button-mixin', style]"
+				:key="status"
+				:disabled="status === 'disabled'"
+				v-html="message"
+				@click="$emit('clicked')"
+			/>
+		</transition>
+	</div>
+</template>
+
+<script>
+export default {
+	props: {
+		type: { type: String, default: "save" } // enum: ["save", "save-and-close"]
+	},
+	data() {
+		return {
+			status: "default" // enum: ["default", "disabled", "save-failure", "save-success"],
+		};
+	},
+	computed: {
+		message() {
+			switch (this.status) {
+				case "save-success":
+					return `<i class="material-icons icon-with-button">done</i>Saved Changes`;
+				case "save-failure":
+					return `<i class="material-icons icon-with-button">error_outline</i>Failed to save`;
+				case "disabled":
+					return "Saving...";
+				default:
+					return this.type === "save-and-close"
+						? "Save and Close"
+						: "Save changes";
+			}
+		},
+		style() {
+			switch (this.status) {
+				case "save-success":
+					return "is-success";
+				case "save-failure":
+					return `is-danger`;
+				default:
+					return "is-primary";
+			}
+		}
+	},
+	methods: {
+		handleSuccessfulSave() {
+			if (this.status !== "save-success") {
+				this.status = "save-success";
+				setTimeout(() => {
+					this.status = "default";
+				}, 2000);
+			}
+		},
+		handleFailedSave() {
+			if (this.status !== "save-failure") {
+				this.status = "save-failure";
+				setTimeout(() => {
+					this.status = "default";
+				}, 2000);
+			}
+		}
+	}
+};
+</script>

frontend/src/mixins/SaveButton.vue

@@ -1,51 +0,0 @@
-<script>
-export default {
-	data() {
-		return {
-			saveStatus: "default" // enum: ["default", "disabled", "save-failure", "save-success"],
-		};
-	},
-	computed: {
-		saveButtonMessage() {
-			switch (this.saveStatus) {
-				case "save-success":
-					return `<i class="material-icons icon-with-button">done</i>Saved Changes`;
-				case "save-failure":
-					return `<i class="material-icons icon-with-button">error_outline</i>Failed to save`;
-				case "disabled":
-					return "Saving...";
-				default:
-					return "Save changes";
-			}
-		},
-		saveButtonStyle() {
-			switch (this.saveStatus) {
-				case "save-success":
-					return "is-success";
-				case "save-failure":
-					return `is-danger`;
-				default:
-					return "is-primary";
-			}
-		}
-	},
-	methods: {
-		handleSuccessfulSave() {
-			if (this.saveStatus !== "save-success") {
-				this.saveStatus = "save-success";
-				setTimeout(() => {
-					this.saveStatus = "default";
-				}, 2000);
-			}
-		},
-		handleFailedSave() {
-			if (this.saveStatus !== "save-failure") {
-				this.saveStatus = "save-failure";
-				setTimeout(() => {
-					this.saveStatus = "default";
-				}, 2000);
-			}
-		}
-	}
-};
-</script>

frontend/src/pages/Settings/tabs/Account.vue

@@ -51,16 +51,7 @@
 			></input-help-box>
 		</transition>
 
-		<transition name="save-button-transition" mode="out-in">
-			<button
-				class="button save-button-mixin"
-				:class="saveButtonStyle"
-				@click="saveChanges()"
-				:key="saveStatus"
-				:disabled="saveStatus === 'disabled'"
-				v-html="saveButtonMessage"
-			/>
-		</transition>
+		<save-button ref="saveButton" @clicked="saveChanges()" />
 
 		<!-- <div class="section-margin-bottom" />
 
@@ -112,11 +103,10 @@ import validation from "../../../validation";
 import io from "../../../io";
 
 import InputHelpBox from "../../../components/ui/InputHelpBox.vue";
-import SaveButton from "../../../mixins/SaveButton.vue";
+import SaveButton from "../../../components/ui/SaveButton.vue";
 
 export default {
-	components: { InputHelpBox },
-	mixins: [SaveButton],
+	components: { InputHelpBox, SaveButton },
 	data() {
 		return {
 			validation: {
@@ -198,7 +188,7 @@ export default {
 			if (emailAddressChanged) this.changeEmail();
 
 			if (!usernameChanged && !emailAddressChanged) {
-				this.handleFailedSave();
+				this.$refs.saveButton.handleFailedSave();
 
 				new Toast({
 					content: "Please make a change before saving.",
@@ -222,7 +212,7 @@ export default {
 					timeout: 8000
 				});
 
-			this.saveStatus = "disabled";
+			this.$refs.saveButton.saveStatus = "disabled";
 
 			return this.socket.emit(
 				"users.updateEmail",
@@ -231,7 +221,7 @@ export default {
 				res => {
 					if (res.status !== "success") {
 						new Toast({ content: res.message, timeout: 8000 });
-						this.handleFailedSave();
+						this.$refs.saveButton.handleFailedSave();
 					} else {
 						new Toast({
 							content: "Successfully changed email address",
@@ -243,7 +233,7 @@ export default {
 							value: email
 						});
 
-						this.handleSuccessfulSave();
+						this.$refs.saveButton.handleSuccessfulSave();
 					}
 				}
 			);
@@ -264,7 +254,7 @@ export default {
 					timeout: 8000
 				});
 
-			this.saveStatus = "disabled";
+			this.$refs.saveButton.saveStatus = "disabled";
 
 			return this.socket.emit(
 				"users.updateUsername",
@@ -273,7 +263,7 @@ export default {
 				res => {
 					if (res.status !== "success") {
 						new Toast({ content: res.message, timeout: 8000 });
-						this.handleFailedSave();
+						this.$refs.saveButton.handleFailedSave();
 					} else {
 						new Toast({
 							content: "Successfully changed username",
@@ -285,7 +275,7 @@ export default {
 							value: username
 						});
 
-						this.handleSuccessfulSave();
+						this.$refs.saveButton.handleSuccessfulSave();
 					}
 				}
 			);

frontend/src/pages/Settings/tabs/Preferences.vue

@@ -35,16 +35,8 @@
 				<p>Allow my activity log to be viewed publicly</p>
 			</label>
 		</p>
-		<transition name="save-button-transition" mode="out-in">
-			<button
-				class="button save-button-mixin"
-				:class="saveButtonStyle"
-				@click="saveChanges()"
-				:key="saveStatus"
-				:disabled="saveStatus === 'disabled'"
-				v-html="saveButtonMessage"
-			/>
-		</transition>
+
+		<save-button ref="saveButton" @clicked="saveChanges()" />
 	</div>
 </template>
 
@@ -53,10 +45,10 @@ import { mapState, mapActions } from "vuex";
 import Toast from "toasters";
 
 import io from "../../../io";
-import SaveButton from "../../../mixins/SaveButton.vue";
+import SaveButton from "../../../components/ui/SaveButton.vue";
 
 export default {
-	mixins: [SaveButton],
+	components: { SaveButton },
 	data() {
 		return {
 			localNightmode: false,
@@ -82,7 +74,6 @@ export default {
 			});
 
 			socket.on("keep.event:user.preferences.changed", preferences => {
-				console.log("changed");
 				this.localNightmode = preferences.nightmode;
 				this.localAutoSkipDisliked = preferences.autoSkipDisliked;
 				this.localActivityLogPublic = preferences.activityLogPublic;
@@ -101,10 +92,10 @@ export default {
 					timeout: 5000
 				});
 
-				return this.handleFailedSave();
+				return this.$refs.saveButton.handleFailedSave();
 			}
 
-			this.saveStatus = "disabled";
+			this.$refs.saveButton.status = "disabled";
 
 			return this.socket.emit(
 				"users.updatePreferences",
@@ -117,7 +108,7 @@ export default {
 					if (res.status !== "success") {
 						new Toast({ content: res.message, timeout: 8000 });
 
-						return this.handleFailedSave();
+						return this.$refs.saveButton.handleFailedSave();
 					}
 
 					new Toast({
@@ -125,7 +116,7 @@ export default {
 						timeout: 4000
 					});
 
-					return this.handleSuccessfulSave();
+					return this.$refs.saveButton.handleSuccessfulSave();
 				}
 			);
 		},

frontend/src/pages/Settings/tabs/Profile.vue

@@ -67,16 +67,8 @@
 				>{{ modifiedUser.bio.length }}/200</span
 			>
 		</p>
-		<transition name="save-button-transition" mode="out-in">
-			<button
-				class="button save-button-mixin"
-				:class="saveButtonStyle"
-				@click="saveChanges()"
-				:key="saveStatus"
-				:disabled="saveStatus === 'disabled'"
-				v-html="saveButtonMessage"
-			/>
-		</transition>
+
+		<save-button ref="saveButton" @clicked="saveChanges()" />
 	</div>
 </template>
 
@@ -88,11 +80,10 @@ import validation from "../../../validation";
 import io from "../../../io";
 
 import ProfilePicture from "../../../components/ui/ProfilePicture.vue";
-import SaveButton from "../../../mixins/SaveButton.vue";
+import SaveButton from "../../../components/ui/SaveButton.vue";
 
 export default {
-	components: { ProfilePicture },
-	mixins: [SaveButton],
+	components: { ProfilePicture, SaveButton },
 	computed: mapState({
 		userId: state => state.user.auth.userId,
 		originalUser: state => state.settings.originalUser,
@@ -139,7 +130,7 @@ export default {
 				!locationChanged &&
 				!nameChanged
 			) {
-				this.handleFailedSave();
+				this.$refs.saveButton.handleFailedSave();
 
 				new Toast({
 					content: "Please make a change before saving.",
@@ -156,7 +147,7 @@ export default {
 					timeout: 8000
 				});
 
-			this.saveStatus = "disabled";
+			this.$refs.saveButton.status = "disabled";
 
 			return this.socket.emit(
 				"users.updateName",
@@ -165,7 +156,7 @@ export default {
 				res => {
 					if (res.status !== "success") {
 						new Toast({ content: res.message, timeout: 8000 });
-						this.handleFailedSave();
+						this.$refs.saveButton.handleFailedSave();
 					} else {
 						new Toast({
 							content: "Successfully changed name",
@@ -177,7 +168,7 @@ export default {
 							value: name
 						});
 
-						this.handleSuccessfulSave();
+						this.$refs.saveButton.handleSuccessfulSave();
 					}
 				}
 			);
@@ -191,7 +182,7 @@ export default {
 					timeout: 8000
 				});
 
-			this.saveStatus = "disabled";
+			this.$refs.saveButton.status = "disabled";
 
 			return this.socket.emit(
 				"users.updateLocation",
@@ -200,7 +191,7 @@ export default {
 				res => {
 					if (res.status !== "success") {
 						new Toast({ content: res.message, timeout: 8000 });
-						this.handleFailedSave();
+						this.$refs.saveButton.handleFailedSave();
 					} else {
 						new Toast({
 							content: "Successfully changed location",
@@ -212,7 +203,7 @@ export default {
 							value: location
 						});
 
-						this.handleSuccessfulSave();
+						this.$refs.saveButton.handleSuccessfulSave();
 					}
 				}
 			);
@@ -226,7 +217,7 @@ export default {
 					timeout: 8000
 				});
 
-			this.saveStatus = "disabled";
+			this.$refs.saveButton.status = "disabled";
 
 			return this.socket.emit(
 				"users.updateBio",
@@ -235,7 +226,7 @@ export default {
 				res => {
 					if (res.status !== "success") {
 						new Toast({ content: res.message, timeout: 8000 });
-						this.handleFailedSave();
+						this.$refs.saveButton.handleFailedSave();
 					} else {
 						new Toast({
 							content: "Successfully changed bio",
@@ -247,7 +238,7 @@ export default {
 							value: bio
 						});
 
-						this.handleSuccessfulSave();
+						this.$refs.saveButton.handleSuccessfulSave();
 					}
 				}
 			);
@@ -255,7 +246,7 @@ export default {
 		changeAvatarType() {
 			const { avatar } = this.modifiedUser;
 
-			this.saveStatus = "disabled";
+			this.$refs.saveButton.status = "disabled";
 
 			return this.socket.emit(
 				"users.updateAvatarType",
@@ -264,7 +255,7 @@ export default {
 				res => {
 					if (res.status !== "success") {
 						new Toast({ content: res.message, timeout: 8000 });
-						this.handleFailedSave();
+						this.$refs.saveButton.handleFailedSave();
 					} else {
 						new Toast({
 							content: "Successfully updated avatar type",
@@ -276,7 +267,7 @@ export default {
 							value: avatar
 						});
 
-						this.handleSuccessfulSave();
+						this.$refs.saveButton.handleSuccessfulSave();
 					}
 				}
 			);