Saved properties

app/properties/saved/page.jsx

@@ -0,0 +1,35 @@
+import PropertyCard from '@/components/PropertyCard';
+import connectDB from '@/config/database';
+import User from '@/models/User';
+import { getSessionUser } from '@/utils/getSessionUser';
+
+const SavedPropertiesPage = async () => {
+  await connectDB();
+
+  const sessionUser = await getSessionUser();
+
+  const { userId } = sessionUser;
+
+  // NOTE: here we can make one database query by using Model.populate
+  const { bookmarks } = await User.findById(userId)
+    .populate('bookmarks')
+    .lean();
+
+  return (
+    <section className='px-4 py-6'>
+      <div className='container-xl lg:container m-auto px-4 py-6'>
+        <h1 className='text-2xl mb-4'>Saved Properties</h1>
+        {bookmarks.length === 0 ? (
+          <p>No saved properties</p>
+        ) : (
+          <div className='grid grid-cols-1 md:grid-cols-3 gap-6'>
+            {bookmarks.map((property) => (
+              <PropertyCard key={property._id} property={property} />
+            ))}
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
+export default SavedPropertiesPage;

components/Navbar.jsx

@@ -202,7 +202,7 @@ const Navbar = () => {
                       Your Profile
                     </Link>
                     <Link
-                      href='saved-properties.html'
+                      href='/properties/saved'
                       className='block px-4 py-2 text-sm text-gray-700'
                       role='menuitem'
                       tabIndex='-1'