feat(feed): ✨ friends feed

composables/useFetchFriendsFeed.ts

@@ -0,0 +1,2 @@
+export const useFetchFriendsFeed = async () =>
+  await $fetch("/api/feeds/friends");

layouts/feed.vue

@@ -1,17 +1,34 @@
+<script setup lang="ts">
+import { useQuery } from "@tanstack/vue-query";
+
+const { isPending, isError, data, error } = useQuery({
+  queryKey: ["feeds", "friends"],
+  queryFn: () => useFetchFriendsFeed(),
+});
+</script>
+
 <template>
-  <div class="flex text-zinc-900 dark:text-zinc-100 flex-col md:flex-row">
+  <div class="flex text-zinc-100 flex-col md:flex-row">
     <aside
-      class="flex h-screen bg-neutral-100 dark:bg-neutral-900 md:w-1/3 md:min-w-[24rem] sticky top-0 flex h-screen"
+      class="flex h-screen bg-neutral-900 md:w-1/3 md:min-w-[24rem] sticky top-0"
     >
       <div
         class="py-2 px-2 md:pl-0 xl:max-w-2xl mx-auto lg:mx-0 lg:ml-auto flex flex-col w-full"
       >
         <NavBar />
+
+        <p v-if="isPending">Pending</p>
+        <p v-if="isError">Error: {{ error }}</p>
+        <p v-if="data">
+          {{ data.userPosts.posts[0].takenAt }}
+        </p>
       </div>
     </aside>
 
-    <main class="max-w-xl px-3 pt-5 grow">
-      <slot />
+    <main class="px-3 pt-5 grow flex justify-center">
+      <div class="max-w-md xl:max-w-lg">
+        <slot />
+      </div>
     </main>
   </div>
 </template>

pages/index.vue

@@ -1,5 +1,24 @@
+<script setup lang="ts">
+import { useQuery } from "@tanstack/vue-query";
+
+const { isPending, isError, data, error } = useQuery({
+  queryKey: ["feeds", "friends"],
+  queryFn: () => useFetchFriendsFeed(),
+});
+</script>
+
 <template>
   <div>
-    <NuxtLayout name="feed"><h1>content</h1></NuxtLayout>
+    <NuxtLayout name="feed">
+      <p v-if="isPending">Pending</p>
+      <p v-if="isError">Error: {{ error }}</p>
+
+      <Post
+        v-for="friendPost in data?.friendsPosts"
+        :key="friendPost.user.id"
+        v-bind="friendPost"
+        class="pb-3"
+      />
+    </NuxtLayout>
   </div>
 </template>

types/posts.ts

@@ -1,7 +1,7 @@
 import type { Media } from "./types";
 import type { User } from "./users";
 
-export interface Posts {
+export interface UserPosts {
   user: User;
   momentId: string;
   region: string; // TODO: Specify all possible values
@@ -66,8 +66,8 @@ export interface Music {
 }
 
 export interface FriendsFeed {
-  userPosts: Posts;
-  friendsPosts: Posts[];
+  userPosts: UserPosts;
+  friendsPosts: UserPosts[];
   remainingPosts: number;
   maxPostsPerMoment: number;
 }