starting to build hooks and screen for collaborative playlist feature

src/api/queries/playlist/index.ts

@@ -1,10 +1,17 @@
-import { PlaylistTracksQueryKey, PublicPlaylistsQueryKey, UserPlaylistsQueryKey } from './keys'
-import { useInfiniteQuery } from '@tanstack/react-query'
+import {
+	PlaylistTracksQueryKey,
+	PlaylistUsersQueryKey,
+	PublicPlaylistsQueryKey,
+	UserPlaylistsQueryKey,
+} from './keys'
+import { useInfiniteQuery, useMutation, useQuery } from '@tanstack/react-query'
 import { fetchUserPlaylists, fetchPublicPlaylists, fetchPlaylistTracks } from './utils'
 import { ApiLimits } from '../../../configs/query.config'
 import { getApi, getUser, useJellifyLibrary } from '../../../stores'
 import { BaseItemDto } from '@jellyfin/sdk/lib/generated-client'
 import { QueryKeys } from '../../../enums/query-keys'
+import { addPlaylistUser, getPlaylistUsers, removePlaylistUser } from './utils/users'
+import { ONE_MINUTE } from '@/src/constants/query-client'
 
 export const useUserPlaylists = () => {
 	const api = getApi()
@@ -53,3 +60,42 @@ export const usePublicPlaylists = () => {
 		initialPageParam: 0,
 	})
 }
+
+//hooks - used in react components
+//invoke user functions (getPlaylistUsers, etc)
+//following react convention
+export const usePlaylistUsers = (playlist: BaseItemDto) => {
+	return useQuery({
+		queryKey: PlaylistUsersQueryKey(playlist),
+		queryFn: () => getPlaylistUsers(playlist.Id!),
+		staleTime: ONE_MINUTE * 15, //refreshes every 15mins
+	})
+}
+
+interface addPlaylistUserMutation {
+	playlistId: string
+	userId: string
+	CanEdit: boolean
+}
+
+//mutations not queries for add/remove
+//no params
+export const useAddPlaylistUser = () => {
+	return useMutation({
+		//playlistId: string, userId: string, CanEdit: boolean
+		mutationFn: (variables: addPlaylistUserMutation) =>
+			addPlaylistUser(variables.playlistId, variables.userId, variables.CanEdit),
+	})
+}
+
+interface removePlaylistUser {
+	playlistId: string
+	userId: string
+}
+
+export const useRemovePlaylistUser = () => {
+	return useMutation({
+		mutationFn: (variables: removePlaylistUser) =>
+			removePlaylistUser(variables.playlistId, variables.userId),
+	})
+}

src/api/queries/playlist/keys.ts

@@ -5,6 +5,7 @@ import { BaseItemDto } from '@jellyfin/sdk/lib/generated-client'
 enum PlaylistQueryKeys {
 	UserPlaylists,
 	PublicPlaylists,
+	PlaylistUsers,
 }
 
 export const UserPlaylistsQueryKey = (library: JellifyLibrary | undefined) => [
@@ -22,3 +23,8 @@ export const PublicPlaylistsQueryKey = (library: JellifyLibrary | undefined) =>
 	PlaylistQueryKeys.PublicPlaylists,
 	library?.playlistLibraryId,
 ]
+
+export const PlaylistUsersQueryKey = (playlist: BaseItemDto) => [
+	PlaylistQueryKeys.PlaylistUsers,
+	playlist.Id,
+]

src/api/queries/playlist/utils/users.ts

@@ -4,7 +4,7 @@ import { getApi, getUser } from '@/src/stores'
 import { getPlaylistsApi } from '@jellyfin/sdk/lib/utils/api'
 
 //get playlist users
-async function getPlaylistUsers(playlistId: string) {
+export async function getPlaylistUsers(playlistId: string) {
 	//use api
 	const api = getApi()
 
@@ -19,7 +19,7 @@ async function getPlaylistUsers(playlistId: string) {
 
 //also need user id for add and remove user functions
 
-async function addPlaylistUser(playlistId: string, userId: string, CanEdit: boolean) {
+export async function addPlaylistUser(playlistId: string, userId: string, CanEdit: boolean) {
 	//use api
 	const api = getApi()
 	const playlist = getPlaylistsApi(api!)
@@ -38,7 +38,7 @@ async function addPlaylistUser(playlistId: string, userId: string, CanEdit: bool
 	})
 }
 
-async function removePlaylistUser(playlistId: string, userId: string) {
+export async function removePlaylistUser(playlistId: string, userId: string) {
 	//use api
 	const api = getApi()
 	const playlist = getPlaylistsApi(api!)

src/screens/Library/add-playlist-users.tsx

@@ -0,0 +1,14 @@
+import { NativeStackNavigationProp } from '@react-navigation/native-stack'
+import LibraryStackParamList, { LibraryAddPlaylistUsers } from './types'
+import { View } from 'tamagui'
+import { usePlaylistUsers } from '@/src/api/queries/playlist'
+
+//screen in react native
+export default function addPlaylistUsers({
+	navigation,
+	route,
+}: LibraryAddPlaylistUsers): React.JSX.Element {
+	const result = usePlaylistUsers(route.params.playlist)
+	//return component here
+	return <View></View>
+}

src/screens/Library/index.tsx

@@ -11,6 +11,7 @@ import InstantMix from '../../components/InstantMix/component'
 import { getItemName } from '../../utils/formatting/item-names'
 import { Platform } from 'react-native'
 import TracksScreen from '../Tracks'
+import addPlaylistUsers from './add-playlist-users'
 
 const LibraryStack = createNativeStackNavigator<LibraryStackParamList>()
 
@@ -82,6 +83,15 @@ export default function LibraryScreen(): React.JSX.Element {
 					sheetAllowedDetents: Platform.OS === 'ios' ? 'fitToContents' : [0.5],
 				}}
 			/>
+			<LibraryStack.Screen
+				name='AddPlaylistUsers'
+				component={addPlaylistUsers}
+				options={{
+					title: 'Add Playlist Users',
+					presentation: 'formSheet',
+					sheetAllowedDetents: Platform.OS === 'ios' ? 'fitToContents' : [0.5],
+				}}
+			/>
 
 			<LibraryStack.Screen name='Tracks' component={TracksScreen} />
 		</LibraryStack.Navigator>

src/screens/Library/types.ts

@@ -10,6 +10,9 @@ type LibraryStackParamList = BaseStackParamList & {
 	DeletePlaylist: {
 		playlist: BaseItemDto
 	}
+	AddPlaylistUsers: {
+		playlist: BaseItemDto
+	}
 }
 
 export default LibraryStackParamList
@@ -23,3 +26,7 @@ export type LibraryDeletePlaylistProps = NativeStackScreenProps<
 	LibraryStackParamList,
 	'DeletePlaylist'
 >
+export type LibraryAddPlaylistUsers = NativeStackScreenProps<
+	LibraryStackParamList,
+	'AddPlaylistUsers'
+>