Add Patreon Members to Info Tab (#365)

Adds a wall of patreon members to the Info tab in Settings. Thank you all for your support!

src/api/queries/patrons.ts

@@ -0,0 +1,19 @@
+import { Api } from '@jellyfin/sdk'
+
+interface Patron {
+	fullName: string
+}
+
+export default async function fetchPatrons(api: Api | undefined): Promise<Patron[]> {
+	return new Promise((resolve, reject) => {
+		if (!api) return reject(new Error('No API instance provided'))
+
+		api.axiosInstance
+			.get('https://patrons.jellify.app')
+			.then((res) => {
+				const patrons = res.data as Patron[]
+				resolve(patrons)
+			})
+			.catch((err) => reject(err))
+	})
+}

src/components/Settings/components/info/index.tsx

@@ -3,8 +3,20 @@ import { version } from '../../../../../package.json'
 import { Text } from '../../../Global/helpers/text'
 import SettingsListGroup from '../settings-list-group'
 import { InfoTabStackNavigationProp } from './types'
+import { useQuery } from '@tanstack/react-query'
+import { QueryKeys } from '../../../../enums/query-keys'
+import { useJellifyContext } from '../../../../providers'
+import fetchPatrons from '../../../../api/queries/patrons'
+import { FlatList } from 'react-native'
 
 export default function InfoTabIndex({ navigation }: InfoTabStackNavigationProp) {
+	const { api } = useJellifyContext()
+
+	const { data: patrons } = useQuery({
+		queryKey: [QueryKeys.Patrons],
+		queryFn: () => fetchPatrons(api),
+	})
+
 	return (
 		<SafeAreaView>
 			<SettingsListGroup
@@ -16,6 +28,24 @@ export default function InfoTabIndex({ navigation }: InfoTabStackNavigationProp)
 						iconColor: '$borderColor',
 						children: <Text>Made with 💜 by Violet Caulfield</Text>,
 					},
+					{
+						title: 'Sponsored by listeners like you',
+						subTitle:
+							patrons && patrons.length > 1
+								? `${patrons.length.toString()} patrons`
+								: patrons?.length === 1
+									? '1 patron'
+									: '0 patrons',
+						iconName: 'heart',
+						iconColor: '$primary',
+						children: (
+							<FlatList
+								data={patrons}
+								numColumns={2}
+								renderItem={({ item }) => <Text>{item.fullName}</Text>}
+							/>
+						),
+					},
 				]}
 			/>
 		</SafeAreaView>

src/enums/query-keys.ts

@@ -79,4 +79,5 @@ export enum QueryKeys {
 	AllTracks = 'AllTracks',
 	AllAlbums = 'AllAlbums',
 	StorageInUse = 'StorageInUse',
+	Patrons = 'Patrons',
 }