Move main.js fetch requests into root component

resources/js/main.js

@@ -50,32 +50,6 @@ function login(event) {
 	// event.stopPropogation()
 }
 
-function getUser(app) {
-	fetch("/panel/user", {
-		method: 'GET',
-		headers: {'Content-Type': 'application/json',
-			'Accept': 'application/json',
-		'X-XSRF-TOKEN': token},
-	}).then(response => {
-		return response.json()
-	}).then(data => {
-		app.user = data
-	})
-	/* return this.user.name */
-}
-
-function getOrders(app) {
-	fetch("/panel/orders", {
-		method: 'GET',
-		headers: {'Content-Type': 'application/json',
-			'Accept': 'application/json',
-		'X-XSRF-TOKEN': token},
-	}).then(response => {
-		return response.json()
-	}).then(data => {
-		app.orders = data
-	})
-}
 
 //Attempt to resend the verification link
 function resendLink(event) {
@@ -140,7 +114,5 @@ if (window.location.pathname == '/') {
 	const app = createApp(Panel).mount('#panel')
 	getToken().then(()=> {app.token = token})
 	window.onhashchange = ()=>{app.active = location.hash}
-	getUser(app)
-	getOrders(app)
 }
 

resources/js/panel/panel.vue

@@ -29,7 +29,7 @@
 <PastOrders :orders="orders" v-else-if="active === '#orders'" id="main">
 </PastOrders>
 <NewOrder :token="token" :credits="user.credits" v-else-if="active ===
-'#new-order'" id="main" @updateUser='updateUser'>
+'#new-order'" id="main" @updateUser='getUser'>
 </NewOrder>
 <div id="main" v-else-if="active === '#exit'">
 	<section class="logout-pane">
@@ -51,19 +51,19 @@ import NewOrder from './services.vue'
 /* function getServices() { */
 	
 /* } */
-/* function getServices() { */
-/* 	fetch("/panel/services", { */
-/* 		method: 'GET', */
-/* 		headers: {'Content-Type': 'application/json', */
-/* 			'Accept': 'application/json', */
-/* 			'X-XSRF-TOKEN': this.token} */
-/* 	}).then(response => { */
-/* 		response.json().then(data => {this.services = data}) */
-/* 	}) */
-/* } */
+function getServices() {
+	return fetch("/panel/services", {
+		method: 'GET',
+		headers: {'Content-Type': 'application/json',
+			'Accept': 'application/json',
+			'X-XSRF-TOKEN': this.token}
+	}).then(response => {
+		response.json().then(data => {this.services = data})
+	})
+}
 
-function updateUser() {
-	fetch("/panel/user", {
+function getUser() {
+	return fetch("/panel/user", {
 		method: 'GET',
 		headers: {'Content-Type': 'application/json',
 			'Accept': 'application/json',
@@ -75,32 +75,36 @@ function updateUser() {
 	})
 }
 
+function getOrders() {
+	return fetch("/panel/orders", {
+		method: 'GET',
+		headers: {'Content-Type': 'application/json',
+			'Accept': 'application/json',
+		'X-XSRF-TOKEN': this.token},
+	}).then(response => {
+		return response.json()
+	}).then(data => {
+		this.orders = data
+	})
+}
+
 export default {
 	components: {
 		Sidebar, Settings, PastOrders, NewOrder
 	},
 	data() {
 	return {active: window.location.hash, user: null,
-	token: null, orders: null, loading: true}
+	token: null, orders: null, loading: true,}
 	},
-	methods: {updateUser},
+	methods: {getUser, getServices, getOrders},
 	created() {
-		fetch("/panel/services", {
-			method: 'GET',
-			headers: {'Content-Type': 'application/json',
-				'Accept': 'application/json',
-				'X-XSRF-TOKEN': this.token}
-		}).then(response => {
-			response.json().then(data => {this.services = data; this.loading = false})
-		}).then(
-		fetch("/panel/services", {
-			method: 'GET',
-			headers: {'Content-Type': 'application/json',
-				'Accept': 'application/json',
-				'X-XSRF-TOKEN': this.token}
-		}).then(response => {
-			response.json().then(data => {this.services = data; this.loading = false})
-		}))
+		let loaders = []
+		loaders.push(this.getUser())
+		loaders.push(this.getServices())
+		loaders.push(this.getOrders())
+		Promise.all(loaders).then(() => {
+			this.loading = false
+		})
 	}
 }
 </script>