05-lets-get-hooked: Added Search Functionality

deltanode · Mar 17, 2023 · 2ac8538 · 2ac8538
1 parent b1a7d83
commit 2ac8538
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 3 deletions.
diff --git a/05-lets-get-hooked/index.css b/05-lets-get-hooked/index.css
@@ -81,8 +81,38 @@ img {
   margin: 0.5rem;
   max-width: 15rem;
   overflow: hidden;
+  border-radius: 5px;
 }
 
 .restaurant__name {
   color: rgb(229, 17, 17);
 }
+
+/***** Search *****/
+.search {
+  /* background-color: antiquewhite; */
+  margin: 0.5rem 0.5rem 1.5rem;
+}
+
+.search__input {
+  padding: 0.5rem;
+  margin-right: 1rem;
+  width: 25rem;
+  color: #898686;
+  border: 2px solid #5e5d5d;
+  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
+  border-radius: 5px;
+}
+
+.search__button {
+  border-radius: 5px;
+  background-color: #000000;
+  color: #ffffff;
+  padding: 0.5rem;
+  border: 1px solid #000000;
+}
+
+.search__button:hover {
+  background-color: #5a5858;
+  border: 1px solid #5a5858;
+}
diff --git a/05-lets-get-hooked/screenshot/screenshot_localhost_search.png b/05-lets-get-hooked/screenshot/screenshot_localhost_search.png
diff --git a/05-lets-get-hooked/src/components/Home.js b/05-lets-get-hooked/src/components/Home.js
@@ -1,10 +1,42 @@
-import Restaurants from "./Restaurants"
+import { useState } from "react"
+import { restaurantList } from "../constants"
+// import Restaurants from "./Restaurants"
+import RestaurantCard from "./RestaurantCard"
+// import Search from "./Search"
+
+function filterRestaurant(searchText, restaurantList) {
+  const data = restaurantList.filter(restaurant => restaurant.data.name.includes(searchText))
+  return data
+}
 
 const Home = () => {
+  const [restaurantData, setRestaurantData] = useState(restaurantList)
+  const [searchText, setSearchText] = useState("")
   return (
     <main className="main">
       <section className="home container">
-        <Restaurants />
+        {/* <Search restaurantList={restaurantData} /> */}
+        <div className="search">
+          <input className="search__input" type="text" placeholder="Search Restaurants ..." value={searchText} onChange={e => setSearchText(e.target.value)}></input>
+          <button
+            className="search__button"
+            onClick={() => {
+              const data = filterRestaurant(searchText, restaurantData)
+              console.log(data)
+              setRestaurantData(data)
+            }}
+          >
+            Search
+          </button>
+        </div>
+
+        {/* <Restaurants restaurantList={restaurantData} /> */}
+        {/* <Restaurants /> */}
+        <div className="restaurant">
+          {restaurantData.map(restaurant => {
+            return <RestaurantCard {...restaurant.data} key={restaurant.data.id} />
+          })}
+        </div>
       </section>
     </main>
   )

diff --git a/05-lets-get-hooked/src/components/Restaurants.js b/05-lets-get-hooked/src/components/Restaurants.js
@@ -5,10 +5,20 @@ const Restaurants = () => {
   return (
     <div className="restaurant">
       {restaurantList.map(restaurant => {
-        return <RestaurantCard {...restaurant.data} />
+        return <RestaurantCard {...restaurant.data} key={restaurant.data.id} />
       })}
     </div>
   )
 }
 
+// const Restaurants = props => {
+//   return (
+//     <div className="restaurant">
+//       {props.restaurantList.map(restaurant => {
+//         return <RestaurantCard {...restaurant.data} key={restaurant.data.id} />
+//       })}
+//     </div>
+//   )
+// }
+
 export default Restaurants
diff --git a/05-lets-get-hooked/src/components/Search.js b/05-lets-get-hooked/src/components/Search.js
@@ -0,0 +1,27 @@
+import React from "react"
+import { restaurantList } from "../constants"
+
+function filterRestaurant(searchText, restaurantList) {
+  return restaurantList.filter(restaurant => restaurant.data.name.includes(searchText))
+  //   console.log(searchText)
+  //   console.log(restaurantList)
+  //   console.log(setRestaurantList)
+}
+
+const Search = props => {
+  //   let searchTxt = "search value"                    // Local Variable
+  const [searchText, setSearchText] = React.useState("") // Local State Variable
+
+  //   console.log(props)
+  return (
+    <div className="search">
+      <input className="search__input" type="text" placeholder="Search Restaurants ..." value={searchText} onChange={e => setSearchText(e.target.value)}></input>
+      <button className="search__button" onClick={console.log(filterRestaurant(searchText, props.restaurantList))}>
+        Search
+      </button>
+      <span>{searchText}</span>
+    </div>
+  )
+}
+
+export default Search