Add ability to view friends' playlists (#172)

* Add ability to view friends' playlists * Remove unnecessary imports * Modify playlist permissions to allow friends to view
hcp-uw · Feb 24, 2025 · 70aa535 · 70aa535
1 parent dbaa6f5
commit 70aa535
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 10 deletions.
diff --git a/backend/app/api/playlist/route.ts b/backend/app/api/playlist/route.ts
@@ -13,6 +13,19 @@ export const GET = async (req: NextRequest) => {
     return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
   }
 
+  const user = await prisma.user.findFirst({
+    where: {
+      id: session.uid,
+    },
+    include: {
+      friends: true,
+    },
+  });
+
+  if (!user) {
+    return NextResponse.json({ error: 'User not found' }, { status: 404 });
+  }
+
   const playlist = await prisma.playlist.findUnique({
     where: { id: parseInt(id!) },
     include: {
@@ -29,7 +42,10 @@ export const GET = async (req: NextRequest) => {
     return NextResponse.json({ error: 'Playlist not found' }, { status: 404 });
   }
 
-  if (playlist.authorId !== session.uid) {
+  if (
+    playlist.authorId !== user!.id ||
+    !user!.friends.map((elem) => elem.id).includes(playlist.authorId)
+  ) {
     return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
   }
 

diff --git a/frontend/app/main/(tabs)/playlist.tsx b/frontend/app/main/(tabs)/playlist.tsx
@@ -8,13 +8,15 @@ import {
   TouchableOpacity,
 } from 'react-native';
 import { router } from 'expo-router';
+import { useFeed } from '@/hooks/useFeed';
 export default function Playlist() {
   const { playlists } = usePlaylist();
+  const { playlists: friendsPlaylists } = useFeed();
 
   return (
     <SafeAreaView style={styles.container}>
       <View style={styles.header}>
-        <Text style={styles.title}>Playlists</Text>
+        <Text style={styles.title}>My Playlists</Text>
       </View>
       <View
         style={{
@@ -24,7 +26,11 @@ export default function Playlist() {
           marginBottom: 20,
         }}
       />
-      <ScrollView>
+      <ScrollView
+        style={{
+          maxHeight: '35%',
+        }}
+      >
         {playlists.map((playlist) => (
           <TouchableOpacity
             key={playlist.id}
@@ -42,6 +48,39 @@ export default function Playlist() {
           </TouchableOpacity>
         ))}
       </ScrollView>
+      <View style={styles.header}>
+        <Text style={styles.title}>Friend's Playlists</Text>
+      </View>
+      <View
+        style={{
+          height: 1,
+          backgroundColor: 'white',
+          width: '100%',
+          marginBottom: 20,
+        }}
+      />
+      <ScrollView
+        style={{
+          maxHeight: '35%',
+        }}
+      >
+        {friendsPlaylists.map((playlist) => (
+          <TouchableOpacity
+            key={playlist.id}
+            style={styles.playlistCard}
+            onPress={() => {
+              router.push(`/playlists/${playlist.id}`);
+            }}
+          >
+            <View style={styles.playlistInfo}>
+              <Text style={styles.playlistName}>{playlist.name}</Text>
+              <Text style={styles.playlistDetails}>
+                {playlist.songs?.length || 0} songs
+              </Text>
+            </View>
+          </TouchableOpacity>
+        ))}
+      </ScrollView>
     </SafeAreaView>
   );
 }

diff --git a/frontend/app/playlists/[id].tsx b/frontend/app/playlists/[id].tsx
@@ -66,11 +66,7 @@ const SongItem = ({ rawSong, idx }: { rawSong: Song; idx: number }) => {
 
   useEffect(() => {
     const fetchSong = async () => {
-      const song = await hydrateTrackInfo(
-        rawSong.trackID,
-        rawSong.genre,
-        accessToken!
-      );
+      const song = await hydrateTrackInfo(rawSong.trackID, accessToken!);
       setSong(song);
     };
     fetchSong();

diff --git a/frontend/components/SongView.tsx b/frontend/components/SongView.tsx
@@ -11,8 +11,7 @@ import {
   TouchableOpacity,
 } from 'react-native';
 import { likeTrack, dislikeTrack } from '@/services/songs';
-import { Genre, SpotifyTrack } from '@/types';
-import { hydrateTrackInfo } from '@/services/spotify';
+import { Genre } from '@/types';
 
 type SongViewProps = {
   songId: string;