TIL about flatlists

This commit is contained in:
Violet Caulfield
2025-02-18 20:31:37 -06:00
parent a0066204dd
commit 6e6d8990fd
3 changed files with 54 additions and 73 deletions
+12 -13
View File
@@ -23,19 +23,18 @@ export default function Playlists({ navigation }: { navigation: NativeStackNavig
</XStack>
<FlatList horizontal
data={playlists}
renderItem={({ item: playlist }) => {
return (
<ItemCard
item={playlist}
squared
caption={playlist.Name ?? "Untitled Playlist"}
onPress={() => {
navigation.navigate('Playlist', {
playlist
})
}} />
)
}}
renderItem={({ item: playlist }) =>
<ItemCard
item={playlist}
squared
caption={playlist.Name ?? "Untitled Playlist"}
onPress={() => {
navigation.navigate('Playlist', {
playlist
})
}}
/>
}
/>
</View>
)
+14 -23
View File
@@ -16,36 +16,27 @@ export default function RecentArtists({ navigation }: { navigation: NativeStackN
<View>
<H2 marginLeft={"$2"}>Recent Artists</H2>
{ useMemo(() => {
return (
<HorizontalCardList
<HorizontalCardList
items={recentArtists}
onSeeMore={() => {
navigation.navigate("Artists", {
query: QueryKeys.RecentlyPlayedArtists
})
}}
renderItem={({ item: recentArtist}) => {
return (
<ItemCard
item={recentArtist}
caption={recentArtist.Name ?? "Unknown Artist"}
onPress={() => {
navigation.navigate('Artist',
{
artist: recentArtist,
}
)}
}>
</ItemCard>
)
}}
/>
renderItem={({ item: recentArtist}) =>
<ItemCard
item={recentArtist}
caption={recentArtist.Name ?? "Unknown Artist"}
onPress={() => {
navigation.navigate('Artist',
{
artist: recentArtist,
}
)}
}>
</ItemCard>
}/>
)
}, [
recentArtists
])}
</View>
)
}
+28 -37
View File
@@ -24,49 +24,40 @@ export default function RecentlyPlayed({
<View>
<H2 marginLeft={"$2"}>Play it again</H2>
{ useMemo(() => {
return (
<HorizontalCardList
squared
<HorizontalCardList
squared
items={recentTracks}
onSeeMore={() => {
navigation.navigate("Tracks", {
query: QueryKeys.RecentlyPlayed
})
}}
renderItem={({ index, item: recentlyPlayedTrack }) => {
return (
<ItemCard
caption={recentlyPlayedTrack.Name}
subCaption={`${recentlyPlayedTrack.Artists?.join(", ")}`}
squared
width={150}
item={recentlyPlayedTrack}
onPress={() => {
usePlayNewQueue.mutate({
track: recentlyPlayedTrack,
index: index,
tracklist: recentTracks ?? [recentlyPlayedTrack],
queue: "Recently Played",
queuingType: QueuingType.FromSelection
});
}}
onLongPress={() => {
trigger("impactMedium");
navigation.navigate("Details", {
item: recentlyPlayedTrack,
isNested: false
})
}}
/>
)
}}
/>
)
}, [
recentTracks
])}
renderItem={({ index, item: recentlyPlayedTrack }) =>
<ItemCard
caption={recentlyPlayedTrack.Name}
subCaption={`${recentlyPlayedTrack.Artists?.join(", ")}`}
squared
width={150}
item={recentlyPlayedTrack}
onPress={() => {
usePlayNewQueue.mutate({
track: recentlyPlayedTrack,
index: index,
tracklist: recentTracks ?? [recentlyPlayedTrack],
queue: "Recently Played",
queuingType: QueuingType.FromSelection
});
}}
onLongPress={() => {
trigger("impactMedium");
navigation.navigate("Details", {
item: recentlyPlayedTrack,
isNested: false
})
}}
/>
}
/>
</View>
)
}