feat: add ability to like a playlist

kujo205 · Jan 28, 2025 · d860962 · d860962
1 parent 0384f41
commit d860962
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 14 deletions.
diff --git a/src/features/community/components/PlaylistCard.svelte b/src/features/community/components/PlaylistCard.svelte
@@ -5,6 +5,7 @@
     name: string | null;
     user_name: string | null;
     liked: boolean;
+    onAddToLiked?: (id?: string) => void;
   }
 </script>
 
@@ -14,7 +15,7 @@
   import { MousePointerClick, UserRound, Heart } from 'lucide-svelte';
   import { Button } from '$comp/ui/button';
 
-  const { id, link, name, user_name }: PlaylistCardProps = $props();
+  const { id, link, name, user_name, onAddToLiked, liked }: PlaylistCardProps = $props();
 </script>
 
 <Card.Root class="flex h-36 min-w-80 max-w-[520px] overflow-hidden">
@@ -36,12 +37,17 @@
       </div>
 
       <Button
-        class="px-3"
         onclick={() => {
-          alert('not implemented');
+          if (onAddToLiked) {
+            console.log('adding to liked songs');
+            onAddToLiked(id);
+          }
         }}
-        variant="outline"><Heart /></Button
+        variant="outline"
       >
+        {liked ? 'Liked' : 'Like'}
+        <Heart fill={liked ? 'red' : 'none'} />
+      </Button>
     </div>
 
     <div class="flex justify-between">

diff --git a/src/lib/hooks/h1_locals_population.ts b/src/lib/hooks/h1_locals_population.ts
@@ -4,7 +4,7 @@ import { authService } from '$server/services/AuthService';
 export const h1LocalsPopulation: Handle = async ({ event, resolve }) => {
   const authInfo = await event.locals.auth();
   const maybeUserEmail = authInfo?.user?.email;
-  console.log('authInfo', authInfo);
+
   event.locals.info = await authService.populateUserSession(maybeUserEmail);
 
   return resolve(event);

diff --git a/src/routes/dashboard/community/+page.svelte b/src/routes/dashboard/community/+page.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
   import type { PageData } from './$types';
   import PlaylistCard from '$features/community/components/PlaylistCard.svelte';
+  import { trpc } from '$lib/trpc_client';
+  import { invalidateAll } from '$app/navigation';
 
   interface Props {
     data: PageData;
@@ -9,12 +11,22 @@
   const { data }: Props = $props();
 </script>
 
-{#each data.playlists as playlist}
-  <PlaylistCard
-    liked={false}
-    id={playlist.id}
-    user_name={playlist.user_name}
-    name={playlist.name}
-    link={playlist.link}
-  />
-{/each}
+<div class="flex flex-col gap-2">
+  {#each data.playlists as playlist}
+    <PlaylistCard
+      onAddToLiked={async () => {
+        await trpc.community.likeCommunityPlaylist.mutate({
+          playlist_id: playlist.id,
+          like: !playlist.liked
+        });
+
+        await invalidateAll();
+      }}
+      liked={playlist.liked}
+      id={playlist.id}
+      user_name={playlist.user_name}
+      name={playlist.name}
+      link={playlist.link}
+    />
+  {/each}
+</div>