maciejpedzich/spotifyplaylistarchive.com
1
0
Fork 0
mirror of https://github.com/maciejpedzich/spotifyplaylistarchive.com.git synced 2024-09-19 18:16:19 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

Implement title typeahead and search history

Browse Source
This commit is contained in:
Maciej Pędzich 2022-07-20 21:40:17 +02:00
parent b144597153
commit ba6aa44ee2
1 changed files with 24 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
pages/index.vue
View File

@ -6,10 +6,20 @@ import { SearchResult } from '~~/models/search-result';
const router = useRouter();
const searchHistory = useCookie<SearchResult[]>('searchHistory');
searchHistory.value = searchHistory.value || [];
const searchText = ref('');
const suggestions = ref([]);
// For some odd reason, if you don't do JSON.parse(JSON.stringify),
// suggestions ref won't get populated.
const displaySearchHistory = () =>
(suggestions.value = JSON.parse(JSON.stringify(searchHistory.value)));
const findPlaylists = async () => {
if (searchText.value.length === 0) return displaySearchHistory();
try {
const urlObject = new URL(searchText.value);
const [collectionName, playlistId] = urlObject.pathname
@ -36,7 +46,7 @@ const findPlaylists = async () => {
}
).catch((e) => e.data);
suggestions.value = searchResults;
return (suggestions.value = searchResults);
} else {
throw new Error('This is not a valid playlist link');
}
@ -47,7 +57,7 @@ const findPlaylists = async () => {
`/api/playlists/search?title=${searchText.value}`
);
suggestions.value = searchResults;
return (suggestions.value = searchResults);
}
};
@ -56,18 +66,27 @@ const openSnapshotsCalendar = async ({
}: {
value: SearchResult;
}) => {
const existingHistoryEntry = searchHistory.value.find(
(e) => e.id === entry.id
);
if (searchHistory.value.length === 0 || !existingHistoryEntry) {
searchHistory.value.unshift(entry);
searchHistory.value = searchHistory.value.slice(0, 10);
}
await router.push(`/playlists/${entry.id}/snapshots`);
};
</script>
<template>
<NuxtLayout name="centered-content">
<h1 class="m-0 text-5xl">Spotify Playlist Archive</h1>
<h1 class="m-0 md:text-5xl text-4xl">Spotify Playlist Archive</h1>
<div class="flex flex-column justify-content-center text-center">
<p class="text-xl text-gray-300">
Browse past versions of thousands of playlists saved over time
</p>
<div class="w-full">
<div class="w-full md:px-0 px-3">
<AutoComplete
v-model="searchText"
:suggestions="suggestions"
@ -75,6 +94,7 @@ const openSnapshotsCalendar = async ({
placeholder="Type in at least 3 characters, or paste a playlist link"
field="title"
:min-length="3"
complete-on-focus
@complete="findPlaylists"
@item-select="openSnapshotsCalendar"
/>