fix

Delusoire · Jul 9, 2024 · 44d8f38 · 44d8f38
1 parent a707ae5
commit 44d8f38
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 35 deletions.
diff --git 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`<a href="#" @click=${this.openPlaylistsSearch}>${_.startCase(this.genre)}</a>`;
+		return html`<a href="#" @click=${this.openPlaylistsSearch}>${
+			_.startCase(this.genre)
+		}</a>`;
 	}
 }
 
@@ -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<this>) {
 		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`<genre-link genre=${genre} />`);
+		const artistGenreLinks = map(
+			this.genres,
+			(genre) => html`<genre-link genre=${genre} />`,
+		);
 		const divider = () => html`<span>, </span>`;
 
 		return html`<style>
@@ -69,7 +78,9 @@ class _ArtistGenreContainer extends LitElement {
                 }
             </style>
             <div className="main-entityHeader-detailsText genre-container">
-                ${this.name && html`<span>${this.name} : </span>`} ${join(artistGenreLinks, divider)}
+                ${this.name && html`<span>${this.name} : </span>`} ${
+			join(artistGenreLinks, divider)
+		}
             </div>`;
 	}
 }
diff --git 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 (
 				<Status
 					icon="error"

diff --git a/modules/statistics/pages/top_tracks.tsx b/modules/statistics/pages/top_tracks.tsx
@@ -16,7 +16,10 @@ import {
 	TracklistColumnsContextProvider,
 	TracklistRow,
 } from "/modules/stdlib/src/webpack/ReactComponents.ts";
-import { getPlayContext, useTrackListColumns } from "/modules/stdlib/src/webpack/CustomHooks.ts";
+import {
+	getPlayContext,
+	useTrackListColumns,
+} from "/modules/stdlib/src/webpack/CustomHooks.ts";
 
 const DropdownOptions = {
 	"Past Month": () => "Past Month",
@@ -34,24 +37,29 @@ const allowedDropTypes = new Array<never>();
 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 (
-		<TracklistRow
-			index={index}
-			uri={track.uri}
-			name={track.name}
-			artists={track.artists}
-			imgUrl={track.album.images.at(-1)?.url ?? DEFAULT_TRACK_IMG}
-			isExplicit={track.explicit}
-			albumOrShow={track.album}
-			duration_ms={track.duration_ms}
-			usePlayContextItem={usePlayContextItem}
-			allowedDropTypes={allowedDropTypes}
-		/>
-	);
-});
+const TrackRow = React.memo(
+	({ track, index }: { track: Track; index: number }) => {
+		const { usePlayContextItem } = getPlayContext({ uri: track.uri }, {
+			featureIdentifier: "queue",
+		});
+
+		return (
+			<TracklistRow
+				index={index}
+				uri={track.uri}
+				name={track.name}
+				artists={track.artists}
+				imgUrl={track.album.images.at(-1)?.url ?? DEFAULT_TRACK_IMG}
+				isExplicit={track.explicit}
+				albumOrShow={track.album}
+				duration_ms={track.duration_ms}
+				usePlayContextItem={usePlayContextItem}
+				allowedDropTypes={allowedDropTypes}
+			/>
+		);
+	},
+	(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 (
 		<Tracklist
-			resolveItem={(track) => ({ uri: track.uri })}
+			resolveItem={(track: any) => ({ uri: track.uri })}
 			itemsCache={itemsCache}
 			hasHeaderRow={true}
 			columns={columns}
-			renderRow={(track: Track, index: number) => <TrackRow track={track} index={index} />}
+			renderRow={(track: Track, index: number) => (
+				<TrackRow track={track} index={index} key={index} />
+			)}
 			ariaLabel="Top Tracks"
 			isCompactMode={false}
 			columnPersistenceKey="stats-top-tracks"
@@ -113,13 +124,19 @@ const TracksPage = () => {
 			headerLeft={status === "success" && (
 				<CreatePlaylistButton
 					name={`Top Songs - ${activeOption}`}
-					tracks={topTracks.map((track) => track.uri)}
+					tracks={topTracks!.map((track) => track.uri)}
 				/>
 			)}
-			headerRight={[dropdown, status !== "pending" && <RefreshButton refresh={refetch} />, settingsButton]}
+			headerRight={[
+				dropdown,
+				status !== "pending" && <RefreshButton refresh={refetch} />,
+				settingsButton,
+			]}
 		>
 			{Status ?? (
-				<TracklistColumnsContextProvider columns={["INDEX", "TITLE_AND_ARTIST", "ALBUM", "DURATION"]}>
+				<TracklistColumnsContextProvider
+					columns={["INDEX", "TITLE_AND_ARTIST", "ALBUM", "DURATION"]}
+				>
 					<TracksPageContent topTracks={topTracks} />
 				</TracklistColumnsContextProvider>
 			)}