feature(favorites): done listing user favorites

app/actions/getFavoriteListing.ts

@@ -0,0 +1,30 @@
+import { getCurrentUser } from "./getCurrentUser";
+import prisma from "../libs/prismadb";
+
+export default async function getFavoriteListing() {
+  try {
+    const currentUser = await getCurrentUser();
+
+    if (!currentUser) {
+      return [];
+    }
+
+    const favorites = await prisma.listing.findMany({
+      where: {
+        id: {
+          in: [...(currentUser.favoriteIds || [])],
+        },
+      },
+    });
+
+    const safeFavorites = favorites.map((favorite) => ({
+      ...favorite,
+      createdAt: favorite.createdAt.toISOString(),
+      updatedAt: favorite.updatedAt.toISOString(),
+    }));
+
+    return safeFavorites;
+  } catch (error: any) {
+    throw new Error(error);
+  }
+}

app/components/Navbar/UserMenu.tsx

@@ -97,7 +97,10 @@ const UserMenu: React.FC<Props> = ({ currentUser }) => {
                   onClick={() => router.push("/trips")}
                   label={"My trips"}
                 />
-                <MenuItem onClick={() => {}} label={"My Favorites"} />
+                <MenuItem
+                  onClick={() => router.push("/favorites")}
+                  label={"My Favorites"}
+                />
                 <MenuItem
                   onClick={() => router.push("/reservations")}
                   label={"My Reservations"}

app/favorites/FavoritesClient.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import React from "react";
+import { SafeListing, SafeUser } from "../types";
+import Container from "../components/Container";
+import Heading from "../components/Heading";
+import ListingCard from "../components/Listing/ListingCard";
+
+interface Props {
+  listings: SafeListing[];
+  currentUser?: SafeUser | null;
+}
+
+const FavoritesClient: React.FC<Props> = ({ listings, currentUser }) => {
+  return (
+    <Container>
+      <Heading title="Favorites" subtitle="List of places you have favorited" />
+      <div className="mt-10 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-8">
+        {listings.map((listing) => (
+          <ListingCard
+            key={listing.id}
+            data={listing}
+            currentUser={currentUser}
+          />
+        ))}
+      </div>
+    </Container>
+  );
+};
+
+export default FavoritesClient;

app/favorites/page.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { getCurrentUser } from "../actions/getCurrentUser";
+import ClientOnly from "../components/ClientOnly";
+import EmptyState from "../components/EmptyState";
+import getFavoriteListing from "../actions/getFavoriteListing";
+import FavoritesClient from "./FavoritesClient";
+
+const FavoritesPage = async () => {
+  const currentUser = await getCurrentUser();
+  const favorites = await getFavoriteListing();
+  const isEmptyFavorites = favorites.length === 0;
+
+  if (!currentUser) {
+    return (
+      <ClientOnly>
+        <EmptyState title="Unauthorized" subtitle="Please login" />
+      </ClientOnly>
+    );
+  }
+
+  if (isEmptyFavorites) {
+    return (
+      <ClientOnly>
+        <EmptyState
+          title="No favorites found"
+          subtitle="You have no favorites"
+        />
+      </ClientOnly>
+    );
+  }
+
+  return (
+    <ClientOnly>
+      <FavoritesClient listings={favorites} currentUser={currentUser} />
+    </ClientOnly>
+  );
+};
+
+export default FavoritesPage;