From 2d3acccae2022a4605de7cf625af5055f1d1d2ff Mon Sep 17 00:00:00 2001
From: maciejpedzich <contact@maciejpedzi.ch>
Date: Wed, 6 Jul 2022 14:02:10 +0200
Subject: [PATCH] Ensure proper 404 Error handling

---
 pages/playlists/[playlistId].vue | 26 ++++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/pages/playlists/[playlistId].vue b/pages/playlists/[playlistId].vue
index 709d334..797d865 100644
--- a/pages/playlists/[playlistId].vue
+++ b/pages/playlists/[playlistId].vue
@@ -20,16 +20,18 @@ const tabItems = [
   {
     label: 'Show statistics',
     icon: 'pi pi-chart-bar',
-    to: `./statistics`
+    to: `./stats`
   }
 ];
 
-const { error, data } = await useFetch<Playlist & { notFound?: true }>(
+const { error, data: playlist } = await useFetch<
+  Playlist & { notFound?: true }
+>(
   () =>
-    `https://raw.githubusercontent.com/mackorone/spotify-playlist-archive/master/playlists/pretty/${playlistId}.json`,
+    `https://raw.githubusercontent.com/mackorone/spotify-playlist-archive/main/playlists/pretty/${playlistId}.json`,
   {
     parseResponse: (body) =>
-      body.includes('404') ? { notFound: true } : JSON.parse(body),
+      body === '404: Not Found' ? { notFound: true } : JSON.parse(body),
     key: `playlist-${playlistId}`
   }
 );
@@ -47,20 +49,20 @@ const isNotFoundError = computed(
       </span>
       <span v-else>Something went wrong while fetching playlist's data</span>
     </p>
-    <template v-else-if="data">
+    <template v-else-if="playlist">
       <h1 class="text-3xl mb-3">
-        <NuxtLink :to="data.url" target="_blank">
-          {{ data.unique_name }}
-          <span v-if="data.unique_name !== data.original_name">
-            ({{ data.original_name }})
+        <NuxtLink :to="playlist.url" target="_blank">
+          {{ playlist.unique_name }}
+          <span v-if="playlist.unique_name !== playlist.original_name">
+            ({{ playlist.original_name }})
           </span>
         </NuxtLink>
         by
-        <NuxtLink :to="data.owner.url" target="_blank">
-          {{ data.owner.name }}
+        <NuxtLink :to="playlist.owner?.url" target="_blank">
+          {{ playlist.owner?.name }}
         </NuxtLink>
       </h1>
-      <TabMenu class="w-full mb-5" :model="tabItems" />
+      <TabMenu class="w-full mb-4" :model="tabItems" />
       <NuxtPage />
     </template>
   </div>