bvandeusen
6ab1fef07e
Heart icon reading from createLikedIdsQuery; click toggles via likeEntity/unlikeEntity. Click stops propagation so it can nest inside TrackRow's role=button div without triggering row activation.
44 lines
1.1 KiB
Svelte
44 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import { useQueryClient } from '@tanstack/svelte-query';
|
|
import { createLikedIdsQuery, likeEntity, unlikeEntity, type EntityKind } from '$lib/api/likes';
|
|
|
|
let {
|
|
entityType,
|
|
entityId
|
|
}: { entityType: EntityKind; entityId: string } = $props();
|
|
|
|
const SET_KEY = {
|
|
track: 'track_ids',
|
|
album: 'album_ids',
|
|
artist: 'artist_ids'
|
|
} as const;
|
|
|
|
const queryClient = useQueryClient();
|
|
const queryStore = $derived(createLikedIdsQuery());
|
|
const query = $derived($queryStore);
|
|
|
|
const liked = $derived.by(() => {
|
|
const data = query?.data;
|
|
if (!data) return false;
|
|
return data[SET_KEY[entityType]].includes(entityId);
|
|
});
|
|
|
|
async function onClick(e: MouseEvent) {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
if (liked) {
|
|
await unlikeEntity(queryClient, entityType, entityId);
|
|
} else {
|
|
await likeEntity(queryClient, entityType, entityId);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<button
|
|
type="button"
|
|
aria-label={liked ? 'Unlike' : 'Like'}
|
|
aria-pressed={liked}
|
|
onclick={onClick}
|
|
class="rounded p-1 {liked ? 'text-accent' : 'text-text-secondary hover:text-text-primary'}"
|
|
>{liked ? '♥' : '♡'}</button>
|