feat: fetching home data with rest APIs; refactor: renamed fetch functions

src/app.js

@@ -19,7 +19,7 @@ import router from '@/router'
 import store from '@/store'
 
 import { socket } from '@/utils/socket'
-import { fetchApi } from '@/utils/api'
+import { fetchData } from '@/utils/api'
 import { toast } from '@/utils/toasts'
 import { isValidURL } from '@/utils/utils'
 import { sendAddToQueue } from '@/utils/downloads'
@@ -47,12 +47,12 @@ async function startApp() {
 			let result
 
 			if (accountNum !== 0) {
-				result = fetchApi('login', { arl, force: true, child: accountNum || 0 })
+				result = await fetchData('login', { arl, force: true, child: accountNum || 0 })
 			} else {
-				result = fetchApi('login', { arl })
+				result = await fetchData('login', { arl })
 			}
 
-			result.then(loggedIn)
+			loggedIn(result)
 		}
 	}
 }
@@ -111,6 +111,7 @@ socket.on('message', function (msg) {
 })
 
 function loggedIn(data) {
+	console.log({ data })
 	const { status, user } = data
 
 	switch (status) {

src/data/home.js

@@ -1,22 +1,17 @@
-import { socket } from '@/utils/socket'
+import { fetchData } from '@/utils/api'
 
 let homeData = {}
 let cached = false
 
-export function getHomeData() {
+export async function getHomeData() {
 	if (cached) {
 		return homeData
 	} else {
-		socket.emit('get_home_data')
+		const data = await fetchData('getHome')
 
-		return new Promise((resolve, reject) => {
-			socket.on('init_home', data => {
-				homeData = data
-				cached = true
+		homeData = data
+		cached = true
 
-				socket.off('init_home')
-				resolve(data)
-			})
-		})
+		return data
 	}
 }

src/use/main-search.js

@@ -1,10 +1,10 @@
 import { ref } from '@vue/composition-api'
-import { fetchApi } from '@/utils/api'
+import { fetchData } from '@/utils/api'
 
 const searchResult = ref({})
 
 function performMainSearch(searchTerm) {
-	fetchApi('mainSearch', { term: searchTerm }).then(data => {
+	fetchData('mainSearch', { term: searchTerm }).then(data => {
 		searchResult.value = data
 	})
 }

src/use/search.js

@@ -1,10 +1,10 @@
 import { ref } from '@vue/composition-api'
-import { fetchApi } from '@/utils/api'
+import { fetchData } from '@/utils/api'
 
 const result = ref({})
 
 function performSearch({ term, type, start = 0, nb = 30 }) {
-	fetchApi('search', {
+	fetchData('search', {
 		term,
 		type,
 		start,

src/utils/api.js

@@ -1,4 +1,4 @@
-export function fetchApi(key, data) {
+export function fetchData(key, data = {}) {
 	const url = new URL(`${window.location.origin}/api/${key}`)
 
 	Object.keys(data).forEach(key => {
@@ -7,3 +7,13 @@ export function fetchApi(key, data) {
 
 	return fetch(url.href).then(response => response.json())
 }
+
+export function sendToServer(key, data) {
+	const url = new URL(`${window.location.origin}/api/${key}`)
+
+	Object.keys(data).forEach(key => {
+		url.searchParams.append(key, data[key])
+	})
+
+	fetch(url.href).catch(console.error)
+}

src/utils/downloads.js

@@ -1,13 +1,13 @@
-import { fetchApi } from '@/utils/api'
+import { sendToServer } from '@/utils/api'
 
 /**
  * @param	{string}	url
- * @param	{number}	bitrate
+ * @param	{number|null}	bitrate
  */
 export function sendAddToQueue(url, bitrate = null) {
 	if (!url) throw new Error('No URL given to sendAddToQueue function!')
 
-	fetchApi('addToQueue', { url, bitrate })
+	sendToServer('addToQueue', { url, bitrate })
 }
 
 export function aggregateDownloadLinks(releases) {