sidebar filters ready

app/search/components/SearchSideBar.tsx

@@ -1,33 +1,80 @@
-export default function SearchSideBar() {
+import { Cuisine, Location, PRICE } from "@prisma/client";
+import Link from "next/link";
+
+export default async function SearchSideBar({
+  locations,
+  cuisines,
+  searchParams
+}: {
+  locations: Location[];
+  cuisines: Cuisine[];
+  searchParams: {city?: string, location?: string, cuisine?: string, price: PRICE}
+}) {
+  console.log("cuisines: ", cuisines);
+  console.log("locations: ", locations);
+
+  const priceStyle = "border w-full text-reg font-light p-2 text-center"
+  const prices = [
+    {label: "$", price: PRICE.CHEAP, className: `${priceStyle} rounded-l`},
+    {label: "$$", price: PRICE.REGULAR, className: `${priceStyle} `},
+    {label: "$$$", price: PRICE.EXPENSIVE, className: `${priceStyle} rounded-r`}
+  ];
+
   return (
     <div className="w-1/5">
-      <div className="border-b pb-4">
+      <div className="border-b pb-4 flex flex-col">
         <h1 className="mb-2">Region</h1>
-        <p className="font-light text-reg">Toronto</p>
-        <p className="font-light text-reg">Ottawa</p>
-        <p className="font-light text-reg">Montreal</p>
-        <p className="font-light text-reg">Hamilton</p>
-        <p className="font-light text-reg">Kingston</p>
-        <p className="font-light text-reg">Niagara</p>
+        {locations.map((location, index) => (
+          <Link
+            href={{
+              pathname: "/search",
+              query: {
+                ...searchParams,
+                city: location.name,
+              },
+            }}
+            key={index}
+            className="font-light text-reg"
+          >
+            {location.name}
+          </Link>
+        ))}
       </div>
-      <div className="border-b pb-4 mt-3">
+      <div className="border-b pb-4 mt-3 flex flex-col">
         <h1 className="mb-2">Cuisine</h1>
-        <p className="font-light text-reg">Mexican</p>
-        <p className="font-light text-reg">Italian</p>
-        <p className="font-light text-reg">Chinese</p>
+        {cuisines.map((cuisine, index) => (
+          <Link
+            href={{
+              pathname: "/search",
+              query: {
+                ...searchParams,
+                cuisine: cuisine.name,
+              },
+            }}
+            key={index}
+            className="font-light text-reg"
+          >
+            {cuisine.name}
+          </Link>
+        ))}
       </div>
       <div className="mt-3 pb-4">
         <h1 className="mb-2">Price</h1>
         <div className="flex">
-          <button className="border w-full text-reg font-light rounded-l p-2">
-            $
-          </button>
-          <button className="border-r border-t border-b w-full text-reg font-light p-2">
-            $$
-          </button>
-          <button className="border-r border-t border-b w-full text-reg font-light p-2 rounded-r">
-            $$$
-          </button>
+          {
+            prices.map(({price, label, className}) => (
+              <Link
+                href={{
+                pathname: "/search",
+                query: {
+                  ...searchParams,
+                  price: price,
+                },
+              }} className={className}>
+              {label}
+            </Link>
+            ))
+          }
         </div>
       </div>
     </div>

app/search/page.tsx

@@ -1,11 +1,11 @@
-import { PrismaClient, Restaurant } from "@prisma/client";
+import { PRICE, PrismaClient } from "@prisma/client";
 import Header from "../components/Header";
 import RestaurantCard from "./components/RestaurantCard";
 import SearchSideBar from "./components/SearchSideBar";
 
 const prisma = new PrismaClient();
 
-const fetchRestaurantsByCity = (city: string | undefined) => {
+const fetchRestaurants = (searchParams: {city?: string, location?: string, cuisine?: string, price?: PRICE} | undefined) => {
   const select = {
     id: true,
     name: true,
@@ -16,29 +16,48 @@ const fetchRestaurantsByCity = (city: string | undefined) => {
     slug: true
   }
 
-  if (!city) return prisma.restaurant.findMany({select});
+  if (!searchParams) return prisma.restaurant.findMany({select});
 
   return prisma.restaurant.findMany({
     where: {
       location: {
         name: {
-          equals: city.toLowerCase()
+          equals: searchParams.city ? searchParams.city.toLowerCase() : undefined
         }
+      },
+      cuisine: {
+        name: {
+          equals: searchParams.cuisine ? searchParams.cuisine : undefined
+        }
+      },
+      price: {
+          equals: searchParams.price ? searchParams.price : undefined
       }
     },
     select
   })
-
 }
 
-export default async function Search({searchParams}: {searchParams: {city: string}}) {
-  const restaurants = await fetchRestaurantsByCity(searchParams.city)
-  console.log(restaurants)
+const fetchLocations = () => {
+  return prisma.location.findMany({select: {name: true}})
+}
+
+const fetchCuisines = () => {
+  return prisma.cuisine.findMany({select: {name: true}})
+}
+
+export default async function Search({searchParams}: {searchParams: {city?: string, location?: string, cuisine?: string, price?: PRICE}}) {
+  const restaurants = await fetchRestaurants(searchParams)
+  const cuisines = await fetchCuisines()
+  const locations = await fetchLocations()
+
+  // console.log(restaurants)
   return (
     <>
       <Header />
       <div className="flex py-4 m-auto w-2/3 justify-between items-start">
-        <SearchSideBar />
+        {/* @ts-expect-error Server Component */}
+        <SearchSideBar locations={locations} cuisines={cuisines} searchParams={searchParams}/>
         <div className="w-5/6">
           {
           restaurants.length