Add errorOccurred prop

This commit is contained in:
Maciej Pędzich 2023-01-18 22:21:17 +01:00
parent 5b621c208c
commit ce0d6f847c
2 changed files with 11 additions and 5 deletions

View File

@ -7,9 +7,11 @@ interface Props {
playlist: PlaylistSnapshot | null;
title: string;
description: string;
errorOccurred: boolean;
}
const { playlist, title, description } = Astro.props as Props;
const { playlistId } = Astro.params;
const { playlist, title, description, errorOccurred } = Astro.props as Props;
---
<BaseLayout title={title} description={description}>
@ -20,7 +22,7 @@ const { playlist, title, description } = Astro.props as Props;
]}
>
{
playlist ? (
!errorOccurred && playlist ? (
<h1 class="font-bold md:text-4xl text-3xl">
<a href={playlist.url} target="_blank" rel="noopener noreferrer">
{title}
@ -35,7 +37,7 @@ const { playlist, title, description } = Astro.props as Props;
</a>
</h1>
<div class="tabs mb-2">
<a class="tab text-base">
<a class="tab text-base" href={`/playlists/${playlistId}/snapshots`}>
<i class="fa-solid fa-calendar mr-3" />
Browse snapshots
</a>

View File

@ -9,13 +9,16 @@ export async function getPlaylistLayoutProps(Astro: Readonly<AstroGlobal>) {
let playlist: PlaylistSnapshot | null = null;
let title = '';
let description = '';
let errorOccurred = false;
try {
const githubResponse = await fetch(
`https://raw.githubusercontent.com/mackorone/spotify-playlist-archive/main/playlists/pretty/${playlistId}.json`
);
if (!githubResponse.ok) throw new Error(githubResponse.status.toString());
if (!githubResponse.ok) {
throw new Error(githubResponse.status.toString());
}
playlist = (await githubResponse.json()) as PlaylistSnapshot;
description = decode(playlist.description, { level: 'html5' });
@ -27,6 +30,7 @@ export async function getPlaylistLayoutProps(Astro: Readonly<AstroGlobal>) {
} catch (error) {
const isNotFoundError = (error as Error).message === '404';
errorOccurred = true;
title = 'Error';
description = isNotFoundError
? "This playlist hasn't been archived yet."
@ -36,5 +40,5 @@ export async function getPlaylistLayoutProps(Astro: Readonly<AstroGlobal>) {
Astro.response.statusText = description;
}
return { playlist, title, description };
return { playlist, title, description, errorOccurred };
}