) {
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 ?? (
-
+
)}