refactor(Admin): scroll and fetch handler is now a mixin to prevent duplicated code

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

frontend/src/mixins/ScrollAndFetchHandler.vue

@@ -0,0 +1,36 @@
+<script>
+export default {
+	data() {
+		return {
+			position: 1,
+			maxPosition: 1,
+			gettingSet: false,
+			loadAllSongs: false
+		};
+	},
+	computed: {
+		setsLoaded() {
+			return this.position - 1;
+		},
+		maxSets() {
+			return this.maxPosition - 1;
+		}
+	},
+	methods: {
+		handleScroll() {
+			const scrollPosition = document.body.clientHeight + window.scrollY;
+			const bottomPosition = document.body.scrollHeight;
+
+			if (this.loadAllSongs) return false;
+
+			if (scrollPosition + 400 >= bottomPosition) this.getSet();
+
+			return this.maxPosition === this.position;
+		},
+		loadAll() {
+			this.loadAllSongs = true;
+			this.getSet();
+		}
+	}
+};
+</script>

frontend/src/pages/Admin/tabs/QueueSongs.vue

@@ -115,18 +115,17 @@ import Toast from "toasters";
 import EditSong from "../../../components/modals/EditSong.vue";
 import UserIdToUsername from "../../../components/common/UserIdToUsername.vue";
 
+import ScrollAndFetchHandler from "../../../mixins/ScrollAndFetchHandler.vue";
+
 import io from "../../../io";
 
 export default {
 	components: { EditSong, UserIdToUsername },
+	mixins: [ScrollAndFetchHandler],
 	data() {
 		return {
-			position: 1,
-			maxPosition: 1,
 			searchQuery: "",
-			songs: [],
-			gettingSet: false,
-			loadAllSongs: false
+			songs: []
 		};
 	},
 	computed: {
@@ -138,12 +137,6 @@ export default {
 					) !== -1
 			);
 		},
-		setsLoaded() {
-			return this.position - 1;
-		},
-		maxSets() {
-			return this.maxPosition - 1;
-		},
 		...mapState("modals", {
 			modals: state => state.modals.admin
 		})
@@ -190,20 +183,6 @@ export default {
 				this.gettingSet = false;
 			});
 		},
-		handleScroll() {
-			const scrollPosition = document.body.clientHeight + window.scrollY;
-			const bottomPosition = document.body.scrollHeight;
-
-			if (this.loadAllSongs) return false;
-
-			if (scrollPosition + 400 >= bottomPosition) this.getSet();
-
-			return this.maxPosition === this.position;
-		},
-		loadAll() {
-			this.loadAllSongs = true;
-			this.getSet();
-		},
 		selectPrevious(event) {
 			event.preventDefault();
 			if (event.srcElement.previousElementSibling)

frontend/src/pages/Admin/tabs/Songs.vue

@@ -107,21 +107,20 @@ import Toast from "toasters";
 import EditSong from "../../../components/modals/EditSong.vue";
 import UserIdToUsername from "../../../components/common/UserIdToUsername.vue";
 
+import ScrollAndFetchHandler from "../../../mixins/ScrollAndFetchHandler.vue";
+
 import io from "../../../io";
 
 export default {
+	mixins: [ScrollAndFetchHandler],
 	components: { EditSong, UserIdToUsername },
 	data() {
 		return {
-			position: 1,
-			maxPosition: 1,
 			searchQuery: "",
 			editing: {
 				index: 0,
 				song: {}
-			},
-			gettingSet: false,
-			loadAllSongs: false
+			}
 		};
 	},
 	computed: {
@@ -133,12 +132,6 @@ export default {
 					) !== -1
 			);
 		},
-		setsLoaded() {
-			return this.position - 1;
-		},
-		maxSets() {
-			return this.maxPosition - 1;
-		},
 		...mapState("modals", {
 			modals: state => state.modals.admin
 		}),
@@ -178,20 +171,6 @@ export default {
 				this.gettingSet = false;
 			});
 		},
-		handleScroll() {
-			const scrollPosition = document.body.clientHeight + window.scrollY;
-			const bottomPosition = document.body.scrollHeight;
-
-			if (this.loadAllSongs) return false;
-
-			if (scrollPosition + 50 >= bottomPosition) this.getSet();
-
-			return this.maxPosition === this.position;
-		},
-		loadAll() {
-			this.loadAllSongs = true;
-			this.getSet();
-		},
 		init() {
 			if (this.songs.length > 0)
 				this.position = Math.ceil(this.songs.length / 15) + 1;