cleaning up flatlist render functions

This commit is contained in:
Violet Caulfield
2025-02-18 20:48:24 -06:00
parent 5d460eb7db
commit 8d08ecc20e
9 changed files with 84 additions and 110 deletions

View File

@@ -86,21 +86,16 @@ export function AlbumScreen({
])
)}
renderItem={({ item: track, index }) => {
return (
<Track
track={track}
tracklist={tracks!}
index={index}
navigation={navigation}
queue={album}
/>
)
}}
renderItem={({ item: track, index }) =>
<Track
track={track}
tracklist={tracks!}
index={index}
navigation={navigation}
queue={album}
/>
}
ListFooterComponent={(
<YStack justifyContent="flex-start">
<XStack flex={1} marginTop={"$3"} justifyContent="flex-end">
<Text
@@ -118,8 +113,7 @@ export function AlbumScreen({
horizontal
keyExtractor={(item) => item.Id!}
data={album.ArtistItems}
renderItem={({ index, item: artist }) => {
return (
renderItem={({ index, item: artist }) =>
<Avatar
circular
item={artist}
@@ -131,9 +125,9 @@ export function AlbumScreen({
}}
subheading={artist.Name ?? "Unknown Artist"}
/>
)
}}
/>
}
/>
</YStack>
)}

View File

@@ -25,20 +25,18 @@ export default function Albums({ navigation }: AlbumsProps) : React.JSX.Element
onRefresh={refetch}
/>
}
renderItem={({ index, item: album}) => {
return (
<ItemCard
item={album}
caption={album.Name ?? "Untitled Album"}
subCaption={album.ProductionYear?.toString() ?? ""}
squared
onPress={() => {
navigation.navigate("Album", { album })
}}
width={width / 2.1}
/>
)
}}
renderItem={({ index, item: album}) =>
<ItemCard
item={album}
caption={album.Name ?? "Untitled Album"}
subCaption={album.ProductionYear?.toString() ?? ""}
squared
onPress={() => {
navigation.navigate("Album", { album })
}}
width={width / 2.1}
/>
}
/>
)
}

View File

@@ -81,22 +81,20 @@ export function ArtistScreen({
}}
data={albums}
numColumns={columns} // TODO: Make this adjustable
renderItem={({ item: album }) => {
return (
<ItemCard
caption={album.Name}
subCaption={album.ProductionYear?.toString()}
width={(width / 1.1) / columns}
squared
item={album}
onPress={() => {
navigation.navigate('Album', {
album
})
}}
/>
)
}}
renderItem={({ item: album }) =>
<ItemCard
caption={album.Name}
subCaption={album.ProductionYear?.toString()}
width={(width / 1.1) / columns}
squared
item={album}
onPress={() => {
navigation.navigate('Album', {
album
})
}}
/>
}
/>
</ScrollView>
)

View File

@@ -43,18 +43,16 @@ export default function Artists({
onRefresh={refetch}
/>
}
renderItem={({ index, item: artist}) => {
return (
<ItemCard
item={artist}
caption={artist.Name ?? "Unknown Artist"}
onPress={() => {
navigation.navigate("Artist", { artist })
}}
width={width / 2.1}
/>
)
}}
renderItem={({ index, item: artist}) =>
<ItemCard
item={artist}
caption={artist.Name ?? "Unknown Artist"}
onPress={() => {
navigation.navigate("Artist", { artist })
}}
width={width / 2.1}
/>
}
/>
)
}

View File

@@ -1,9 +1,7 @@
import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models/base-item-dto";
import React from "react";
import { FlatList, ListRenderItem } from "react-native";
import { ItemCard } from "./item-card";
import IconCard from "../helpers/icon-card";
import { BaseItemKind } from "@jellyfin/sdk/lib/generated-client/models";
import { horizontalCardLimit } from "../component.config";
interface HorizontalCardListProps {

View File

@@ -22,8 +22,7 @@ export default function Library({
contentInsetAdjustmentBehavior="automatic"
data={Categories}
numColumns={2}
renderItem={({ index, item }) => {
return (
renderItem={({ index, item }) =>
<IconCard
name={item.iconName}
caption={item.name}
@@ -33,8 +32,7 @@ export default function Library({
}}
largeIcon
/>
)
}}
}
/>
</SafeAreaView>
)

View File

@@ -177,24 +177,19 @@ export default function Playlist({
});
}}
refreshing={isPending}
renderItem={({ item: track, getIndex, drag }) => {
const index = getIndex();
return (
<Track
navigation={navigation}
track={track}
tracklist={tracks!}
index={index}
queue={playlist}
showArtwork
onLongPress={editing ? drag : undefined}
showRemove={editing}
onRemove={() => useRemoveFromPlaylist.mutate({ playlist, track, index: index! })}
/>
)
}}
renderItem={({ item: track, getIndex, drag }) =>
<Track
navigation={navigation}
track={track}
tracklist={tracks!}
index={getIndex()}
queue={playlist}
showArtwork
onLongPress={editing ? drag : undefined}
showRemove={editing}
onRemove={() => useRemoveFromPlaylist.mutate({ playlist, track, index: getIndex()! })}
/>
}
ListFooterComponent={(
<XStack justifyContent="flex-end">
<Text

View File

@@ -38,19 +38,17 @@ export default function FavoritePlaylists({ navigation }: FavoritePlaylistsProps
onRefresh={refetch}
/>
}
renderItem={({ index, item: playlist }) => {
return (
<ItemCard
item={playlist}
caption={playlist.Name ?? "Untitled Playlist"}
onPress={() => {
navigation.navigate("Playlist", { playlist })
}}
width={width / 2.1}
squared
/>
)
}}
renderItem={({ index, item: playlist }) =>
<ItemCard
item={playlist}
caption={playlist.Name ?? "Untitled Playlist"}
onPress={() => {
navigation.navigate("Playlist", { playlist })
}}
width={width / 2.1}
squared
/>
}
/>
)
}

View File

@@ -29,18 +29,15 @@ export default function TracksScreen({
onRefresh={refetch}
/>
}
renderItem={({ index, item: track}) => {
return (
<Track
navigation={navigation}
showArtwork
track={track}
tracklist={tracks?.slice(index, index + 50) ?? []}
queue="Favorite Tracks"
/>
)
}}
renderItem={({ index, item: track}) =>
<Track
navigation={navigation}
showArtwork
track={track}
tracklist={tracks?.slice(index, index + 50) ?? []}
queue="Favorite Tracks"
/>
}
/>
)
}