From 8faaf6bed13b0b7f54090d42498bca48b3da8baf Mon Sep 17 00:00:00 2001
From: maciejpedzich <contact@maciejpedzi.ch>
Date: Tue, 19 Jul 2022 22:21:13 +0200
Subject: [PATCH] Implement playlist search typeahead

---
 models/search-result.ts        |   4 ++
 pages/index.vue                | 106 +++++++++++++++++++++++----------
 server/api/playlists/search.ts |  24 ++++++++
 3 files changed, 103 insertions(+), 31 deletions(-)
 create mode 100644 models/search-result.ts
 create mode 100644 server/api/playlists/search.ts

diff --git a/models/search-result.ts b/models/search-result.ts
new file mode 100644
index 0000000..df5199e
--- /dev/null
+++ b/models/search-result.ts
@@ -0,0 +1,4 @@
+export interface SearchResult {
+  id: string;
+  title: string;
+}
diff --git a/pages/index.vue b/pages/index.vue
index 03fd8c7..407c7be 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,25 +1,63 @@
 <script setup lang="ts">
-import InputText from 'primevue/inputtext';
-import Button from 'primevue/button';
+import { $fetch } from 'ohmyfetch';
+import AutoComplete from 'primevue/autocomplete';
+
+import { SearchResult } from '~~/models/search-result';
 
 const router = useRouter();
-const playlistLink = ref('');
 
-const openSnapshotCalendar = async () => {
-  const urlObject = new URL(playlistLink.value);
-  const params = urlObject.pathname.split('/').filter((p) => p);
-  const [collectionName, itemId] = params;
+const searchText = ref('');
+const suggestions = ref([]);
 
-  if (
-    urlObject.hostname === 'open.spotify.com' &&
-    collectionName === 'playlist' &&
-    itemId
-  ) {
-    await router.push(`/playlists/${itemId}/snapshots`);
-  } else {
-    throw new Error('This is not a valid playlist link');
+const findPlaylists = async () => {
+  try {
+    const urlObject = new URL(searchText.value);
+    const [collectionName, playlistId] = urlObject.pathname
+      .split('/')
+      .filter(Boolean);
+
+    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,
+                    title: JSON.parse(body).original_name
+                  }
+                ]
+        }
+      ).catch((e) => e.data);
+
+      suggestions.value = searchResults;
+    } else {
+      throw new Error('This is not a valid playlist link');
+    }
+  } catch (error) {
+    if (error.message === 'This is not a valid playlist link') return [];
+
+    const searchResults = await $fetch<SearchResult[]>(
+      `/api/playlists/search?title=${searchText.value}`
+    );
+
+    suggestions.value = searchResults;
   }
 };
+
+const openSnapshotsCalendar = async ({
+  value: entry
+}: {
+  value: SearchResult;
+}) => {
+  await router.push(`/playlists/${entry.id}/snapshots`);
+};
 </script>
 
 <template>
@@ -29,23 +67,29 @@ const openSnapshotCalendar = async () => {
       <p class="text-xl text-gray-300">
         Browse past versions of thousands of playlists saved over time
       </p>
-      <form
-        class="w-full"
-        @submit.prevent="openSnapshotCalendar"
-        @keypress.enter="openSnapshotCalendar"
-      >
-        <InputText
-          v-model="playlistLink"
-          type="url"
-          class="w-full text-center mt-1 mb-3"
-          placeholder="Enter a playlist link"
+      <div class="w-full">
+        <AutoComplete
+          v-model="searchText"
+          :suggestions="suggestions"
+          class="w-full"
+          placeholder="Type in at least 3 characters, or paste a playlist link"
+          field="title"
+          :min-length="3"
+          @complete="findPlaylists"
+          @item-select="openSnapshotsCalendar"
         />
-        <Button
-          type="submit"
-          label="Browse snapshots"
-          :disabled="playlistLink.length === 0"
-        />
-      </form>
+      </div>
     </div>
   </NuxtLayout>
 </template>
+
+<style scoped>
+:deep(.p-autocomplete-input) {
+  width: 100%;
+  text-align: center;
+}
+
+:deep(.p-autocomplete-input::placeholder) {
+  text-align: center;
+}
+</style>
diff --git a/server/api/playlists/search.ts b/server/api/playlists/search.ts
new file mode 100644
index 0000000..02cab8b
--- /dev/null
+++ b/server/api/playlists/search.ts
@@ -0,0 +1,24 @@
+import { $fetch } from 'ohmyfetch';
+
+export default defineEventHandler(async (event) => {
+  const query = useQuery(event);
+
+  const readmeFileContent = await $fetch<string>(
+    'https://raw.githubusercontent.com/mackorone/spotify-playlist-archive/main/README.md'
+  );
+  const [, playlistLinksMdList] = readmeFileContent.split('## Playlists\n\n');
+  const archiveEntries = playlistLinksMdList
+    .replaceAll('- [', '')
+    .replaceAll('\\', '')
+    .replaceAll('](', ' ')
+    .replaceAll('.md)', '')
+    .split('\n')
+    .map((textEntry) => {
+      const [title, id] = textEntry.split(' /playlists/pretty/');
+
+      return { title, id };
+    })
+    .filter((entry) => entry.title.includes(query.title as string));
+
+  return archiveEntries;
+});