From 8ac1323cdd4c6e996c7fb9ccc919d3aa97b31418 Mon Sep 17 00:00:00 2001 From: Leithen Crider Date: Tue, 26 Sep 2023 12:10:45 -0600 Subject: [PATCH] Convert ky to fetch --- .../[year]/[month]/[day]/layout.tsx | 15 ++-- src/app/(main)/(home)/[artistSlug]/page.tsx | 13 ++-- .../recently-played/RecentlyPlayed.tsx | 4 +- src/app/queries.tsx | 18 ++--- src/components/ShowsColumn.tsx | 6 +- src/components/SongsColumn.tsx | 77 ++++++++++--------- src/components/YearsColumn.tsx | 20 ++--- 7 files changed, 74 insertions(+), 79 deletions(-) diff --git a/src/app/(main)/(home)/[artistSlug]/[year]/[month]/[day]/layout.tsx b/src/app/(main)/(home)/[artistSlug]/[year]/[month]/[day]/layout.tsx index ea6e092..4502df4 100644 --- a/src/app/(main)/(home)/[artistSlug]/[year]/[month]/[day]/layout.tsx +++ b/src/app/(main)/(home)/[artistSlug]/[year]/[month]/[day]/layout.tsx @@ -5,7 +5,6 @@ import TapesColumn from '@/components/TapesColumn'; import { API_DOMAIN } from '@/lib/constants'; import { createShowDate } from '@/lib/utils'; import { Tape } from '@/types'; -import ky from 'ky-universal'; import { notFound } from 'next/navigation'; import React from 'react'; @@ -13,14 +12,16 @@ export const fetchShow = async ( slug?: string, year?: string, displayDate?: string -): Promise> => { +): Promise | undefined> => { if (!slug || !year || !displayDate) return { sources: [] }; - const parsed = (await ky(`${API_DOMAIN}/api/v2/artists/${slug}/years/${year}/${displayDate}`, { - cache: 'no-cache', - }).json()) as Tape; - - return parsed; + try { + const res = await fetch(`${API_DOMAIN}/api/v2/artists/${slug}/years/${year}/${displayDate}`); + const parsed = await res.json() as Tape; + return parsed; + } catch (err) { + console.error('fetch show error', err); + } }; export default async function Page({ params, children }: MainLayoutProps) { diff --git a/src/app/(main)/(home)/[artistSlug]/page.tsx b/src/app/(main)/(home)/[artistSlug]/page.tsx index 7d83341..780a5e9 100644 --- a/src/app/(main)/(home)/[artistSlug]/page.tsx +++ b/src/app/(main)/(home)/[artistSlug]/page.tsx @@ -4,7 +4,6 @@ import SongsColumn from '@/components/SongsColumn'; import TapesColumn from '@/components/TapesColumn'; import { API_DOMAIN } from '@/lib/constants'; import { Tape } from '@/types'; -import ky from 'ky-universal'; import { notFound } from 'next/navigation'; import { useIsMobile } from '../page'; import React from 'react'; @@ -12,11 +11,13 @@ import React from 'react'; export const fetchRandomShow = async (slug?: string): Promise => { if (!slug) return undefined; - const parsed: Tape = await ky(`${API_DOMAIN}/api/v2/artists/${slug}/shows/random`, { - cache: 'no-cache', - }).json(); - - return parsed; + try { + const res = await fetch(`${API_DOMAIN}/api/v2/artists/${slug}/shows/random`); + const parsed = await res.json(); + return parsed; + } catch (err) { + console.error('fetch random show error', err); + } }; export default async function Page({ params }) { diff --git a/src/app/(main)/(secondary)/recently-played/RecentlyPlayed.tsx b/src/app/(main)/(secondary)/recently-played/RecentlyPlayed.tsx index c1fe040..be28189 100644 --- a/src/app/(main)/(secondary)/recently-played/RecentlyPlayed.tsx +++ b/src/app/(main)/(secondary)/recently-played/RecentlyPlayed.tsx @@ -3,7 +3,6 @@ import { QueryClient, useQuery, useQueryClient } from '@tanstack/react-query'; import LiveTrack from '../../../../components/LiveTrack'; import { API_DOMAIN } from '../../../../lib/constants'; -import ky from 'ky'; function uniqBy(a: any[], key: (item: any) => boolean) { const seen = new Set(); @@ -31,7 +30,8 @@ const fetchRecentlyPlayed = async (queryClient: QueryClient) => { if (lastSeenId) { paramsStr = `?lastSeenId=${lastSeenId}`; } - const parsed = await ky(`${API_DOMAIN}/api/v2/live/history${paramsStr}`).json(); + const res = await fetch(`${API_DOMAIN}/api/v2/live/history${paramsStr}`) + const parsed = await res.json(); if (Array.isArray(parsed)) { return parsed.concat(cache ?? []).slice(0, 100); diff --git a/src/app/queries.tsx b/src/app/queries.tsx index 3ecdee6..331991c 100644 --- a/src/app/queries.tsx +++ b/src/app/queries.tsx @@ -1,15 +1,13 @@ -import ky from 'ky-universal'; import { API_DOMAIN } from '../lib/constants'; import { Artist } from '@/types'; export const fetchArtists = async (): Promise => { - const parsed = await ky(`${API_DOMAIN}/api/v2/artists`, { - next: { revalidate: 60 * 5 }, // leaving for now, should revisit cache (I dont think this works) - }) - .json() - .catch((err) => { - console.error('artists fetch error', err); - }); - - return (parsed as Artist[]) ?? []; + try { + const res = await fetch(`${API_DOMAIN}/api/v2/artists`); + const parsed = await res.json(); + return parsed as Artist[]; + } catch (err) { + console.error('artists fetch error', err); + return []; + } }; diff --git a/src/components/ShowsColumn.tsx b/src/components/ShowsColumn.tsx index 6a8ce95..09a6a4d 100644 --- a/src/components/ShowsColumn.tsx +++ b/src/components/ShowsColumn.tsx @@ -2,7 +2,6 @@ import sortActiveBands from '../lib/sortActiveBands'; import { durationToHHMMSS, removeLeadingZero, simplePluralize, splitShowDate } from '../lib/utils'; import { RawParams } from '@/app/(main)/(home)/layout'; -import ky from 'ky-universal'; import React from 'react'; import { API_DOMAIN } from '../lib/constants'; import { ArtistShows } from '../types'; @@ -15,9 +14,8 @@ import Tag from './Tag'; const fetchShows = async (slug?: string, year?: string): Promise => { if (!slug || !year) return undefined; - const parsed: ArtistShows = await ky(`${API_DOMAIN}/api/v2/artists/${slug}/years/${year}`, { - cache: 'no-cache', - }).json(); + const res = await fetch(`${API_DOMAIN}/api/v2/artists/${slug}/years/${year}`); + const parsed: ArtistShows = await res.json(); return parsed; }; diff --git a/src/components/SongsColumn.tsx b/src/components/SongsColumn.tsx index 9919326..e47716f 100644 --- a/src/components/SongsColumn.tsx +++ b/src/components/SongsColumn.tsx @@ -83,48 +83,49 @@ const SongsColumn = (props: Props) => { loadingAmount={12} > {activeSourceObj && - activeSourceObj.sets?.map((set, setIdx) => - set.tracks?.map((track, trackIdx) => { - const trackIsActive = track.id === activePlaybackTrackId && isActiveSourcePlaying; + activeSourceObj.sets?.map( + (set, setIdx) => + set.tracks?.map((track, trackIdx) => { + const trackIsActive = track.id === activePlaybackTrackId && isActiveSourcePlaying; - const trackMetadata = isActiveSourcePlaying - ? gaplessTracksMetadata.find( - (gaplessTrack) => - gaplessTrack.trackMetadata && gaplessTrack.trackMetadata.trackId === track.id - ) - : null; + const trackMetadata = isActiveSourcePlaying + ? gaplessTracksMetadata.find( + (gaplessTrack) => + gaplessTrack.trackMetadata && gaplessTrack.trackMetadata.trackId === track.id + ) + : null; - return ( -
- {trackIdx === 0 && Number(activeSourceObj.sets?.length) > 1 && ( - - {set.name || `Set ${setIdx + 1}`}
{getSetTime(set)}
- - )} - -
-
{track.title}
- {track.duration && ( -
- {durationToHHMMSS(track.duration)} -
- )} -
-
+ return ( +
+ {trackIdx === 0 && Number(activeSourceObj.sets?.length) > 1 && ( + + {set.name || `Set ${setIdx + 1}`}
{getSetTime(set)}
+ + )} +
- {trackMetadata && trackMetadata.webAudioLoadingState !== 'NONE' - ? trackMetadata.webAudioLoadingState - : ''} +
{track.title}
+ {track.duration && ( +
+ {durationToHHMMSS(track.duration)} +
+ )} +
+
+
+ {trackMetadata && trackMetadata.webAudioLoadingState !== 'NONE' + ? trackMetadata.webAudioLoadingState + : ''} +
-
- -
- ); - }) + +
+ ); + }) )} {activeSourceObj && FIN} {activeSourceObj && diff --git a/src/components/YearsColumn.tsx b/src/components/YearsColumn.tsx index 7a15648..ddfbe67 100644 --- a/src/components/YearsColumn.tsx +++ b/src/components/YearsColumn.tsx @@ -3,7 +3,6 @@ import { simplePluralize } from '../lib/utils'; import { RawParams } from '@/app/(main)/(home)/layout'; import { fetchArtists } from '@/app/queries'; -import ky from 'ky-universal'; import { API_DOMAIN } from '../lib/constants'; import { Year } from '../types'; import Column from './Column'; @@ -13,17 +12,14 @@ import { notFound } from 'next/navigation'; const fetchYears = async (slug?: string): Promise => { if (!slug) return []; - const parsed = await ky(`${API_DOMAIN}/api/v2/artists/${slug}/years`, { - cache: 'no-cache', - }) - .json() - .catch(() => { - notFound(); - - return [] as Year[]; - }); - - return parsed ?? []; + try { + const res = await fetch(`${API_DOMAIN}/api/v2/artists/${slug}/years`); + const parsed = await res.json(); + return parsed; + } catch (err) { + console.error('fetch years error', err); + notFound(); + } }; const YearsColumn = async ({ artistSlug }: Pick) => {