Revert "filter by category"

src/MapView.js

@@ -4,6 +4,7 @@ import { useHistory } from "react-router-dom";
 import "./App.css";
 
 export default function MapView({ restaurants }) {
+  const [activePark, setActivePark] = React.useState(null);
   let history = useHistory();
 
   return (
@@ -19,13 +20,34 @@ export default function MapView({ restaurants }) {
             restaurant.geometry.location.lat,
             restaurant.geometry.location.lng,
           ]}
+          // onClick={() => {
+          //   setActivePark(restaurant);
+          // }}
           eventHandlers={{
             click: () => {
               history.push(`/restaurants/berlin/${restaurant.id}`);
             },
           }}
         />
       ))}
+
+      {/* {activePark && (
+        <Popup
+          position={[
+            restaurant.geometry.location.lat,
+            restaurant.geometry.location.lng,
+          ]}
+          onClose={() => {
+            setActivePark(null);
+          }}
+        >
+          <div>
+            <h2>{activePark.name}</h2>
+            <p>{activePark.formatted_address}</p>
+            <p>Rating: {activePark.rating}</p>
+          </div>
+        </Popup>
+      )} */}
     </MapContainer>
   );
 }

src/components/Filters.js

@@ -1,24 +1,36 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
+
+const Filters = ({ restaurants }) => {
+  const [selectedPrice, setSelectedPrice] = useState();
+  const [resto, setResto] = useState([]);
+
+  useEffect(() => {
+    const result = restaurants.filter(
+      (item) => item.price_level == selectedPrice
+    );
+    setResto(result);
+  }, [selectedPrice]);
+
+  const handleGameChange = (e) => {
+    setSelectedPrice(e.target.value);
+  };
+
+  console.log("resto: ", resto, resto.length);
 
-const Filters = ({
-  selectedFilters,
-  setSelectedFilter,
-  handleChange,
-  resto,
-}) => {
   return (
     <div className="filterArea">
       <div className="selectWrapper">
-        <select className="filterSelect" onChange={handleChange}>
+        <select className="filterSelect" onChange={handleGameChange}>
           <option default>Price</option>
           <option value="1">$</option>
           <option value="2">$$</option>
           <option value="3">$$$</option>
-          <option value="4">$$$$</option>
         </select>
-        <select className="filterSelect" onChange={handleChange}>
+        <select className="filterSelect">
           <option default>Open Now</option>
-          <option value="true">Open</option>
+          <option value="1">$</option>
+          <option value="2">$$</option>
+          <option value="3">$$$</option>
         </select>
         <select className="filterSelect">
           <option default>By rating</option>

src/components/RestaurantListings.js

@@ -3,20 +3,18 @@ import RestaurantCard from "./RestaurantCard";
 
 const RestaurantListings = ({ restaurants }) => {
   return (
-    <>
+    <div className="results-for-restaurants">
       <div className="sectionTitle">
-        <h2 style={{ marginBottom: "10px", marginLeft: "15px" }}>
-          Restaurants in Berlin{" "}
-        </h2>
+        {restaurants && (
+          <h2 style={{ marginBottom: "10px", marginLeft: "15px" }}>
+            Restaurants in Berlin{" "}
+          </h2>
+        )}
       </div>
-
-      <div className="results-for-restaurants">
-        {restaurants &&
-          restaurants.map((restaurant) => (
-            <RestaurantCard key={restaurant.id} restaurant={restaurant} />
-          ))}
-      </div>
-    </>
+      {restaurants.map((restaurant) => (
+        <RestaurantCard key={restaurant.id} restaurant={restaurant} />
+      ))}
+    </div>
   );
 };
 

src/components/Restaurants.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext } from "react";
+import React, { useEffect, useContext } from "react";
 import "../restaurantsStyle.css";
 import Header from "./Header";
 import Filters from "./Filters";
@@ -11,20 +11,6 @@ import RestaurantsContext from "../contexts/restaurantsContext";
 const Restaurants = ({ logo }) => {
   const { restaurants, setRestaurants } = useContext(RestaurantsContext);
 
-  const [selectedFilters, setSelectedFilters] = useState({});
-  const [resto, setResto] = useState([]);
-
-  useEffect(() => {
-    const result = restaurants.filter(
-      (item) => item.price_level == selectedFilters
-    );
-    setResto(result);
-  }, [selectedFilters]);
-
-  const handleChange = (e) => {
-    setSelectedFilters(e.target.value);
-  };
-
   useEffect(() => {
     (async () => {
       const response = await fetch(
@@ -42,16 +28,8 @@ const Restaurants = ({ logo }) => {
         <Header logo={logo} />
         <div id="resultsDiv">
           <div id="listOfRestautants">
-            <Filters
-              selectedFilters={selectedFilters}
-              setSelectedFilters={setSelectedFilters}
-              handleChange={handleChange}
-              resto={resto}
-            />
-            {resto.length >= 1 && <RestaurantListings restaurants={resto} />}
-            {resto.length === 0 && (
-              <RestaurantListings restaurants={restaurants} />
-            )}
+            <Filters restaurants={restaurants} />
+            <RestaurantListings restaurants={restaurants} />
             <TopRated restaurants={restaurants} />
           </div>
           <div className="mapView">