diff --git a/modules/show-the-genres/components.ts b/modules/show-the-genres/components.ts index fa0f2ca..8437024 100644 --- a/modules/show-the-genres/components.ts +++ b/modules/show-the-genres/components.ts @@ -1,5 +1,9 @@ import { css, html, LitElement, PropertyValues } from "https://esm.sh/lit"; -import { customElement, property, state } from "https://esm.sh/lit/decorators.js"; +import { + customElement, + property, + state, +} from "https://esm.sh/lit/decorators.js"; import { join } from "https://esm.sh/lit/directives/join.js"; import { map } from "https://esm.sh/lit/directives/map.js"; @@ -32,7 +36,9 @@ class _GenreLink extends LitElement { } protected render() { - return html`${_.startCase(this.genre)}`; + return html`${ + _.startCase(this.genre) + }`; } } @@ -51,16 +57,19 @@ class _ArtistGenreContainer extends LitElement { accessor isSmall = true; @property() - accessor fetchGenres = () => Promise.resolve([]); + accessor fetchGenres = (_uri: string) => Promise.resolve([] as string[]); protected async willUpdate(changedProperties: PropertyValues) { if (changedProperties.has("uri") && this.uri) { - this.genres = await this.fetchGenres(); + this.genres = await this.fetchGenres(this.uri); } } protected render() { - const artistGenreLinks = map(this.genres, (genre) => html``); + const artistGenreLinks = map( + this.genres, + (genre) => html``, + ); const divider = () => html`, `; return html`
- ${this.name && html`${this.name} : `} ${join(artistGenreLinks, divider)} + ${this.name && html`${this.name} : `} ${ + join(artistGenreLinks, divider) + }
`; } } diff --git a/modules/statistics/components/status/useStatus.tsx b/modules/statistics/components/status/useStatus.tsx index 58fc5cd..31f6b88 100644 --- a/modules/statistics/components/status/useStatus.tsx +++ b/modules/statistics/components/status/useStatus.tsx @@ -5,7 +5,7 @@ export type QueryStatus = "error" | "success" | "pending"; interface StatusProps { status: QueryStatus; - error: Error; + error: Error | null; logger: Console; } @@ -21,7 +21,7 @@ export const useStatus = ({ status, error, logger }: StatusProps) => { ); } case "error": { - logger.error(error); + logger.error(error!); return ( "Past Month", @@ -34,24 +37,29 @@ const allowedDropTypes = new Array(); export const fetchTopTracks = (timeRange: SpotifyTimeRange) => spotifyApi.currentUser.topItems("tracks", timeRange, 50, 0); -const TrackRow = React.memo(({ track, index }: { track: Track; index: number; }) => { - const { usePlayContextItem } = getPlayContext({ uri: track.uri }, { featureIdentifier: "queue" }); - - return ( - - ); -}); +const TrackRow = React.memo( + ({ track, index }: { track: Track; index: number }) => { + const { usePlayContextItem } = getPlayContext({ uri: track.uri }, { + featureIdentifier: "queue", + }); + + return ( + + ); + }, + (prev, next) => prev.track.uri === next.track.uri, +); interface TracksPageContentProps { topTracks: any; @@ -67,20 +75,23 @@ const TracksPageContent = ({ topTracks }: TracksPageContentProps) => { // }); const itemsCache = { - getItems: (offset, limit) => topTracks.slice(offset, offset + limit), + getItems: (offset: number, limit: number) => + topTracks.slice(offset, offset + limit), nrValidItems: topTracks.length, - invalidateCache: () => { }, - cacheAll: () => { }, + invalidateCache: () => {}, + cacheAll: () => {}, hasItems: true, }; return ( ({ uri: track.uri })} + resolveItem={(track: any) => ({ uri: track.uri })} itemsCache={itemsCache} hasHeaderRow={true} columns={columns} - renderRow={(track: Track, index: number) => } + renderRow={(track: Track, index: number) => ( + + )} ariaLabel="Top Tracks" isCompactMode={false} columnPersistenceKey="stats-top-tracks" @@ -113,13 +124,19 @@ const TracksPage = () => { headerLeft={status === "success" && ( track.uri)} + tracks={topTracks!.map((track) => track.uri)} /> )} - headerRight={[dropdown, status !== "pending" && , settingsButton]} + headerRight={[ + dropdown, + status !== "pending" && , + settingsButton, + ]} > {Status ?? ( - + )}