Getting albums retrieved on artist page

api/queries/artist.ts

@@ -0,0 +1,48 @@
+import { useQuery } from "@tanstack/react-query"
+import { QueryKeys } from "../../enums/query-keys"
+import { Api } from "@jellyfin/sdk"
+import { getItemsApi } from "@jellyfin/sdk/lib/utils/api"
+import { BaseItemKind, ItemSortBy, SortOrder } from "@jellyfin/sdk/lib/generated-client/models"
+
+export const useArtistAlbums = (artistId: string, api: Api) => useQuery({
+    queryKey: [QueryKeys.ArtistAlbums, artistId, api],
+    queryFn: ({ queryKey }) => {
+        return getItemsApi(queryKey[2] as Api).getItems({
+            includeItemTypes: [BaseItemKind.MusicAlbum],
+            recursive: true,
+            excludeItemIds: [queryKey[1] as string],
+            sortBy: [
+                ItemSortBy.PremiereDate,
+                ItemSortBy.ProductionYear,
+                ItemSortBy.SortName
+            ],
+            sortOrder: [SortOrder.Descending],
+            artistIds: [queryKey[1] as string],
+        })
+        .then((response) => {
+            return response.data.Items ? response.data.Items! : [];
+        })
+    }
+})
+
+
+export const useArtistFeaturedOnAlbums = (artistId: string, api: Api) => useQuery({
+    queryKey: [QueryKeys.ArtistFeaturedAlbums, artistId, api],
+    queryFn: ({ queryKey }) => {
+        return getItemsApi(queryKey[2] as Api).getItems({
+            includeItemTypes: [BaseItemKind.MusicAlbum],
+            recursive: true,
+            excludeItemIds: [queryKey[1] as string],
+            sortBy: [
+                ItemSortBy.PremiereDate,
+                ItemSortBy.ProductionYear,
+                ItemSortBy.SortName
+            ],
+            sortOrder: [ SortOrder.Descending ],
+            contributingArtistIds: [queryKey[1] as string]
+        })
+        .then((response) => {
+            return response.data.Items ? response.data.Items! : [];
+        })
+    }
+})

components/Artist/component.tsx

@@ -1,12 +1,27 @@
 import { ScrollView } from "tamagui";
-import Avatar from "../helpers/avatar";
+import Avatar from "../Global/avatar";
 import { SafeAreaView } from "react-native-safe-area-context";
+import { useArtistAlbums } from "../../api/queries/artist";
+import { useApiClientContext } from "../jellyfin-api-provider";
 
 export default function Artist({ artistId, artistName }: { artistId: string, artistName: string  }): React.JSX.Element {
+
+    const { apiClient } = useApiClientContext();
+
+    const { data: albums } = useArtistAlbums(artistId, apiClient!);
+
     return (
         <SafeAreaView>
-            <ScrollView>
+            <ScrollView contentInsetAdjustmentBehavior="automatic">
                 <Avatar itemId={artistId} />
+
+                { albums && albums.map((album) => {
+                    return (
+                        <Avatar itemId={album.Id!}>
+                            { album.Name ?? "Untitled Album" }
+                        </Avatar>
+                    )
+                }) }
             </ScrollView>
         </SafeAreaView>
     )

components/Discover/component.tsx

@@ -0,0 +1,12 @@
+import { SafeAreaView } from "react-native-safe-area-context";
+import { ScrollView } from "tamagui";
+
+export function Discover(): React.JSX.Element {
+    return (
+        <SafeAreaView>
+            <ScrollView>
+                
+            </ScrollView>
+        </SafeAreaView>
+    )
+}

components/Home/component.tsx

@@ -1,6 +1,6 @@
 import { ScrollView, YStack } from "tamagui";
 import _ from "lodash";
-import { H2, Text } from "../helpers/text";
+import { H2, Text } from "../Global/text";
 import RecentlyPlayed from "./helpers/recently-played";
 import { useApiClientContext } from "../jellyfin-api-provider";
 import RecentArtists from "./helpers/recent-artists";
@@ -40,7 +40,7 @@ export default function Home(): React.JSX.Element {
                         title: route.params.artistName,
                         headerLargeTitle: true,
                         headerLargeTitleStyle: {
-                            fontFamily: 'Aileron-Black'
+                            fontFamily: 'Aileron-Bold'
                         }
                     })}
                 />

components/Home/helpers/recent-artists.tsx

@@ -3,9 +3,9 @@ import { ScrollView, View, YStack } from "tamagui";
 import { useApiClientContext } from "../../jellyfin-api-provider";
 import { Colors } from "../../../enums/colors";
 import { useHomeContext } from "../provider";
-import { H2, Text } from "../../helpers/text";
+import { H2, Text } from "../../Global/text";
 import { ProvidedHomeProps } from "../types";
-import Avatar from "../../helpers/avatar";
+import Avatar from "../../Global/avatar";
 
 export default function RecentArtists({ navigation }: ProvidedHomeProps): React.JSX.Element {
 

components/Home/helpers/recently-played.tsx

@@ -3,7 +3,7 @@ import { Avatar, ScrollView, View, YStack } from "tamagui";
 import { useApiClientContext } from "../../jellyfin-api-provider";
 import { Colors } from "../../../enums/colors";
 import { useHomeContext } from "../provider";
-import { H2, Text } from "../../helpers/text";
+import { H2, Text } from "../../Global/text";
 
 export default function RecentlyPlayed(): React.JSX.Element {
 

components/Login/helpers/server-address.tsx

@@ -5,10 +5,10 @@ import { MMKVStorageKeys } from "../../../enums/mmkv-storage-keys";
 import { JellifyServer } from "../../../types/JellifyServer";
 import { useApiClientContext } from "../../jellyfin-api-provider";
 import { getTokens, Spacer, Spinner, View, XStack, ZStack } from "tamagui";
-import { SwitchWithLabel } from "../../helpers/switch-with-label";
-import { H1 } from "../../helpers/text";
-import Input from "../../helpers/input";
-import Button from "../../helpers/button";
+import { SwitchWithLabel } from "../../Global/switch-with-label";
+import { H1 } from "../../Global/text";
+import Input from "../../Global/input";
+import Button from "../../Global/button";
 import { http, https } from "../utils/constants";
 import { storage } from "../../../constants/storage";
 import { client } from "../../../api/client";

components/Login/helpers/server-authentication.tsx

@@ -5,9 +5,9 @@ import _ from "lodash";
 import { JellyfinCredentials } from "../../../api/types/jellyfin-credentials";
 import { View, YStack } from "tamagui";
 import { useAuthenticationContext } from "../provider";
-import { H1 } from "../../helpers/text";
-import Button from "../../helpers/button";
-import Input from "../../helpers/input";
+import { H1 } from "../../Global/text";
+import Button from "../../Global/button";
+import Input from "../../Global/input";
 
 export default function ServerAuthentication(): React.JSX.Element {
     const { username, setUsername } = useAuthenticationContext();

components/Login/helpers/server-library.tsx

@@ -3,8 +3,8 @@ import React, { useEffect } from "react";
 import { useApiClientContext } from "../../jellyfin-api-provider";
 import { Spinner, Text, ToggleGroup, View } from "tamagui";
 import { useAuthenticationContext } from "../provider";
-import { H1, Label } from "../../helpers/text";
-import Button from "../../helpers/button";
+import { H1, Label } from "../../Global/text";
+import Button from "../../Global/button";
 import _ from "lodash";
 import { Api } from "@jellyfin/sdk";
 import { fetchMusicLibraries, fetchPlaylistLibrary } from "../../../api/libraries";

components/Settings/helpers/sign-out.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Button from "../../helpers/button";
+import Button from "../../Global/button";
 import { useApiClientContext } from "../../jellyfin-api-provider";
 
 export default function SignOut(): React.JSX.Element {

components/icons/server-icon.tsx

@@ -1,8 +0,0 @@
-import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-
-export default function ServerIcon(): React.JSX.Element {
-
-    return (
-        <Icon name="server-network" size={30}></Icon>
-    )
-}

components/tabs.tsx

@@ -7,6 +7,7 @@ import { Colors } from "../enums/colors";
 import Search from "./Search/component";
 import Library from "./Library/component";
 import Settings from "./Settings/component";
+import { Discover } from "./Discover/component";
 
 const Tab = createBottomTabNavigator();
 
@@ -51,6 +52,16 @@ export function Tabs() {
                 }}
             />
 
+            <Tab.Screen
+                name="Discover"
+                component={Discover}
+                options={{
+                    tabBarIcon: ({ color, size }) => (
+                        <MaterialCommunityIcons name="music-box-multiple-outline" color={color} size={size} />
+                    )
+                }}
+            />
+
             <Tab.Screen
                 name="Settings"
                 component={Settings}

enums/query-keys.ts

@@ -23,4 +23,5 @@ export enum QueryKeys {
     Playlist = "Playlist",
     RecentlyPlayed = "RecentlyPlayed",
     RecentlyPlayedArtists = "RecentlyPlayedArtists",
+    ArtistFeaturedAlbums = "ArtistFeaturedAlbums",
 }