wip: setup favorites and autologin with rest api

src/app.js

@@ -38,7 +38,7 @@ async function startApp() {
 	store.dispatch('setAppInfo', connectResponse.update)
 
 	if (connectResponse.autologin) {
-		console.info('Autologin successful')
+		console.info('Autologin')
 		let arl = localStorage.getItem('arl')
 		const accountNum = localStorage.getItem('accountNum')
 
@@ -111,7 +111,6 @@ socket.on('message', function (msg) {
 })
 
 function loggedIn(data) {
-	console.log({ data })
 	const { status, user } = data
 
 	switch (status) {

src/components/pages/Favorites.vue

@@ -3,13 +3,13 @@
 		<h1 class="mb-8 text-5xl">
 			{{ $t('favorites.title') }}
 			<div
-				@click="refreshFavorites"
-				class="inline-block clickable"
 				ref="reloadButton"
-				role="button"
 				aria-label="reload"
+				class="inline-block clickable"
+				role="button"
+				@click="refreshFavorites"
 			>
-				<i class="material-icons" :class="{ spin: isRefreshingFavorites }">sync</i>
+				<i :class="{ spin: isRefreshingFavorites }" class="material-icons">sync</i>
 			</div>
 		</h1>
 
@@ -19,7 +19,7 @@
 			</BaseTab>
 		</BaseTabs>
 
-		<button class="btn btn-primary" v-if="!activeTabEmpty" style="margin-bottom: 2rem" @click="downloadAllOfType">
+		<button v-if="!activeTabEmpty" class="btn btn-primary" style="margin-bottom: 2rem" @click="downloadAllOfType">
 			{{ $t('globals.download', { thing: $tc(`globals.listTabs.${activeTab}N`, getTabLength()) }) }}
 		</button>
 
@@ -27,10 +27,10 @@
 			<div v-if="playlists.length == 0">
 				<h1>{{ $t('favorites.noPlaylists') }}</h1>
 			</div>
-			<div class="release-grid" v-if="playlists.length > 0 || spotifyPlaylists > 0">
-				<div class="release" v-for="release in playlists" :key="release.id">
-					<router-link tag="div" class="cursor-pointer" :to="{ name: 'Playlist', params: { id: release.id } }">
-						<CoverContainer is-rounded :cover="release.picture_medium" :link="release.link" @click.stop="addToQueue" />
+			<div v-if="playlists.length > 0 || spotifyPlaylists > 0" class="release-grid">
+				<div v-for="release in playlists" :key="release.id" class="release">
+					<router-link :to="{ name: 'Playlist', params: { id: release.id } }" class="cursor-pointer" tag="div">
+						<CoverContainer :cover="release.picture_medium" :link="release.link" is-rounded @click.stop="addToQueue" />
 						<p class="primary-text">{{ release.title }}</p>
 					</router-link>
 
@@ -44,9 +44,9 @@
 					</p>
 				</div>
 
-				<div class="release" v-for="release in spotifyPlaylists" :key="release.id">
-					<router-link tag="div" class="cursor-pointer" :to="{ name: 'Spotify Playlist', params: { id: release.id } }">
-						<CoverContainer is-rounded :cover="release.picture_medium" :link="release.link" @click.stop="addToQueue" />
+				<div v-for="release in spotifyPlaylists" :key="release.id" class="release">
+					<router-link :to="{ name: 'Spotify Playlist', params: { id: release.id } }" class="cursor-pointer" tag="div">
+						<CoverContainer :cover="release.picture_medium" :link="release.link" is-rounded @click.stop="addToQueue" />
 						<p class="primary-text">{{ release.title }}</p>
 					</router-link>
 
@@ -66,15 +66,15 @@
 			<div v-if="albums.length == 0">
 				<h1>{{ $t('favorites.noAlbums') }}</h1>
 			</div>
-			<div class="release-grid" v-if="albums.length > 0">
+			<div v-if="albums.length > 0" class="release-grid">
 				<router-link
-					tag="div"
-					class="release clickable"
 					v-for="release in albums"
 					:key="release.id"
 					:to="{ name: 'Album', params: { id: release.id } }"
+					class="release clickable"
+					tag="div"
 				>
-					<CoverContainer is-rounded :cover="release.cover_medium" :link="release.link" @click.stop="addToQueue" />
+					<CoverContainer :cover="release.cover_medium" :link="release.link" is-rounded @click.stop="addToQueue" />
 					<p class="primary-text">{{ release.title }}</p>
 					<p class="secondary-text">{{ `${$t('globals.by', { artist: release.artist.name })}` }}</p>
 				</router-link>
@@ -85,15 +85,15 @@
 			<div v-if="artists.length == 0">
 				<h1>{{ $t('favorites.noArtists') }}</h1>
 			</div>
-			<div class="release-grid" v-if="artists.length > 0">
+			<div v-if="artists.length > 0" class="release-grid">
 				<router-link
-					tag="div"
-					class="release clickable"
 					v-for="release in artists"
 					:key="release.id"
 					:to="{ name: 'Artist', params: { id: release.id } }"
+					class="release clickable"
+					tag="div"
 				>
-					<CoverContainer is-circle :cover="release.picture_medium" :link="release.link" @click.stop="addToQueue" />
+					<CoverContainer :cover="release.picture_medium" :link="release.link" is-circle @click.stop="addToQueue" />
 					<p class="primary-text">{{ release.name }}</p>
 				</router-link>
 			</div>
@@ -105,17 +105,17 @@
 			</div>
 			<table v-if="tracks.length > 0" class="table">
 				<tr v-for="track in tracks" class="track_row">
-					<td class="p-3 text-center cursor-default" :class="{ first: track.position === 1 }">
+					<td :class="{ first: track.position === 1 }" class="p-3 text-center cursor-default">
 						{{ track.position }}
 					</td>
 					<td>
 						<span
+							:data-preview="track.preview"
 							class="relative inline-block rounded cursor-pointer"
 							@click="playPausePreview"
-							:data-preview="track.preview"
 						>
 							<PreviewControls v-if="track.preview" />
-							<img class="rounded coverart" :src="track.album.cover_small" />
+							<img :src="track.album.cover_small" class="rounded coverart" />
 						</span>
 					</td>
 					<td class="table__cell--large">
@@ -125,16 +125,16 @@
 						}}
 					</td>
 					<router-link
-						tag="td"
-						class="table__cell table__cell--medium table__cell--center clickable"
 						:to="{ name: 'Artist', params: { id: track.artist.id } }"
+						class="table__cell table__cell--medium table__cell--center clickable"
+						tag="td"
 					>
 						{{ track.artist.name }}
 					</router-link>
 					<router-link
-						tag="td"
-						class="table__cell--medium table__cell--center clickable"
 						:to="{ name: 'Album', params: { id: track.album.id } }"
+						class="table__cell--medium table__cell--center clickable"
+						tag="td"
 					>
 						{{ track.album.title }}
 					</router-link>
@@ -142,16 +142,16 @@
 						{{ convertDuration(track.duration) }}
 					</td>
 					<td
-						class="cursor-pointer group"
-						@click.stop="addToQueue"
 						:data-link="track.link"
-						role="button"
 						aria-label="download"
+						class="cursor-pointer group"
+						role="button"
+						@click.stop="addToQueue"
 					>
 						<div class="table__cell-content table__cell-content--vertical-center">
 							<i
-								class="transition-colors duration-150 ease-in-out material-icons group-hover:text-primary"
 								:title="$t('globals.download_hint')"
+								class="transition-colors duration-150 ease-in-out material-icons group-hover:text-primary"
 							>
 								get_app
 							</i>
@@ -164,14 +164,14 @@
 </template>
 
 <script>
-import { defineComponent, onMounted, reactive, toRefs, watchEffect, ref, computed, watch } from '@vue/composition-api'
+import { computed, defineComponent, reactive, toRefs, watch } from '@vue/composition-api'
 
 import PreviewControls from '@components/globals/PreviewControls.vue'
 import CoverContainer from '@components/globals/CoverContainer.vue'
 import { playPausePreview } from '@components/globals/TheTrackPreview.vue'
-import { BaseTabs, BaseTab } from '@components/globals/BaseTabs'
+import { BaseTab, BaseTabs } from '@components/globals/BaseTabs'
 
-import { sendAddToQueue, aggregateDownloadLinks } from '@/utils/downloads'
+import { aggregateDownloadLinks, sendAddToQueue } from '@/utils/downloads'
 import { convertDuration } from '@/utils/utils'
 import { toast } from '@/utils/toasts'
 import { useFavorites } from '@/use/favorites'

src/components/pages/Settings.vue

@@ -783,6 +783,7 @@ import { copyToClipboard } from '@/utils/utils'
 
 import BaseAccordion from '@/components/globals/BaseAccordion.vue'
 import TemplateVariablesList from '@components/settings/TemplateVariablesList.vue'
+import { fetchData, sendToServer } from '@/utils/api'
 
 export default {
 	components: {
@@ -949,16 +950,17 @@ export default {
 			this.lastCredentials = JSON.parse(JSON.stringify(credentials))
 			this.spotifyFeatures = JSON.parse(JSON.stringify(credentials))
 		},
-		loggedInViaDeezer(arl) {
+		async loggedInViaDeezer(arl) {
 			this.dispatchARL({ arl })
-			socket.emit('login', arl, true, this.accountNum)
 			// this.login()
+			// const res = await fetchData('login', { arl, force: true, child: this.accountNum })
 		},
-		login() {
+		async login() {
 			let newArl = this.$refs.loginInput.value.trim()
 
 			if (newArl && newArl !== this.arl) {
-				socket.emit('login', newArl, true, this.accountNum)
+				const res = await fetchData('login', { arl: newArl, force: true, child: this.accountNum })
+				this.loggedInViaDeezer(res.arl)
 			}
 		},
 		appLogin(e) {
@@ -969,9 +971,7 @@ export default {
 		},
 		accountChanged(user, accountNum) {
 			this.$refs.username.innerText = user.name
-			this.$refs.userpicture.src = `https://e-cdns-images.dzcdn.net/images/user/${
-				user.picture
-			}/125x125-000000-80-0-0.jpg`
+			this.$refs.userpicture.src = `https://e-cdns-images.dzcdn.net/images/user/${user.picture}/125x125-000000-80-0-0.jpg`
 			this.accountNum = accountNum
 
 			localStorage.setItem('accountNum', this.accountNum)

src/data/charts.js

@@ -1,4 +1,5 @@
 import { socket } from '@/utils/socket'
+import { fetchData } from '@/utils/api'
 
 let chartsData = {}
 let cached = false
@@ -8,6 +9,7 @@ export function getChartsData() {
 		return chartsData
 	} else {
 		socket.emit('get_charts_data')
+		fetchData('getCharts')
 
 		return new Promise((resolve, reject) => {
 			socket.on('init_charts', data => {

src/router.js

@@ -15,6 +15,7 @@ import LinkAnalyzer from '@components/pages/LinkAnalyzer.vue'
 import Search from '@components/pages/Search.vue'
 import Settings from '@components/pages/Settings.vue'
 import Tracklist from '@components/pages/Tracklist.vue'
+import { fetchData } from '@/utils/api'
 
 Vue.use(VueRouter)
 
@@ -159,6 +160,7 @@ router.beforeEach((to, from, next) => {
 
 	if (getTracklistParams) {
 		socket.emit('getTracklist', getTracklistParams)
+		fetchData('getTracklist', getTracklistParams)
 	}
 
 	next()

src/use/favorites.js

@@ -2,6 +2,7 @@ import { ref } from '@vue/composition-api'
 
 import store from '@/store'
 import { socket } from '@/utils/socket'
+import { fetchData } from '@/utils/api'
 
 const favoriteArtists = ref([])
 const favoriteAlbums = ref([])
@@ -15,15 +16,19 @@ if (store.getters.isLoggedIn) {
 	refreshFavorites({ isInitial: true })
 }
 
-function refreshFavorites({ isInitial = false }) {
+async function refreshFavorites({ isInitial = false }) {
 	if (!isInitial) {
 		isRefreshingFavorites.value = true
 	}
 
-	socket.emit('get_favorites_data')
+	const favorites = await fetchData('getFavorites')
+
+	setAllFavorites(favorites)
 
 	if (store.getters.isLoggedWithSpotify) {
-		socket.emit('update_userSpotifyPlaylists', store.getters.getSpotifyUser.id)
+		// TODO
+		const res = await fetchData('getUserSpotifyPlaylists', { spotifyUser: store.getters.getSpotifyUser.id })
+		// socket.emit('update_userSpotifyPlaylists', store.getters.getSpotifyUser.id)
 	}
 }
 
@@ -54,6 +59,7 @@ socket.on('updated_userFavorites', data => {
 	// therefore isRefreshingFavorites is never set to true
 	// isRefreshingFavorites.value = false
 })
+
 socket.on('init_favorites', data => {
 	setAllFavorites(data)
 	isRefreshingFavorites.value = false