adding image queries and adding card component + usage

api/queries/functions/images.ts

@@ -0,0 +1,12 @@
+import { Api } from "@jellyfin/sdk/lib/api"
+import { ImageType } from "@jellyfin/sdk/lib/generated-client/models"
+import { getImageApi } from "@jellyfin/sdk/lib/utils/api"
+
+export function fetchItemImage(api: Api, itemId: string, imageType?: ImageType) {
+
+        return getImageApi(api)
+        .getItemImage({
+            imageType: imageType ? imageType : ImageType.Primary,
+            itemId
+        })
+}

api/queries/image.ts

@@ -0,0 +1,9 @@
+import { useQuery } from "@tanstack/react-query";
+import { QueryKeys } from "../../enums/query-keys";
+import { Api } from "@jellyfin/sdk";
+import { fetchItemImage } from "./functions/images";
+
+export const useItemImage = (api: Api, itemId: string) => useQuery({
+    queryKey: [QueryKeys.ItemImage, api, itemId],
+    queryFn: ({ queryKey }) => fetchItemImage(queryKey[1] as Api, queryKey[2] as string)
+});

components/Global/card.tsx

@@ -0,0 +1,50 @@
+import { ReactNode } from "react";
+import type { CardProps as TamaguiCardProps } from "tamagui"
+import { H2, Image, Paragraph, Card as TamaguiCard } from "tamagui";
+import { useItemImage } from "../../api/queries/image";
+import { useApiClientContext } from "../jellyfin-api-provider";
+
+const cardDimensions = {
+    width: 300,
+    height: 300
+}
+
+interface CardProps extends TamaguiCardProps {
+    children?: string;
+    itemId: string;
+    footer?: ReactNode;
+}
+
+export function Card(props: CardProps) {
+
+    const { apiClient } = useApiClientContext();
+    const { data, isPending } = useItemImage(apiClient!, props.itemId)
+
+    return (
+      <TamaguiCard elevate size="$4" bordered {...props}>
+        <TamaguiCard.Header padded>
+          { props.children && (
+              <H2>{ props.children }</H2>
+          )}
+        </TamaguiCard.Header>
+        <TamaguiCard.Footer padded>
+          { props.footer && (
+            props.footer
+          )}
+        </TamaguiCard.Footer>
+        <TamaguiCard.Background>
+          { data && (
+
+              <Image
+              alignSelf="center"
+              source={{
+                  uri: data?.data,
+                  ...cardDimensions
+                }}
+                />
+        )}
+        </TamaguiCard.Background>
+      </TamaguiCard>
+    )
+  }
+  

components/Home/helpers/recent-artists.tsx

@@ -1,15 +1,13 @@
 import React, { useEffect } from "react";
-import { ScrollView, View, YStack } from "tamagui";
-import { useApiClientContext } from "../../jellyfin-api-provider";
-import { Colors } from "../../../enums/colors";
+import { View } from "tamagui";
 import { useHomeContext } from "../provider";
-import { H2, Text } from "../../Global/text";
+import { H2 } from "../../Global/text";
 import { ProvidedHomeProps } from "../types";
-import Avatar from "../../Global/avatar";
+import { FlatList } from "react-native";
+import { Card } from "../../Global/card";
 
 export default function RecentArtists({ navigation }: ProvidedHomeProps): React.JSX.Element {
 
-    const { server } = useApiClientContext();
     const { recentArtists } = useHomeContext();
 
     useEffect(() => {
@@ -21,24 +19,25 @@ export default function RecentArtists({ navigation }: ProvidedHomeProps): React.
     return (
         <View>
             <H2>Recent Artists</H2>
-            <ScrollView horizontal>
-                { recentArtists && recentArtists.map((recentArtist) => {
+            <FlatList horizontal
+                data={recentArtists}
+                renderItem={({ item: recentArtist}) => {
                     return (
-                        <Avatar 
-                            circular
-                            itemId={recentArtist.Id!} 
-                            onPress={() => 
+                        <Card 
+                            itemId={recentArtist.Id!}
+                            onPress={() => {
                                 navigation.navigate('Artist', 
                                     { 
                                         artistId: recentArtist.Id!, 
                                         artistName: recentArtist.Name ?? "Unknown Artist" 
                                     }
-                                )} 
-                            subheading={recentArtist.Name ?? "Unknown Artist"}
-                        />
+                                )}
+                            }>
+                            {recentArtist.Name ?? "Unknown Artist"}
+                        </Card>
                     )
-                })}
-            </ScrollView>
+                }}
+            />
         </View>
     )
 }

enums/query-keys.ts

@@ -5,7 +5,7 @@ export enum QueryKeys {
     ArtistAlbums = "ARTIST_ALBUMS",
     ArtistById = "ARTIST_BY_ID",
     Credentials = "CREDENTIALS",
-    ImageByItemId = "IMAGE_BY_ITEM_ID",
+    ItemImage = "IMAGE_BY_ITEM_ID",
     Libraries = "LIBRARIES",
     Pause = "PAUSE",
     Play = "PLAY",