diff --git a/src/ui/src/components/popups/ImportSpotifyAlbum.vue b/src/ui/src/components/popups/ImportSpotifyAlbum.vue index 898202568..d367a6929 100644 --- a/src/ui/src/components/popups/ImportSpotifyAlbum.vue +++ b/src/ui/src/components/popups/ImportSpotifyAlbum.vue @@ -33,12 +33,16 @@ const form = ref(null); const songs: Ref = ref([]); const show = async () => { - modal.value.load(); - if (songs.value.length == 0) { - const res = await fetch(`/api/spotify/albums/${props.album.id}`) - songs.value = await res.json() + if (songs.value.length > 0) { + modal.value.show(); + return; } - modal.value.show(); + + const res = await modal.value.fetch(`/api/spotify/albums/${props.album.id}`); + + if (!res) return; + + songs.value = await res.json() } const preview = () => { diff --git a/src/ui/src/components/popups/ImportSpotifySong.vue b/src/ui/src/components/popups/ImportSpotifySong.vue index 0c3e78a52..182e0e7e9 100644 --- a/src/ui/src/components/popups/ImportSpotifySong.vue +++ b/src/ui/src/components/popups/ImportSpotifySong.vue @@ -32,16 +32,23 @@ const form = ref(null); const track: Ref = ref(null); const show = async () => { - modal.value.load(); if (!track.value) { - const res = await fetch("/api/browse/track", { - method: "POST", - body: JSON.stringify({ - url: props.song.href - }) - }) - track.value = await res.json() + modal.value.show(); + return; } + + const res = await modal.value.fetch("/api/browse/track", { + method: "POST", + body: JSON.stringify({ + url: props.song.href + }) + }); + + if (!res) return; + + modal.value.load(); + + track.value = await res.json(); modal.value.show(); } diff --git a/src/ui/src/components/popups/components/Template.vue b/src/ui/src/components/popups/components/Template.vue index 66c12c2be..aae3a07cb 100644 --- a/src/ui/src/components/popups/components/Template.vue +++ b/src/ui/src/components/popups/components/Template.vue @@ -21,6 +21,7 @@ const props = defineProps({ const loading = ref(false); const showModal = ref(false); +const error = ref(""); const hide = () => showModal.value = false; const show = () => { @@ -33,6 +34,17 @@ const load = () => { showModal.value = true; } +const fetch = async (url: string, options: RequestInit) => { + load(); + const res = await window.fetch(url, options); + show(); + if (!res.ok) { + error.value = await res.text(); + return null; + } + return res; +} + const emit = defineEmits(["submit", "close", "secondary"]); const close = () => { @@ -51,7 +63,7 @@ const secondary = () => { } defineExpose({ - show, hide, load + show, hide, load, fetch })