feat: request wrapper utility

web/src/components/player/QueueViewer.vue

@@ -56,7 +56,6 @@
                 <i class="fa-solid fa-xmark"></i>
                 Clear
             </button>
-            <!-- TODO: On save, copy the current queue into rawQueue! -->
             <button>
                 <i class="fa-solid fa-save"></i>
                 Save

web/src/composables/SearchView.vue

@@ -19,7 +19,6 @@
 
     const search = ( ev: KeyboardEvent ) => {
         if ( ev.key === 'Enter' ) {
-            // TODO: If no new input, instead of searching, add first song
             try {
                 clearTimeout( timeout );
             } catch { /* empty */ }

web/src/ts/player/plugins/musickit/index.ts

@@ -8,16 +8,12 @@ import {
 import {
     musicKitPlayback
 } from './playback';
+import request from '@/ts/request';
 
 export const useMusicKit: PlayerSourcePluginInitializer = ( storefront: string = 'ch' ): Promise<PlayerSourcePlugin> => {
     return new Promise( ( resolve, reject ) => {
         const init = async ( storefront: string ): Promise<PlayerSourcePlugin> => {
-            const res = await fetch( import.meta.env.VITE_BACKEND_URL + '/dev-token', {
+            const token = await ( await request.get( '/dev-token' ) ).text();
-                'credentials': 'include'
-            } );
-
-            if ( res.status === 200 ) {
-                const token = await res.text();
             const instance = await window.MusicKit.configure( {
                 'developerToken': token,
                 'app': {
@@ -57,9 +53,6 @@ export const useMusicKit: PlayerSourcePluginInitializer = ( storefront: string =
                 },
                 'songUnload': async () => {}
             };
-            } else {
-                throw new Error( 'ERR_AUTH' );
-            }
         };
 
         if ( !window.MusicKit ) {

web/src/ts/request.ts

@@ -0,0 +1,39 @@
+export class AuthError extends Error {}
+
+export class UnownedError extends Error {}
+
+
+const get = async ( url: string ): Promise<Response> => {
+    return await wrapper( url, {
+        'credentials': 'include'
+    } );
+};
+
+const post = async ( url: string, payload: string, mime: string = 'application/json' ): Promise<Response> => {
+    return await wrapper( url, {
+        'credentials': 'include',
+        'body': payload,
+        'headers': {
+            'Content-Type': mime ?? 'application/json'
+        }
+    } );
+};
+
+const wrapper = async ( url: string, opts: RequestInit ): Promise<Response> => {
+    const res = await fetch( import.meta.env.VITE_BACKEND_URL + url, opts );
+
+    if ( res.ok ) {
+        return res;
+    } else if ( res.status === 403 || res.status === 401 ) {
+        throw new AuthError( 'ERR_USER_UNAUTHORIZED' );
+    } else if ( res.status === 402 ) {
+        throw new UnownedError( 'ERR_USER_UNOWNED' );
+    } else {
+        throw new Error( 'ERR_' + res.status );
+    }
+};
+
+export default {
+    get,
+    post
+};

web/src/views/AppView.vue

@@ -1,14 +1,34 @@
 <script setup lang="ts">
     import PlayerWrapper from '@/components/main/PlayerWrapper.vue';
     import PlaylistsComponent from '@/components/main/PlaylistsComponent.vue';
+    import {
+        ref
+    } from 'vue';
+    import request from '@/ts/request';
+    import router from '@/router';
 
+    const checkingStatus = ref( true );
+
+    const ownershipCheck = async () => {
+        const data = await ( await request.get( '/user/owned' ) ).json();
+
+        if ( data[ 'status' ] )
+            router.push( '/get' );
+    };
+
+    ownershipCheck();
 </script>
 
 <template>
     <div class="main-app">
+        <div v-if="checkingStatus">
+            Loading...
+        </div>
+        <div v-else>
             <PlaylistsComponent />
             <PlayerWrapper />
         </div>
+    </div>
 </template>
 
 <style lang="scss" scoped>