Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | 19x 19x 19x 19x | import { CSSProperties, ReactElement } from "react";
import { VirtualizedData } from "./VirtualizedData";
import PlaylistText from "components/PlaylistText";
import { useAuth } from "hooks";
import { getUserPlaylists } from "utils/spotifyCalls";
export function PlaylistsList(): ReactElement {
const { user } = useAuth();
const fetchPlaylists = async (offset: number) => {
try {
const response = await getUserPlaylists(offset);
return {
items: response?.items || [],
total: response?.total || 0,
};
} catch (error) {
console.error("Error loading playlists:", error);
return { items: [], total: 0 };
}
};
const getPlaylistId = (playlist: SpotifyApi.PlaylistObjectSimplified) => {
return playlist?.id || "";
};
const renderPlaylistItem = ({
key,
item: playlist,
style,
}: {
key: string;
item: SpotifyApi.PlaylistObjectSimplified;
style: CSSProperties;
}) => (
<PlaylistText
key={key}
style={style}
id={playlist?.id ?? ""}
uri={playlist?.uri ?? ""}
name={playlist?.name ?? ""}
type={"playlist"}
/>
);
const isItemLoaded = (playlist?: SpotifyApi.PlaylistObjectSimplified) => {
return !!playlist?.uri;
};
return (
<VirtualizedData
type="playlist"
itemHeight={26}
fetchItems={fetchPlaylists}
getItemId={getPlaylistId}
id={user?.uri}
renderItem={renderPlaylistItem}
isItemLoaded={isItemLoaded}
emptyItem={
{
name: "",
id: "",
uri: "",
tracks: { total: 0 },
} as SpotifyApi.PlaylistObjectSimplified
}
/>
);
}
|