diff --git a/src/api/queries/playlist/index.ts b/src/api/queries/playlist/index.ts index 0fcd413f..f0498347 100644 --- a/src/api/queries/playlist/index.ts +++ b/src/api/queries/playlist/index.ts @@ -8,10 +8,15 @@ 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 { BaseItemDto, PlaylistUserPermissions, UserDto } from '@jellyfin/sdk/lib/generated-client' import { QueryKeys } from '../../../enums/query-keys' import { addPlaylistUser, getPlaylistUsers, removePlaylistUser } from './utils/users' -import { ONE_MINUTE } from '../../../constants/query-client' +import { ONE_MINUTE, queryClient } from '../../../constants/query-client' +import { User } from '@sentry/react-native' +import { triggerHaptic } from '@/src/hooks/use-haptic-feedback' +import { previous } from '@/src/hooks/player/functions/controls' +import { userEvent } from '@testing-library/react-native' +import Toast from 'react-native-toast-message' export const useUserPlaylists = () => { const api = getApi() @@ -73,8 +78,8 @@ export const usePlaylistUsers = (playlist: BaseItemDto) => { } interface addPlaylistUserMutation { - playlistId: string - userId: string + playlist: BaseItemDto + user: UserDto CanEdit: boolean } @@ -84,18 +89,53 @@ export const useAddPlaylistUser = () => { return useMutation({ //playlistId: string, userId: string, CanEdit: boolean mutationFn: (variables: addPlaylistUserMutation) => - addPlaylistUser(variables.playlistId, variables.userId, variables.CanEdit), + addPlaylistUser(variables.playlist.Id!, variables.user.Id!, variables.CanEdit), + + onSuccess: (data, variables) => { + triggerHaptic('notificationSuccess') + queryClient.setQueryData( + PlaylistUsersQueryKey(variables.playlist), + (previous: PlaylistUserPermissions[] | undefined) => { + if (previous == undefined) { + //return + return [{ userId: variables.user.Id, canEdit: true }] + } else { + return [...previous, { userId: variables.user.Id, canEdit: true }] + } + }, + ) + }, + + onError: (error, variables) => { + console.log(error) + Toast.show({ type: 'error', text1: 'Unable to add user to playlist.' }) + }, }) } interface removePlaylistUser { - playlistId: string - userId: string + playlist: BaseItemDto + user: UserDto } +//remove user as playlist collaborator export const useRemovePlaylistUser = () => { return useMutation({ mutationFn: (variables: removePlaylistUser) => - removePlaylistUser(variables.playlistId, variables.userId), + removePlaylistUser(variables.playlist.Id!, variables.user.Id!), + onSuccess: (data, variables) => { + triggerHaptic('notificationSuccess') + queryClient.setQueryData( + PlaylistUsersQueryKey(variables.playlist), + (previous: PlaylistUserPermissions[] | undefined) => { + if (previous == undefined) { + //return + return [] + } else { + return previous.filter((user) => user.UserId != variables.user.Id) + } + }, + ) + }, }) } diff --git a/src/api/queries/users/index.ts b/src/api/queries/users/index.ts index d3e3c2ec..642b2172 100644 --- a/src/api/queries/users/index.ts +++ b/src/api/queries/users/index.ts @@ -1,6 +1,6 @@ import { useQuery } from '@tanstack/react-query' import { UserQueryKey } from './keys' -import { getApi } from '../../../stores' +import { getApi, getUser } from '../../../stores' import { getUserApi } from '@jellyfin/sdk/lib/utils/api' //hook to get users on server @@ -14,11 +14,17 @@ const fetchUsers = async () => { //use api (only get api when this function is called to get users) const api = getApi() + //get owner of playlist (self) + const owner = getUser() + //check set if (!api) { throw new Error('API Instance not set') } + const usersResponse = await getUserApi(api).getUsers() + + //return users where there isn't a user with owner id in array //return users from api - return (await getUserApi(api).getUsers()).data + return usersResponse.data.filter((user) => user.Id != owner?.id) } diff --git a/src/screens/Library/add-playlist-users.tsx b/src/screens/Library/add-playlist-users.tsx index 9e732242..db1e78a9 100644 --- a/src/screens/Library/add-playlist-users.tsx +++ b/src/screens/Library/add-playlist-users.tsx @@ -1,7 +1,11 @@ import { NativeStackNavigationProp } from '@react-navigation/native-stack' import LibraryStackParamList, { LibraryAddPlaylistUsers } from './types' import { Paragraph, Text, View, XStack, YStack } from 'tamagui' -import { usePlaylistUsers } from '../../../src/api/queries/playlist' +import { + useAddPlaylistUser, + usePlaylistUsers, + useRemovePlaylistUser, +} from '../../../src/api/queries/playlist' import { useUsers } from '../../../src/api/queries/users' import ItemImage from '../../../src/components/Global/components/image' import TextTicker from 'react-native-text-ticker' @@ -23,6 +27,12 @@ export default function addPlaylistUsers({ } = usePlaylistUsers(playlist) //make this playlist an easy access variable (with const variable above) const { data: users, isPending: useUsersIsPending, refetch: refetchUseUsers } = useUsers() + //invoke mutations on icon press + //add + const addUser = useAddPlaylistUser() + //remove + const removeUser = useRemovePlaylistUser() + //get string array of all playlist user IDs const playlistUserIds = playlistUsers?.map((playlistUser) => playlistUser.UserId) ?? [] @@ -89,10 +99,27 @@ export default function addPlaylistUsers({ imageOptions={{ maxWidth: 85, maxHeight: 85, quality: 90 }} /> {user.Name ?? 'Unknown User'} - {playlistUserIds.includes(user.Id) ? ( - + {playlistUserIds.includes(user.Id) ? ( //send playlist id and user id (with bang! because it likely won't be undefined) + + removeUser.mutate({ playlist: playlist, user: user }) + } + name='account-remove' + color='$warning' + /> ) : ( - + //same stuff and canEdit as true bcs you know anyone you're sharing with + + addUser.mutate({ + playlist: playlist, + user: user, + CanEdit: true, + }) + } + name='account-plus' + color='$borderColor' + /> )} )} diff --git a/src/screens/Library/index.tsx b/src/screens/Library/index.tsx index b3370b13..2602fd4e 100644 --- a/src/screens/Library/index.tsx +++ b/src/screens/Library/index.tsx @@ -89,7 +89,7 @@ export default function LibraryScreen(): React.JSX.Element { options={{ title: 'Add Playlist Users', presentation: 'formSheet', - sheetAllowedDetents: Platform.OS === 'ios' ? 'fitToContents' : [0.5], + sheetAllowedDetents: Platform.OS === 'ios' ? 'fitToContents' : [1.0], //screen full size }} />