Skip to content
This repository was archived by the owner on Feb 9, 2024. It is now read-only.

Commit 7fb6fa4

Browse files
Afsha10Afsha10
committed
19. Implementing the search functionality and refactoring the SearchResults.jsx
Work-in-progress
1 parent 60e6aa3 commit 7fb6fa4

File tree

4 files changed

+161
-151
lines changed

4 files changed

+161
-151
lines changed

‎src/Bookings.js‎

Lines changed: 23 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,39 @@ import React, {useEffect, useState} from 'react';
22
import Search from "./Search.js";
33
import SearchResults from "./components/SearchResults.jsx";
44

5-
// import SearchResults from "./SearchResults.js";
6-
import FakeBookings from "./data/fakeBookings.json";
7-
import SearchResultsOther from './components/SearchResultsOther.js';
5+
6+
// import SearchResultsOther from './components/SearchResultsOther.js';
87

98
const Bookings = () => {
109
const [bookings, setBookings] = useState([]);
10+
const [searchVal, setSearchVal] = useState([]);
11+
1112
useEffect(() => {
12-
fetch("https://cyf-react.glitch.me")
13-
.then((res) => res.json())
14-
.then((data) => {
15-
setBookings(data);
16-
})
13+
fetch("https://cyf-react.glitch.me")
14+
.then((res) => res.json())
15+
.then((data) => {
16+
setBookings(data);
17+
});
1718
}, []);
18-
const search = searchVal => {
19-
console.info("TO DO!", searchVal);
20-
};
19+
20+
21+
const search = searchVal => {
22+
console.log("TO DO!", searchVal);
23+
setSearchVal(searchVal);
24+
}
25+
26+
const displayedBookings = bookings.filter(
27+
(booking) =>
28+
booking.firstName.toLowerCase().includes(searchVal.toLowerCase()) ||
29+
booking.surname.toLowerCase().includes(searchVal.toLowerCase())
30+
);
31+
2132

2233
return (
2334
<div className="App-content">
2435
<div className="container">
2536
<Search search={search} />
26-
<SearchResults results={bookings} />
37+
<SearchResults results={displayedBookings} />
2738
{/* <SearchResultsOther results={bookings} /> */}
2839
</div>
2940
</div>

‎src/components/SearchResults.jsx‎

Lines changed: 55 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,59 @@
1-
import React, {useState} from "react";
1+
import React, { useState } from "react";
22
import moment from "moment";
33

4-
const SearchResults = (props) => {
5-
const array = [];
6-
props.results.forEach(() => {
7-
array.push(false);
8-
9-
})
10-
11-
/*
12-
imagine we have five results
13-
array = [false, false, false, false, false]
14-
15-
highlight = array
16-
17-
Each time a user clicks a row the clickHandler function is triggered below
18-
19-
let's say user clicks on row 4 (index 3)
20-
arrToObj = { ...highlight } this translates to {0:false, 1:false, 2:false, 3:false, 4:false}
21-
arrToObj[3] = (
22-
(if false) true
23-
else false
24-
)
25-
setHighlight state will now return an object
26-
27-
{0:false, 1:false, 2:false, 3:true, 4:false}
28-
29-
*/
30-
31-
const [highlight, setHighlight] = useState(array);
32-
const toggleHighlight = (index) => {
33-
const arrToObj = { ...highlight };
34-
console.log(arrToObj);
35-
arrToObj[index] = !arrToObj[index];
36-
setHighlight(arrToObj);
37-
};
38-
return (
39-
<table className="table table-bordered">
40-
<thead>
41-
<tr>
42-
<th scope="col">Id</th>
43-
<th scope="col">Title</th>
44-
<th scope="col">First Name</th>
45-
<th scope="col">Surname</th>
46-
<th scope="col">Email</th>
47-
<th scope="col">Room id</th>
48-
<th scope="col">Check in date</th>
49-
<th scope="col">Check out date</th>
50-
<th scope="col">Number of nights</th>
51-
</tr>
52-
</thead>
53-
<tbody>
54-
{props.results.map((result, index) => {
55-
const a = moment(result.checkOutDate);
56-
const b = moment(result.checkInDate);
57-
const days = a.diff(b, "days"); // 1
58-
return (
59-
<tr
60-
onClick={() => toggleHighlight(index)}
61-
style={{
62-
backgroundColor: highlight[index] ? "yellow" : "",
63-
}}
64-
key={index}
65-
>
66-
<td>{result.id}</td>
67-
<td>{result.title}</td>
68-
<td>{result.firstName}</td>
69-
<td>{result.surname}</td>
70-
<td>{result.email}</td>
71-
<td>{result.roomId}</td>
72-
<td>{result.checkInDate}</td>
73-
<td>{result.checkOutDate}</td>
74-
<td>{days}</td>
75-
</tr>
76-
);
77-
})}
78-
</tbody>
79-
</table>
80-
);
4+
const Row = (props) => {
5+
const [highlight, setHighlight] = useState(false);
6+
const toggleHighlight = () => {
7+
setHighlight(!highlight);
8+
};
9+
const a = moment(props.result.checkOutDate);
10+
const b = moment(props.result.checkInDate);
11+
const days = a.diff(b, "days"); // 1
12+
return (
13+
<tr
14+
onClick={() => toggleHighlight()}
15+
style={{
16+
backgroundColor: highlight ? "yellow" : "",
17+
}}
18+
key={props.index}
19+
>
20+
<td>{props.result.id}</td>
21+
<td>{props.result.title}</td>
22+
<td>{props.result.firstName}</td>
23+
<td>{props.result.surname}</td>
24+
<td>{props.result.email}</td>
25+
<td>{props.result.roomId}</td>
26+
<td>{props.result.checkInDate}</td>
27+
<td>{props.result.checkOutDate}</td>
28+
<td>{days}</td>
29+
</tr>
30+
);
31+
};
32+
const SearchResultsOther = (props) => {
33+
return (
34+
<table className="table table-bordered">
35+
<thead>
36+
<tr>
37+
<th scope="col">Id</th>
38+
<th scope="col">Title</th>
39+
<th scope="col">First Name</th>
40+
<th scope="col">Surname</th>
41+
<th scope="col">Email</th>
42+
<th scope="col">Room id</th>
43+
<th scope="col">Check in date</th>
44+
<th scope="col">Check out date</th>
45+
<th scope="col">Number of nights</th>
46+
</tr>
47+
</thead>
48+
<tbody>
49+
{props.results.map((result, index) => {
50+
return (
51+
<Row index={index} result={result} />
52+
)
53+
})}
54+
</tbody>
55+
</table>
56+
);
8157
};
8258

83-
export default SearchResults;
59+
export default SearchResultsOther;

‎src/components/SearchResultsOther.js‎

Lines changed: 0 additions & 60 deletions
This file was deleted.

‎src/components/SearchResultsOther.jsx‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import React, {useState} from "react";
2+
import moment from "moment";
3+
4+
const SearchResults = (props) => {
5+
const array = [];
6+
props.results.forEach(() => {
7+
array.push(false);
8+
9+
})
10+
11+
/*
12+
imagine we have five results
13+
array = [false, false, false, false, false]
14+
15+
highlight = array
16+
17+
Each time a user clicks a row the clickHandler function is triggered below
18+
19+
let's say user clicks on row 4 (index 3)
20+
arrToObj = { ...highlight } this translates to {0:false, 1:false, 2:false, 3:false, 4:false}
21+
arrToObj[3] = (
22+
(if false) true
23+
else false
24+
)
25+
setHighlight state will now return an object
26+
27+
{0:false, 1:false, 2:false, 3:true, 4:false}
28+
29+
*/
30+
31+
const [highlight, setHighlight] = useState(array);
32+
const toggleHighlight = (index) => {
33+
const arrToObj = { ...highlight };
34+
console.log(arrToObj);
35+
arrToObj[index] = !arrToObj[index];
36+
setHighlight(arrToObj);
37+
};
38+
return (
39+
<table className="table table-bordered">
40+
<thead>
41+
<tr>
42+
<th scope="col">Id</th>
43+
<th scope="col">Title</th>
44+
<th scope="col">First Name</th>
45+
<th scope="col">Surname</th>
46+
<th scope="col">Email</th>
47+
<th scope="col">Room id</th>
48+
<th scope="col">Check in date</th>
49+
<th scope="col">Check out date</th>
50+
<th scope="col">Number of nights</th>
51+
</tr>
52+
</thead>
53+
<tbody>
54+
{props.results.map((result, index) => {
55+
const a = moment(result.checkOutDate);
56+
const b = moment(result.checkInDate);
57+
const days = a.diff(b, "days"); // 1
58+
return (
59+
<tr
60+
onClick={() => toggleHighlight(index)}
61+
style={{
62+
backgroundColor: highlight[index] ? "yellow" : "",
63+
}}
64+
key={index}
65+
>
66+
<td>{result.id}</td>
67+
<td>{result.title}</td>
68+
<td>{result.firstName}</td>
69+
<td>{result.surname}</td>
70+
<td>{result.email}</td>
71+
<td>{result.roomId}</td>
72+
<td>{result.checkInDate}</td>
73+
<td>{result.checkOutDate}</td>
74+
<td>{days}</td>
75+
</tr>
76+
);
77+
})}
78+
</tbody>
79+
</table>
80+
);
81+
};
82+
83+
export default SearchResults;

0 commit comments

Comments
 (0)