mirror of
https://github.com/maciejpedzich/spotifyplaylistarchive.com.git
synced 2024-09-19 18:16:19 +02:00
Implement title typeahead and search history
This commit is contained in:
parent
b144597153
commit
ba6aa44ee2
@ -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"
|
||||
/>
|
||||
|
Loading…
Reference in New Issue
Block a user