Backend + Early frontend for Feeds (#170)

* Initialize UI for feed

* Add backend route for retrieving a user's feed

* Fix bug in handling friend requests

* Create helper functions to integrate frontend and backend

backend/app/api/friends/feed/route.ts

@@ -0,0 +1,28 @@
+import prisma from '@/lib/prisma';
+import { verifySession } from '@/lib/session';
+import { NextResponse } from 'next/server';
+
+export const GET = async () => {
+  const session = await verifySession();
+
+  if (!session.isAuth) {
+    return NextResponse.json({ error: 'Invalid session.' }, { status: 400 });
+  }
+
+  const user = await prisma.user.findFirst({
+    where: {
+      id: session.uid,
+    },
+    include: {
+      friends: {
+        include: {
+          preferences: true,
+          playlists: true,
+          likedSongs: true,
+        },
+      },
+    },
+  });
+
+  return NextResponse.json({ friends: user?.friends });
+};

backend/app/api/friends/requests/handle/route.ts

@@ -33,12 +33,18 @@ export const PUT = async (req: NextRequest) => {
     data: {
       friends: {
         connect: {
-          id,
+          id: friendRequest!.fromUserId,
         },
       },
     },
   });
 
+  await prisma.friendRequest.delete({
+    where: {
+      id,
+    },
+  });
+
   return NextResponse.json({ success: true });
 };
 

frontend/app/main/(tabs)/_layout.tsx

@@ -18,10 +18,10 @@ export default function TabLayout() {
       <Tabs.Screen
         name="index"
         options={{
-          title: 'Home',
+          title: 'Listen',
           tabBarIcon: ({ color, focused }) => (
             <Ionicons
-              name={focused ? 'home' : 'home-outline'}
+              name={focused ? 'musical-notes' : 'musical-notes-outline'}
               color={color}
               size={20}
             />
@@ -41,6 +41,19 @@ export default function TabLayout() {
           ),
         }}
       />
+      <Tabs.Screen
+        name="feed"
+        options={{
+          title: 'Feed',
+          tabBarIcon: ({ color, focused }) => (
+            <Ionicons
+              name={focused ? 'home' : 'home-outline'}
+              color={color}
+              size={20}
+            />
+          ),
+        }}
+      />
       <Tabs.Screen
         name="profile"
         options={{

frontend/app/main/(tabs)/feed.tsx

@@ -0,0 +1,46 @@
+import { getFeed } from '@/services/friends';
+import { useEffect } from 'react';
+import { SafeAreaView, StyleSheet, Text, View } from 'react-native';
+
+const Feed = () => {
+  useEffect(() => {
+    const loadFeed = async () => {
+      getFeed();
+    };
+    loadFeed();
+  });
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.header}>
+        <Text style={styles.title}>Friends</Text>
+      </View>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: 'black',
+    width: '100%',
+    height: '100%',
+  },
+  header: {
+    padding: 15,
+    backgroundColor: 'black',
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: 'white',
+  },
+  horizontalLine: {
+    borderBottomColor: 'white',
+    borderBottomWidth: 1,
+    width: '100%',
+    marginVertical: 10,
+    marginBottom: 15,
+  },
+});
+
+export default Feed;

frontend/services/friends.ts

@@ -0,0 +1,14 @@
+import { LOCAL_API_ENDPOINT } from '@/constants';
+import { FeedItem } from '@/types';
+import { getCookie } from '@/utils/cookies';
+
+export const getFeed = async (): Promise<FeedItem[]> => {
+  const response = await fetch(`${LOCAL_API_ENDPOINT}/friends/feed`, {
+    headers: {
+      Cookie: (await getCookie())!,
+    },
+  });
+  const body = await response.json();
+  console.log(body);
+  return body.friends as FeedItem[];
+};

frontend/types.ts

@@ -71,3 +71,9 @@ export interface FriendRequest {
   read: boolean;
   from: User;
 }
+
+export interface FeedItem extends User {
+  preferences: Genre[];
+  likedSongs: Song[];
+  playlists: Playlist[];
+}