19. Implementing the search functionality and refactoring the SearchR…

…esults.jsx Still in the <Bookings /> component, we implement the search method. It must use the searchVal variable (that we just passed from the <Search /> component) to filter the search results. The filter function should return bookings where firstName or surname match searchVal. Once filtered, we use the setBookings function to update the results rendered in <SearchResults />. Test: Verified that when you enter an existing first name or surname and submit the form, the results are filtered accordingly in the customers table.
CodeYourFuture · Jul 9, 2023 · fad13df · fad13df
1 parent 60e6aa3
commit fad13df
Show file tree

Hide file tree

Showing 4 changed files with 161 additions and 151 deletions.
diff --git a/src/Bookings.js b/src/Bookings.js
@@ -2,28 +2,39 @@ import React, {useEffect, useState} from 'react';
 import Search from "./Search.js";
 import SearchResults from "./components/SearchResults.jsx";
 
-// import SearchResults from "./SearchResults.js";
-import FakeBookings from "./data/fakeBookings.json";
-import SearchResultsOther from './components/SearchResultsOther.js';
+
+// import SearchResultsOther from './components/SearchResultsOther.js';
 
 const Bookings = () => {
   const [bookings, setBookings] = useState([]);
+  const [searchVal, setSearchVal] = useState("");
+
   useEffect(() => {
-      fetch("https://cyf-react.glitch.me")
-      .then((res) => res.json())
-      .then((data) => {
-        setBookings(data);
-      })
+    fetch("https://cyf-react.glitch.me")
+    .then((res) => res.json())
+    .then((data) => {
+      setBookings(data);
+    });
   }, []);
-  const search = searchVal => {
-    console.info("TO DO!", searchVal);
-  };
+
+
+const search = searchVal => {
+  console.log("TO DO!", searchVal);
+  setSearchVal(searchVal);
+}
+
+  const displayedBookings = bookings.filter(
+    (booking) =>
+      booking.firstName.toLowerCase().includes(searchVal.toLowerCase()) ||
+      booking.surname.toLowerCase().includes(searchVal.toLowerCase())
+  );
+
 
   return (
     <div className="App-content">
       <div className="container">
         <Search search={search} />
-        <SearchResults results={bookings} />
+        <SearchResults  results={displayedBookings} />
         {/* <SearchResultsOther results={bookings} /> */}
       </div>
     </div>

diff --git a/src/components/SearchResults.jsx b/src/components/SearchResults.jsx
@@ -1,83 +1,59 @@
-import React, {useState} from "react";
+import React, { useState } from "react";
 import moment from "moment";
 
-const SearchResults = (props) => {
-    const array = [];
-    props.results.forEach(() => {
-      array.push(false);
-
-    }) 
-
-    /*
-    imagine we have five results
-      array = [false, false, false, false, false]
-
-      highlight = array
-
-      Each time a user clicks a row the clickHandler function is triggered below
-
-        let's say user clicks on row 4 (index 3)
-        arrToObj = { ...highlight } this translates to {0:false, 1:false, 2:false, 3:false, 4:false}
-        arrToObj[3] = (
-            (if false) true 
-            else false
-          )
-        setHighlight state will now return an object
-
-        {0:false, 1:false, 2:false, 3:true, 4:false}
-        
-    */
-
-    const [highlight, setHighlight] = useState(array);
-    const toggleHighlight = (index) => {
-      const arrToObj = { ...highlight };
-      console.log(arrToObj);
-      arrToObj[index] = !arrToObj[index];
-      setHighlight(arrToObj);
-    };
-    return (
-      <table className="table table-bordered">
-        <thead>
-          <tr>
-            <th scope="col">Id</th>
-            <th scope="col">Title</th>
-            <th scope="col">First Name</th>
-            <th scope="col">Surname</th>
-            <th scope="col">Email</th>
-            <th scope="col">Room id</th>
-            <th scope="col">Check in date</th>
-            <th scope="col">Check out date</th>
-            <th scope="col">Number of nights</th>
-          </tr>
-        </thead>
-        <tbody>
-          {props.results.map((result, index) => {
-            const a = moment(result.checkOutDate);
-            const b = moment(result.checkInDate);
-            const days = a.diff(b, "days"); // 1
-            return (
-              <tr
-                onClick={() => toggleHighlight(index)}
-                style={{
-                  backgroundColor: highlight[index] ? "yellow" : "",
-                }}
-                key={index}
-              >
-                <td>{result.id}</td>
-                <td>{result.title}</td>
-                <td>{result.firstName}</td>
-                <td>{result.surname}</td>
-                <td>{result.email}</td>
-                <td>{result.roomId}</td>
-                <td>{result.checkInDate}</td>
-                <td>{result.checkOutDate}</td>
-                <td>{days}</td>
-              </tr>
-            );
-          })}
-        </tbody>
-      </table>
-    );
+const Row = (props) => {
+  const [highlight, setHighlight] = useState(false);
+  const toggleHighlight = () => {
+    setHighlight(!highlight);
+  };
+  const a = moment(props.result.checkOutDate);
+  const b = moment(props.result.checkInDate);
+  const days = a.diff(b, "days"); // 1
+  return (
+    <tr
+      onClick={() => toggleHighlight()}
+      style={{
+        backgroundColor: highlight ? "yellow" : "",
+      }}
+      key={props.index}
+    >
+      <td>{props.result.id}</td>
+      <td>{props.result.title}</td>
+      <td>{props.result.firstName}</td>
+      <td>{props.result.surname}</td>
+      <td>{props.result.email}</td>
+      <td>{props.result.roomId}</td>
+      <td>{props.result.checkInDate}</td>
+      <td>{props.result.checkOutDate}</td>
+      <td>{days}</td>
+    </tr>
+  );
+};
+const SearchResultsOther = (props) => {
+  return (
+    <table className="table table-bordered">
+      <thead>
+        <tr>
+          <th scope="col">Id</th>
+          <th scope="col">Title</th>
+          <th scope="col">First Name</th>
+          <th scope="col">Surname</th>
+          <th scope="col">Email</th>
+          <th scope="col">Room id</th>
+          <th scope="col">Check in date</th>
+          <th scope="col">Check out date</th>
+          <th scope="col">Number of nights</th>
+        </tr>
+      </thead>
+      <tbody>
+        {props.results.map((result, index) => {
+          return (
+              <Row index={index} result={result} />
+          ) 
+        })}
+      </tbody>
+    </table>
+  );
 };
 
-export default SearchResults;
+export default SearchResultsOther;
diff --git a/src/components/SearchResultsOther.js b/src/components/SearchResultsOther.js
diff --git a/src/components/SearchResultsOther.jsx b/src/components/SearchResultsOther.jsx
@@ -0,0 +1,83 @@
+import React, {useState} from "react";
+import moment from "moment";
+
+const SearchResults = (props) => {
+    const array = [];
+    props.results.forEach(() => {
+      array.push(false);
+
+    }) 
+
+    /*
+    imagine we have five results
+      array = [false, false, false, false, false]
+
+      highlight = array
+
+      Each time a user clicks a row the clickHandler function is triggered below
+
+        let's say user clicks on row 4 (index 3)
+        arrToObj = { ...highlight } this translates to {0:false, 1:false, 2:false, 3:false, 4:false}
+        arrToObj[3] = (
+            (if false) true 
+            else false
+          )
+        setHighlight state will now return an object
+
+        {0:false, 1:false, 2:false, 3:true, 4:false}
+        
+    */
+
+    const [highlight, setHighlight] = useState(array);
+    const toggleHighlight = (index) => {
+      const arrToObj = { ...highlight };
+      console.log(arrToObj);
+      arrToObj[index] = !arrToObj[index];
+      setHighlight(arrToObj);
+    };
+    return (
+      <table className="table table-bordered">
+        <thead>
+          <tr>
+            <th scope="col">Id</th>
+            <th scope="col">Title</th>
+            <th scope="col">First Name</th>
+            <th scope="col">Surname</th>
+            <th scope="col">Email</th>
+            <th scope="col">Room id</th>
+            <th scope="col">Check in date</th>
+            <th scope="col">Check out date</th>
+            <th scope="col">Number of nights</th>
+          </tr>
+        </thead>
+        <tbody>
+          {props.results.map((result, index) => {
+            const a = moment(result.checkOutDate);
+            const b = moment(result.checkInDate);
+            const days = a.diff(b, "days"); // 1
+            return (
+              <tr
+                onClick={() => toggleHighlight(index)}
+                style={{
+                  backgroundColor: highlight[index] ? "yellow" : "",
+                }}
+                key={index}
+              >
+                <td>{result.id}</td>
+                <td>{result.title}</td>
+                <td>{result.firstName}</td>
+                <td>{result.surname}</td>
+                <td>{result.email}</td>
+                <td>{result.roomId}</td>
+                <td>{result.checkInDate}</td>
+                <td>{result.checkOutDate}</td>
+                <td>{days}</td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    );
+};
+
+export default SearchResults;