Implement playlist search typeahead

models/search-result.ts

@@ -0,0 +1,4 @@
+export interface SearchResult {
+  id: string;
+  title: string;
+}

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>

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;
+});