From 7a0b7459825ee009833ba9b5c0b0072a0e726942 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciej=20P=C4=99dzich?= <dnalop.me@gmail.com>
Date: Sat, 3 Sep 2022 16:25:49 +0200
Subject: [PATCH] Create a universal getPlaylistId composable

---
 composables/getPlaylistId.ts | 15 +++++++++
 pages/index.vue              | 64 ++++++++++++------------------------
 2 files changed, 36 insertions(+), 43 deletions(-)
 create mode 100644 composables/getPlaylistId.ts

diff --git a/composables/getPlaylistId.ts b/composables/getPlaylistId.ts
new file mode 100644
index 0000000..1eecb25
--- /dev/null
+++ b/composables/getPlaylistId.ts
@@ -0,0 +1,15 @@
+export const useGetPlaylistId = () => (url: string) => {
+  const urlObject = new URL(url);
+  const [collectionName, playlistId] = urlObject.pathname
+    .split('/')
+    .filter(Boolean);
+
+  const isValidPlaylistUrl =
+    urlObject.hostname === 'open.spotify.com' &&
+    collectionName === 'playlist' &&
+    playlistId;
+
+  if (!isValidPlaylistUrl) throw new Error('This is not a valid playlist URL');
+
+  return playlistId;
+};
diff --git a/pages/index.vue b/pages/index.vue
index 9083aca..1b87a2d 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -6,12 +6,13 @@ import AutoComplete from 'primevue/autocomplete';
 import { SearchResult } from '~~/models/search-result';
 
 const router = useRouter();
+const getPlaylistId = useGetPlaylistId();
 
 const searchHistory = useLocalStorage('searchHistory', []);
 const searchName = ref('');
-const suggestions = ref([]);
+const suggestions = ref<SearchResult[]>([]);
 
-// For some odd reason, if you don't do JSON.parse(JSON.stringify),
+// For some odd reason, if you don't call JSON.parse(JSON.stringify(...)),
 // suggestions ref won't get populated.
 const displaySearchHistory = () =>
   (suggestions.value = JSON.parse(JSON.stringify(searchHistory.value)));
@@ -20,37 +21,25 @@ const findPlaylists = async () => {
   if (searchName.value.length === 0) return displaySearchHistory();
 
   try {
-    const urlObject = new URL(searchName.value);
-    const [collectionName, playlistId] = urlObject.pathname
-      .split('/')
-      .filter(Boolean);
+    const playlistId = getPlaylistId(searchName.value);
+    const searchResults = await $fetch(
+      `https://raw.githubusercontent.com/mackorone/spotify-playlist-archive/main/playlists/pretty/${playlistId}.json`,
+      {
+        parseResponse: (body) =>
+          body === '404: Not Found'
+            ? []
+            : [
+                {
+                  id: playlistId,
+                  name: JSON.parse(body).original_name
+                }
+              ]
+      }
+    ).catch((e) => e.data);
 
-    if (
-      urlObject.hostname === 'open.spotify.com' &&
-      collectionName === 'playlist' &&
-      playlistId
-    ) {
-      const searchResults = await $fetch(
-        `https://raw.githubusercontent.com/mackorone/spotify-playlist-archive/main/playlists/pretty/${playlistId}.json`,
-        {
-          parseResponse: (body) =>
-            body === '404: Not Found'
-              ? []
-              : [
-                  {
-                    id: playlistId,
-                    name: JSON.parse(body).original_name
-                  }
-                ]
-        }
-      ).catch((e) => e.data);
-
-      return (suggestions.value = searchResults);
-    } else {
-      throw new Error('This is not a valid playlist link');
-    }
+    suggestions.value = searchResults;
   } catch (error) {
-    if (error.message === 'This is not a valid playlist link') return [];
+    if (error.message === 'This is not a valid playlist URL') return [];
 
     const searchResults = await $fetch<SearchResult[]>(
       `/api/playlists/search?name=${searchName.value}`
@@ -90,7 +79,7 @@ const openSnapshotsCalendar = async ({
           v-model="searchName"
           :suggestions="suggestions"
           class="w-full"
-          placeholder="Start typing, or paste a playlist link"
+          placeholder="Start typing or paste a playlist URL"
           field="name"
           :min-length="3"
           complete-on-focus
@@ -101,14 +90,3 @@ const openSnapshotsCalendar = async ({
     </div>
   </NuxtLayout>
 </template>
-
-<style scoped>
-:deep(.p-autocomplete-input) {
-  width: 100%;
-  text-align: center;
-}
-
-:deep(.p-autocomplete-input::placeholder) {
-  text-align: center;
-}
-</style>