|
1 | | -import React, { useState } from "react"; |
| 1 | +import React from "react"; |
2 | 2 | import PropertyCard from "./PropertyCard"; |
3 | | -import FilterModal from "./Modals/FilterModal"; |
4 | 3 | import propertiesData from "../data/properties.json"; |
5 | 4 | import Navbar from "./Navbar/Navbar"; |
| 5 | +// import FilterModal from "./Modals/FilterModal"; |
6 | 6 |
|
7 | | -const HomePage = ({ user, setUser }) => { |
8 | | - const [searchTerm, setSearchTerm] = useState(""); |
9 | | - const [isFilterModalOpen, setIsFilterModalOpen] = useState(false); |
10 | | - const [likedProperties, setLikedProperties] = useState([]); |
11 | | - |
12 | | - const [tempAmenitiesFilter, setTempAmenitiesFilter] = useState([]); |
13 | | - const [tempRatingFilter, setTempRatingFilter] = useState(""); |
14 | | - const [tempPriceFilter, setTempPriceFilter] = useState([90, 400]); |
15 | | - |
16 | | - const [amenitiesFilter, setAmenitiesFilter] = useState([]); |
17 | | - const [ratingFilter, setRatingFilter] = useState(""); |
18 | | - const [priceFilter, setPriceFilter] = useState([90, 400]); |
19 | | - |
20 | | - const properties = propertiesData.properties; |
21 | | - |
22 | | - const [minPrice, maxPrice] = properties.reduce( |
23 | | - ([min, max], property) => { |
24 | | - const price = parseInt( |
25 | | - property.price.replace("$", "").replace("/night", "") |
26 | | - ); |
27 | | - return [Math.min(min, price), Math.max(max, price)]; |
28 | | - }, |
29 | | - [Infinity, -Infinity] |
30 | | - ); |
31 | | - |
32 | | - const uniqueAmenities = Array.from( |
33 | | - new Set(properties.flatMap((property) => property.amenities)) |
34 | | - ); |
35 | | - |
36 | | - let filteredProperties = properties.filter((property) => { |
37 | | - const matchesAmenities = amenitiesFilter.length |
38 | | - ? amenitiesFilter.every((amenity) => property.amenities.includes(amenity)) |
39 | | - : true; |
40 | | - |
41 | | - const matchesRating = ratingFilter |
42 | | - ? (() => { |
43 | | - const [min, max] = ratingFilter.split("-").map(Number); |
44 | | - return property.rating >= min && (max ? property.rating < max : true); |
45 | | - })() |
46 | | - : true; |
47 | | - |
48 | | - const matchesPrice = (() => { |
49 | | - const [min, max] = priceFilter; |
50 | | - const price = parseInt( |
51 | | - property.price.replace("$", "").replace("/night", "") |
52 | | - ); |
53 | | - return price >= min && price <= max; |
54 | | - })(); |
55 | | - |
56 | | - const matchesSearch = property.name |
57 | | - .toLowerCase() |
58 | | - .includes(searchTerm.toLowerCase()); |
59 | | - |
60 | | - return matchesAmenities && matchesRating && matchesSearch && matchesPrice; |
61 | | - }); |
62 | | - |
63 | | - const handleApplyFilters = () => { |
64 | | - setAmenitiesFilter(tempAmenitiesFilter); |
65 | | - setRatingFilter(tempRatingFilter); |
66 | | - setPriceFilter(tempPriceFilter); |
67 | | - setIsFilterModalOpen(false); |
68 | | - }; |
69 | | - |
70 | | - const handleClearFilters = () => { |
71 | | - setTempAmenitiesFilter([]); |
72 | | - setTempRatingFilter(""); |
73 | | - setTempPriceFilter([90, 400]); |
74 | | - |
75 | | - setAmenitiesFilter([]); |
76 | | - setRatingFilter(""); |
77 | | - setPriceFilter([90, 400]); |
78 | | - setIsFilterModalOpen(false); |
79 | | - }; |
80 | | - |
81 | | - const handleCloseModal = () => { |
82 | | - setTempAmenitiesFilter(amenitiesFilter); |
83 | | - setTempRatingFilter(ratingFilter); |
84 | | - setTempPriceFilter(priceFilter); |
85 | | - setIsFilterModalOpen(false); |
86 | | - }; |
87 | | - |
88 | | - const toggleLikeProperty = (propertyId) => { |
89 | | - setLikedProperties((prevLikedProperties) => |
90 | | - prevLikedProperties.includes(propertyId) |
91 | | - ? prevLikedProperties.filter((id) => id !== propertyId) |
92 | | - : [...prevLikedProperties, propertyId] |
93 | | - ); |
94 | | - }; |
95 | | - |
| 7 | +const HomePage = () => { |
96 | 8 | return ( |
97 | 9 | <div className="bg-gray-50 min-h-screen"> |
98 | | - <Navbar |
99 | | - searchTerm={searchTerm} |
100 | | - setSearchTerm={setSearchTerm} |
101 | | - likedProperties={likedProperties} |
102 | | - amenitiesFilter={tempAmenitiesFilter} |
103 | | - setAmenitiesFilter={setTempAmenitiesFilter} |
104 | | - ratingFilter={tempRatingFilter} |
105 | | - setRatingFilter={setTempRatingFilter} |
106 | | - priceFilter={tempPriceFilter} |
107 | | - setPriceFilter={setTempPriceFilter} |
108 | | - uniqueAmenities={uniqueAmenities} |
109 | | - onClear={handleClearFilters} |
110 | | - onApply={handleApplyFilters} |
111 | | - minPrice={minPrice} |
112 | | - maxPrice={maxPrice} |
113 | | - user={user} |
114 | | - setUser={setUser} |
115 | | - /> |
116 | | - |
| 10 | + <Navbar /> |
117 | 11 | <main className="max-w-6xl mx-auto mt-20 px-4 pt-12 pb-8"> |
118 | 12 | <div className="grid md:grid-cols-4 gap-6"> |
119 | | - {filteredProperties.length > 0 ? ( |
120 | | - filteredProperties.map((property) => ( |
121 | | - <PropertyCard |
122 | | - key={property.id} |
123 | | - property={property} |
124 | | - isLiked={likedProperties.includes(property.id)} |
125 | | - toggleLike={() => toggleLikeProperty(property.id)} |
126 | | - /> |
127 | | - )) |
128 | | - ) : ( |
129 | | - <div className="col-span-4 text-center py-12"> |
130 | | - <p |
131 | | - data-testid="conditional-message" |
132 | | - className="text-xl text-gray-600" |
133 | | - > |
134 | | - No rental properties found |
135 | | - </p> |
136 | | - </div> |
137 | | - )} |
| 13 | + {propertiesData.properties.map((property) => ( |
| 14 | + <PropertyCard key={property.id} property={property} /> |
| 15 | + ))} |
| 16 | + <div className="col-span-4 text-center py-12"> |
| 17 | + {/* <p |
| 18 | + data-testid="conditional-message" |
| 19 | + className="text-xl text-gray-600" |
| 20 | + > |
| 21 | + No rental properties found |
| 22 | + </p> */} |
| 23 | + </div> |
138 | 24 | </div> |
139 | 25 | </main> |
140 | 26 |
|
141 | | - {isFilterModalOpen && ( |
142 | | - <FilterModal |
143 | | - onClose={handleCloseModal} |
144 | | - amenitiesFilter={tempAmenitiesFilter} |
145 | | - setAmenitiesFilter={setTempAmenitiesFilter} |
146 | | - ratingFilter={tempRatingFilter} |
147 | | - setRatingFilter={setTempRatingFilter} |
148 | | - priceFilter={tempPriceFilter} |
149 | | - setPriceFilter={setTempPriceFilter} |
150 | | - uniqueAmenities={uniqueAmenities} |
151 | | - onClear={handleClearFilters} |
152 | | - onApply={handleApplyFilters} |
153 | | - minPrice={minPrice} |
154 | | - maxPrice={maxPrice} |
155 | | - /> |
156 | | - )} |
| 27 | + {/* <FilterModal/> */} |
157 | 28 | </div> |
158 | 29 | ); |
159 | 30 | }; |
|
0 commit comments